css盒子模型本质上是一个盒子，它包括 content ,padding , margin , border
标准盒子模型
- box-sizing属性值
a). content-box : width = content （正常模式）
b). padding-box : width = content +padding
c). border-box : width = content +padding + border ( IE怪异模式 )
1. 正常模式（ width+padding+border+margin ） content-box
<style>
.div1 {
width: 300px;
height: 300px;
padding: 20px;
margin: 20px;
background: red;
box-sizing: content-box;
border: 10px solid yellow;
}
</style>
<div class="div1">
</div>
展示样式.png
image.png
可以看出上面div的elementWidth = (width:300 )+(padding-left:20)+(padding-right:20)+(border-right:10)+(border-left:10)+(margin-right:20)+(margin-left:20) = 400px
2. 怪异模式（ width+margin ）border-box
<style>
.div1 {
width: 300px;
height: 300px;
padding: 20px;
margin: 20px;
background: red;
box-sizing:border-box;
border: 10px solid yellow;
}
</style>
<div class="div1">
</div>
image.png
image.png
可以看出上面div的elementWidth = (width:300 )+(margin-right:20)+(margin-left:20) = 340px;
width = ppadding +content +border
3. inhert
规定应从父元素继承 box-sizing 属性的值。
<style>
.div1 {
width: 300px;
height: 300px;
padding: 20px;
margin: 20px;
background: red;
box-sizing:border-box;
border: 10px solid yellow;[图片上传失败...(image-f11570-1542945271166)]
}
</style>
<div class="div1">
</div>
image.png
image.png
image.png
