CSS 상자 모델의 테두리를 사용하는 방법을 알고 있습니까? CSS 박스 모델의 구성을 소개합니다.-CSS 튜토리얼-php.cn

CSS 상자 모델의 테두리를 사용하는 방법을 알고 있습니까? CSS 박스 모델의 구성을 소개합니다.

寻∝梦

풀어 주다： 2018-09-08 13:43:44

원래의

2668명이 탐색했습니다.

이 글에서는 css 스타일에서 상자 모델의 테두리를 주로 소개하고 전체 예제와 함께 CSS 상자 모델의 테두리에 대한 자세한 소개와 설명을 제공합니다. 코드. 이 글을 같이 보시죠

먼저 박스모델의 구성요소에 대해 이야기해보겠습니다.

생각해보면 상자 모델, 상자를 떠올리지 않을 수 없습니다. CSS 스타일 상자 모델에는 내용, 테두리, 내부 여백, 외부 여백 등이 포함됩니다. 오늘 기사에서는 주로 상자 모델의 여백에 대해 설명합니다.

먼저 몇 가지 속성과 소개를 살펴보겠습니다.

테두리 스타일 속성은 다음과 같이 사용됩니다. 모든 요소 테두리 스타일 설정
border-width 속성은 요소의 모든 테두리 너비(얇음/중간/두꺼움/길이)를 설정합니다.
#🎜🎜 ##🎜🎜 #

이제 완전한 예를 살펴보겠습니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
table{border-style:solid; border-width:medium; border-color:red}
</style>
</head>
<body>
<table width="200px"; height="150px">
<tr><td></td><td></td></tr>
<tr><td></td><td></td></tr>
</table>
</body>
</html>

로그인 후 복사

이것은 위의 세 가지 속성을 포함하는 완전한 HTML 코드입니다. 사용된.

이제 브라우저에 표시되는 효과를 살펴보겠습니다.

# 🎜🎜#테두리 내용입니다. 이 이미지의 완성도를 정의하는 속성은 세 가지입니다. (자세한 내용을 보고 싶으시면 PHP 중국어 홈페이지 CSS 상자 모델의 테두리를 사용하는 방법을 알고 있습니까? CSS 박스 모델의 구성을 소개합니다. css 참조 매뉴얼

열로 이동하여 학습하세요)

더 자세히 살펴보겠습니다. 깊이 내용:

border-bottom-style:double: 아래쪽 테두리를 이중(이중 선 테두리)으로 정의합니다.

#🎜 🎜#border-width:20px: 테두리 픽셀 값을 20px로 정의합니다.
이것을 코드에 추가해 보겠습니다.
```
<style type="text/css">
table{border-style:solid; border-width:medium; border-color:red;border-top-style:double;border-left-style:double;
border-width:20px;}
</style>
```
로그인 후 복사
이제 효과를 살펴보겠습니다. #🎜🎜 #

상단과 좌측은 이중선 테두리이고, 하단과 우측은 정해져 있지 않아서 마치 위의 그림은 실선입니다. 픽셀은 20px입니다.
좋아요, 이 글에서는 CSS와 모델에 대한 소개입니다. (자세한 내용을 보려면 PHP 중국어 웹사이트
css 학습 매뉴얼 열로 이동하여 알아보세요.) 질문이 있으시면 아래에 메시지를 남겨서 질문하실 수 있습니다.
위 내용은 CSS 상자 모델의 테두리를 사용하는 방법을 알고 있습니까? CSS 박스 모델의 구성을 소개합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!