CSS 틀 모델 개요
CSS 틀 모델 개요
요소 박스의 가장 내부는 실제 내용이며, 내용을 직접 둘러싸고 있는 것은 내간격입니다. 내간격은 요소의 배경을 표시합니다. 내간격의 경계는 테두리입니다. 테두리 이외는 백그라운드 간격입니다. 백그라운드 간격은 기본적으로 투명이며, 그 뒤의 어떤 요소도 가려지지 않습니다.
ヒント:백그라운드는 내용과 내간격, 테두리로 구성된 영역에 적용됩니다.
내간격, 테두리 및 백그라운드는 선택 사항입니다. 기본 값은 0입니다. 그러나 많은 요소는 사용자 대리 스타일 시트에서 백그라운드와 내간격을 설정합니다. 요소의 margin과 padding을 0으로 설정하여 이 브라우저 스타일을 덮을 수 있습니다. 이는 각각 수행할 수 있으며, 전용 선택자를 사용하여 모든 요소에 대해 설정할 수도 있습니다:
* {
margin: 0;
padding: 0;
}
CSS에서 width와 height는 내용 영역의 너비와 높이를 의미합니다. 내간격, 테두리 및 백그라운드를 증가시키면 내용 영역의 크기를 영향을 미치지 않지만, 요소 박스의 총 크기를 증가시킵니다.
장의 각 변에 10픽셀의 백그라운드 간격과 5픽셀의 내간격이 있을 때, 이 요소 박스가 100픽셀이 되도록 하려면, 내용의 너비를 70픽셀로 설정해야 합니다. 아래 그림을 참조하세요:
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
ヒント:내간격, 테두리 및 백그라운드는 요소의 모든 변에 적용될 수 있으며, 단일 변에만 적용될 수 있습니다.
ヒント:백그라운드는 음수 값을 가질 수 있으며, 많은 경우 음수 백그라운드 값을 사용합니다.
브라우저 호환성
한 페이지에 적절한 DTD를 설정하면 대부분의 브라우저가 위 그림과 같이 내용을 표시합니다. 그러나 IE 5와 6의 표시는 올바르지 않습니다. W3C의 규범에 따르면, 요소 내용이 차지하는 공간은 width 속성으로 설정되며, 내용 주위의 padding과 border 값은 별도로 계산됩니다. 불운히 IE5.X와 6은怪异模式에서 자신의 비표준 모델을 사용합니다. 이 브라우저의 width 속성은 내용의 너비가 아니라 내용, 내간격 및 테두리의 너비의 총합입니다.
이 문제를 해결할 방법이 있습니다. 하지만 현재 가장 좋은 해결책은 이 문제를 피하는 것입니다. 즉, 요소에 특정 너비의 내간격을 추가하지 않고, 대신 부모 요소와 자식 요소에 내간격 또는 외간격을 추가하려고 시도합니다.
용어 번역
- element: 요소.
- padding: 내간격, 때로는 채우기로 번역됩니다.
- border: 경계선.
- margin: 외간격, 때로는 공백 또는 공백 경계로 번역됩니다.
codew3c에서는 padding과 margin을 일관되게 내간격和外간격으로 부르고 있습니다. 경계선 내의 공백은 내간격입니다. 경계선 외의 공백은 외간격입니다. 쉽게 기억하시나요? :)
