반응형
박스의 width와 height를 어떻게 구하는지 정하는 방식
box-sizing = content-box | border-box | initial | inherit
값
| content-box | 기본값. width와 height가 콘텐츠 영역만 포함하고 안팎 여백 & 테두리를 포함하지 않는다 |
| border-box | width와 height가 안팎 여백 & 테두리를 포함한다. |
| initial | 초기 값으로 지정 |
| inherit | 부모로부터 상속 |
예제
border-box
content-box
<!DOCTYPE html>
<html>
<head>
<style>
div.container {
width: 100%;
border: 2px solid black;
}
.content-box {
box-sizing: content-box;
width: 50%;
border: 5px solid red;
float: left;
}
.border-box {
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="border-box">border-box</div>
<br>
<div class="content-box">content-box</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
가로 세로 길이의 정확한 값을 원하면 border-box 설정을 해두자
reference
반응형
'Front-end > CSS' 카테고리의 다른 글
| font-family 상속 시키기 (0) | 2022.11.04 |
|---|---|
| css 챌린지 (0) | 2022.10.05 |
| [CSS] Gap (0) | 2022.06.13 |
| loading spinner (2) | 2022.02.13 |
| CSS 애니메이션 성능 개선 (0) | 2022.01.27 |