마음으로는 알고 있지만, 말로 어떻게 설명할지 헷갈리는 box-sizing에서의 content-box, border-box를 정리해보고자 한다.
box-sizing 속성은 CSS의 테두리 영역 크기를 결정한다.
content-box: css width와 height를 컨텐츠 영역에만 적용한다.
border, padding, margin은 따로 계산되어서 전체 영역이 설정값보다 커질 수 있다.
border-box: css width와 height를 전체 영역에 적용한다.
border, padding, margin을 모두 합산하기 때문에 컨텐츠 영역이 설정값보다 작아질 수 있다.
즉, 컨텐츠의 크기 = 전체크기 - border - padding - margin 이다.
'개발 > FrontEnd Interview' 카테고리의 다른 글
| OAuth란? (0) | 2021.12.08 |
|---|---|
| http1.1 vs http2 (0) | 2021.12.07 |
| default export 와 named export의 차이점 (0) | 2021.12.01 |
| redux-saga가 해결하고자 하는 것 (0) | 2021.11.30 |
| 객체를 생성할때, {}보다 JSON.parse("{}")가 더 빠른이유 (0) | 2021.11.17 |
