맨위 초록색박스와 핑크색박스는 크기가 같은 설정이었지만 box-sizing:border-box; 설정을하자마자 핑크색은 padding까지 기존 넓이에 다 포함해야 해서 순수한 범위인 핑크색이 더 작아졌음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>컨텐츠 크기</title>
<style>
/*
- width와 height는 box-sizing속성의 값에 따라 의미가 달라짐
- box-sizing
- content-box : 기본 값, width는 컨텐츠의 가로
- border-box : width는 컨텐츠의 가로+왼쪽패딩+오른쪽패딩+왼쪽테두리굵기+오른쪽테두리 굵기를 더한 값
*/
.box1{width: 100px; height: 100px; background-color: darkcyan; padding: 10px;
border: 2px solid darkmagenta;}
.box2{width: 100px; height: 100px; background-color: lightpink; padding: 10px;
border: 2px solid darkmagenta; box-sizing: border-box;}
.test1 .leftbox{ width: 50%; height: 150px;
background-color: lightsteelblue; border: 2px solid black; box-sizing: border-box; float: left;}
.test1 .rightbox{ width: 50%; height: 150px;
background-color: lightgreen; border: 2px solid black; box-sizing: border-box; float: right;}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div. class="test1">
<div class="leftbox"></div><div class="rightbox"></div>
</div>
</body>
</html>'괴발개발 > Html+CSS' 카테고리의 다른 글
| CSS_float (0) | 2021.06.09 |
|---|---|
| CSS_position:fixed; (0) | 2021.06.09 |
| CSS_clear와 float 속성 (0) | 2021.06.09 |
| CSS_calc()함수 (0) | 2021.06.09 |
| CSS_before와 after 예제 (0) | 2021.06.09 |