Learn HTML & CSS. 11.Changing the Box model

Review what I learned

1. 기본적으로 설정된 박스 모델의 width와 height는 테두리의 두께에 영향을 받는다.


2. box-sizing 속성을 통해 브라우저에서 박스의 크기를 조정하는 방식을 변결할 수 있다.


3. box-sizing 의 기본값은 content-box 이다.


4. 우리가 새로 사용할 box-sizing 의 값은 border-box 이다.


5. border-box 값은 테두리의 두께나 padding 에 영향을 받지 않는다.

content-box 로 할 때 표현되는 width

예. width를 200px, border를 1px, padding을 왼쪽, 오른쪽 10px씩 설정할 경우

200 - (1 + 1) - (10 + 10)  => 178px 이 실제 content의 width가 됨

=> border-box로 설정할 시 실제 width 가 설정한 width가 됨

출처 : codecademy(HTML & CSS)