box-sizing 속성은 CSS3에서 도입되었습니다. width 속성과 height 속성으로 각각 지정된 너비와 높이 값에 요소 내부의 패딩 영역이 포함되는지 여부와 요소의 너비와 높이를 지정할 수 있다고 설명하는 사람들도 있습니다. 국경. 이 문장은 좀 헷갈리는데요, 컨테이너의 높이와 너비에 대한 계산 방법으로 이해하는데, 구체적으로 어떤 계산 방법이 기존 계산 방법과 다른가요? 예. .
예:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>상자 크기 조정</title><styletype=text/css>div{width:50px;height:50px;margin:10 px;padding:10px;border:10pxsolid#888;}#bs{box-sizing:border-box;}</style></head><body><div></div><divid=bs></ div></body></html>실행 결과:
위 그림에서 볼 수 있듯이 둘 사이의 크기 차이는 매우 분명합니다. 브라우저를 사용하여 둘이 어떻게 계산되는지 확인할 수 있습니다.
위의 그림은 전통적인 계산 방식으로 위의 첫 번째 div의 크기입니다.
div의 실제 너비는 50+10*2+10*2=90px임을 알 수 있습니다. div에 지정하는 높이와 너비는 그림 1-1의 가장 안쪽 영역인 콘텐츠 영역의 높이와 너비를 참조하기 때문입니다.
위 그림에서 두 번째 div의 실제 계산된 크기는 여기에서 div의 실제 너비가 10+10*2+10*2=50px입니다. 이러한 계산을 통해 우리는 box-sizing이 border-로 설정되어 있음을 분명히 알 수 있습니다. 마지막으로 컨테이너의 높이와 너비는 단순히 콘텐츠 영역의 크기를 나타내는 것이 아니라 실제 컨테이너의 높이와 너비입니다. 또한 이때의 높이와 너비 계산 방법에는 패딩과 테두리 크기도 포함되어 있음을 이해할 수 있습니다.
box-sizing 속성의 선택적 값 은 다음과 같습니다.
[예제] 다음은 상자 크기 속성의 사용을 보여주기 위해 예를 사용합니다.
<!DOCTYPEhtml><html><head><style>div{width:300px;height:50px;margin-top:5px;border:10pxsolidred;padding:5px;}.two{box-sizing:content-box;} .삼{ box-sizing:border-box;}</style></head><body><divclass=one>기본값</div><divclass=two>content-box</div><divclass=two>border-box </div></body></html>실행 결과:
