CSS3 상자 모델 및 상자 크기 조정 속성 이해-CSS 튜토리얼-php.cn

CSS3 상자 모델 및 상자 크기 조정 속성 이해

高洛峰

풀어 주다： 2017-03-02 15:16:24

원래의

1812명이 탐색했습니다.

문서의 각 요소는 직사각형 상자로 표시됩니다. 렌더링 엔진의 목적은 크기, 속성(예: 색상, 배경, 테두리 측면) 및 이러한 상자의 위치를 결정하는 것입니다. CSS에서 이러한 직사각형 상자는 표준 상자 모델을 사용하여 설명됩니다. 이 모델 은 요소가 차지하는 공간 을 설명합니다. 각 상자에는 여백, 테두리, 패딩 및 내용의 네 가지 테두리가 있습니다.

css3 盒模型以及box-sizing属性了解

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

css3 盒模型以及box-sizing属性了解