Front-End/CSS
[CSS] Ex12_BoxSizing.html
이뮨01
2023. 6. 12. 11:03
요소의 크기를 화면에 표시하는 방식을 배우다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* Box sizing 요소의 크기를 화면에 표시하는 방식 */
div{
/* 너비 */
width: 500px;
/* 경계선 */
border: 20px solid gray;
/* 안쪽 여백 */
padding: 20px;
}
/* /* (1) content-box : 기본값
- 내가 설정한 너비 = content의 너비
ex) "너비 500px로 해줘" => content 500px
- padding, border값을 전혀 신경쓰지 않는다.
값이 들어가면 들어간만큼 크기가 커진다 *
(2) border box
- 내가 설정한 너비 = border 안쪽까지의 너비
- content + padding + border = 내가 설정한 너비
- padding, border 값이 들어가더라도 크기가 커지지 않는다.
만약에 내가 padding, border 값을 주더라도
전체 도형의 크기가 영향을 받지 않았으면 좋겠다.
=> box-sizing: border-box;
/ */
.bb{
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="cb">
<p>content-box</p>
</div>
<div class="bb">
<p>border-box</p>
</div>
</body>
</html>
정리
border-box는 border + padding + content
content-box는 오직 content의 크기만을 정의한다.