CSS
박스 모델

통사론

• 상자 크기 : 매개 변수 ;

매개 변수

비고

Box Model이란 무엇입니까?

가장자리

브라우저는 HTML 문서의 각 요소에 대해 사각형을 만듭니다. 상자 모델은이 직사각형을 만들기 위해 채우기, 테두리 및 여백을 내용에 추가하는 방법을 설명합니다.

CSS2.2 작업 초안의 다이어그램

네 영역 각각의 둘레를 가장자리 라고합니다. 각 모서리는 상자를 정의합니다 .

• 가장 안쪽의 사각형은 내용 상자 입니다. 이 폭과 높이는 요소의 렌더링 된 내용 (텍스트, 이미지 및 가질 수있는 모든 자식 요소)에 따라 다릅니다.
• 다음은 padding 속성으로 정의 된 패딩 상자 입니다. padding 너비가 정의되어 있지 않으면 채우기 가장자리가 내용 가장자리와 같습니다.
• 그런 다음 border 속성으로 정의 된 테두리 상자가 있습니다. border 폭이 정의되어 있지 않은 경우, 경계의 엣지가 패딩 엣지와 동일 해집니다.
• 가장 바깥 쪽 사각형은 margin 속성으로 정의 된 여백 상자 입니다. margin 너비가 정의되어 있지 않으면 여백 가장자리가 테두리 가장자리와 같습니다.

예

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

이 CSS는 모든 div 요소의 스타일을 5px 너비의 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리로 5px . 50px 의 위쪽, 오른쪽, 아래쪽 및 왼쪽 여백. 20px 의 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩이 있습니다. 콘텐츠를 무시하면 생성 된 상자는 다음과 같습니다.

Chrome의 요소 스타일 패널 스크린 샷

• 콘텐츠가 없으므로 콘텐츠 영역 (가운데 파란색 상자)에는 높이 또는 너비가 없습니다 (0px x 0px).
• 기본적으로 패딩 상자는 콘텐츠 상자와 동일한 크기이며, 위에서 정의한 네 가장자리의 20 픽셀 너비와 padding 속성 (40 픽셀 x 40 픽셀)이 더해집니다.
• 테두리 상자는 패딩 상자와 동일한 크기이며 위에서 정의한 5px 너비와 border 속성 (50x50 픽셀)을 더한 것입니다.
• 마지막으로 여백 상자는 테두리 상자와 같은 크기이며 위에서 정의한 margin 속성 ( margin 속성을 사용하여 150px의 전체 크기를 150px로 지정 함)을 더한 값입니다.

이제 우리 요소를 같은 스타일의 형제로 만들 수 있습니다. 브라우저는 두 요소의 Box Model을보고 이전 요소의 내용과 관련하여 새 요소를 배치해야하는 위치를 찾습니다.

각 요소의 내용은 150 픽셀 간격으로 구분되지만 두 요소의 상자는 서로 닿아 있습니다.

첫 번째 요소를 오른쪽 여백을 갖지 않도록 수정하면 오른쪽 여백 모서리는 오른쪽 테두리 모서리와 같은 위치에있게되고 두 요소는 다음과 같이 보입니다.

상자 크기

padding 및 border 스타일을 요소에 추가하자 마자 요소의 width / height 가 실제 너비 또는 높이를 화면에 나타내지 않으므로 기본 상자 모델 ( content-box )은 반 직관적 일 수 있습니다.

다음 예제는 content-box 잠재적 인 문제점을 보여줍니다.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

패딩이 텍스트 영역의 너비에 추가되므로 결과 요소는 100 %보다 넓은 텍스트 영역입니다.

다행히도 CSS는 요소의 box-sizing 속성을 사용하여 상자 모델을 변경할 수있게 해줍니다. 사용 가능한 속성에는 세 가지 값이 있습니다.

• content-box : 공통 상자 모델 - 너비와 높이에만 패딩 또는 경계선이 아닌 내용이 포함됩니다.

• padding-box : 너비와 높이에는 내용과 채우기가 포함되지만 테두리는 포함하지 않습니다.

• border-box : 너비와 높이에는 내용, 채우기 및 border-box 포함됩니다.

위의 textarea 문제를 해결하려면 box-sizing 속성을 padding-box 또는 border-box 변경할 수 있습니다. border-box 가 가장 일반적으로 사용됩니다.

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

특정 상자 모델을 페이지의 모든 요소에 적용하려면 다음 스 니펫을 사용하십시오.

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

이 코딩 box-sizing:border-box; * 직접 적용되지 않으므로 개별 요소에서이 속성을 쉽게 덮어 쓸 수 있습니다.