: 요소의 너비와 높이를 계산하는 방법을 지정
box-sizing 속성의 값들
content-box: (기본값)width와height속성이 콘텐츠 영역만 포함하고 안팎 여백과 테두리는 포함하지 않습니다.- ex)
.box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는370px입니다. (width 속성 값 + border)
border-box요소의 크기는 너비(높이) = 테두리 + 안쪽 여백 + 콘텐츠 너비(높이)- 바깥 여백은 포함 X
- ex)
.box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비는350px입니다.(width 속성 값 그대로) - 콘텐츠 영역의 크기는 음수일 수 없으므로
border-box를 사용해 요소를 사라지게 할 수는 없습니다.
기본적으로 width를 100%로로 한다면, 부모 요소의 width를 꽉 채우게 된다.
근데 이것은 컨텐츠 알맹이의 width를 그렇게 조절한다는 것이지, 마진, 패딩, borer를 포함하는 것이 아니다. 따라서 저 세 속성에 값을 준다면, total 길이는 부모 width+세 속성의 값이 되어 부모 길이를 벗어나게 된다.
이 때 세 속성을 포함한 길이를 부모 요소 길이에 맞추고 싶다면?
⇒ box-sizing 속성에 border-box를 값으로 준다!