>  기사  >  웹 프론트엔드  >  HTML에서 상자란 무엇입니까?

HTML에서 상자란 무엇입니까?

coldplay.xixi
coldplay.xixi원래의
2021-02-26 15:26:549594검색

HTML의 상자: 1. 함께 작성되는 [margin] 속성 2. 함께 작성되는 [border] 속성 3. [padding] 위쪽, 오른쪽, 아래쪽, 왼쪽 및 반대쪽을 채웁니다.

HTML에서 상자란 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, html5 버전, DELL G3 컴퓨터 이 방법은 모든 브랜드의 컴퓨터에 적합합니다.

HTML의 상자:

1. 여백 함께 작성된 속성

4

하나를 쓰면 4개가 모두 동일합니다.

2개가 있을 경우 오른쪽 상단, 반대편

3개를 완성합니다. , 위쪽, 오른쪽, 아래쪽 및 반대쪽

margin-top margin-right margin-bottom margin-left

이 4가지 속성은 별도로 작성할 수 있습니다

2. border 공동 작성 속성

border-color 색상

border-top-color: ;

border-left-color:

border-style 스타일

또한 위쪽, 아래쪽, 왼쪽 및 오른쪽으로 구분됩니다.

테두리 너비

또한 위쪽, 아래쪽, 왼쪽 및 오른쪽으로 구분됩니다. right

글을 쓸 때 순서를 구분할 필요는 없습니다

3. padding

오른쪽 위, 왼쪽 아래

반대쪽도 채워주세요

정의된 너비와 높이는 내용 부분만

Padding과 테두리가 상자를 더 크게 만듭니다.

상자 크기 내용+패딩+테두리

HTML에서 상자란 무엇입니까?

Example

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>框模型</title>
  <link rel="stylesheet" type="text/css" href="css/day03.css"/>
 </head>
 <body>
<div class="d04_01">今天星期三</div>
  
  
  
 </body>
</html>

Result

HTML에서 상자란 무엇입니까?

관련 학습 권장 사항: html 비디오 튜토리얼

위 내용은 HTML에서 상자란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.