HTML_CSS_031_box-sizing

box-sizing

• 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성

  • 기본값 : content-box
  • 상속 : No
  • 애니메이션 : No
  • 버전 : CSS Level 3

box-sizing

• default : box-sizing : content-box;
  • 삐져나온다
• box-sizing : border-box; 적용시
  • width 값이 고정되어 적용된다.

---

html

 <div class="box-1 box-1-1"></div>
 <div class="box-1 "></div>
 <div class="box-1 box-1-2"></div>

---

css

.box-1 {
  width:100px;
  height:100px;
  margin-top:00px;
  background-color:red;
}
.box-1-1 {
  border:10px solid green;
  padding:10px;
}
.box-1-2 {
  border:10px solid black;
  padding:10px;
  box-sizing: border-box;
}

---