CSS3 상자 모델 및 상자 크기 조정 속성 이해
- 高洛峰원래의
- 2017-03-02 15:16:241841검색
문서의 각 요소는 직사각형 상자로 표시됩니다. 렌더링 엔진의 목적은 크기, 속성(예: 색상, 배경, 테두리 측면) 및 이러한 상자의 위치를 결정하는 것입니다. CSS에서 이러한 직사각형 상자는 표준 상자 모델을 사용하여 설명됩니다. 이 모델 은 요소가 차지하는 공간 을 설명합니다. 각 상자에는 여백, 테두리, 패딩 및 내용의 네 가지 테두리가 있습니다.
W3C 모델: 총 너비 = 왼쪽 여백 + 테두리 왼쪽 + 패딩 왼쪽 + 너비 + 패딩 오른쪽 + 테두리 오른쪽 + 여백 오른쪽
IE 모델: 전체 너비 = 왼쪽 여백 + 너비 + 오른쪽 여백
은 CSS3에 box-sizing 속성을 도입하여 변경을 허용합니다. 기본 CSS 상자 모델은 요소의 너비와 높이를 계산합니다.
에는 두 가지 옵션이 포함됩니다.
content-box: 표준 상자 모델, CSS로 정의된 너비와 높이 콘텐츠의 높이. (기본값)
border-box: IE 상자 모델, CSS에서 정의한 너비와 높이에는 콘텐츠, 패딩 및 테두리가 포함됩니다
예:
( con1은 box-sizing: border-box로 설정되어 있으며 con은 기본 콘텐츠 상자입니다.)
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.con{width: 100px; height: 100px;background-color:royalblue;
border:1px solid red; padding: 10px;}
.con1{box-sizing: border-box;}
</style>
</head>
<body>
<p class="con"></p>
<p class="con con1"></p>
</body>콘솔에서 두 상자의 차이점을 명확하게 볼 수 있습니다.
첫 번째 p의 박스 모델은 다음과 같습니다: content-box
두 번째 p의 박스 모델은 다음과 같습니다: border-box
위의 모든 내용은 편집자가 CSS3 박스 모델 및 박스 크기 속성에 대한 포괄적인 이해를 제공한 내용이므로 도움이 되시기 바랍니다. PHP 중국어 웹사이트를 지원하세요~
더 많은 css3 박스 모델과 박스 크기 속성에 대해서는 PHP 중국어 웹사이트에서 관련 기사를 주목해주세요!