盒模型的组成: content + padding + border + margin
标准盒模型(默认) 标准模式下总宽度=width+margin(左右)+padding(左右)border(左右)
如 父元素设置 500px 子元素设置 478px padding设置10px border 设置 1px 所设置的padding 和 border会影响宽高
标准盒模型转换 默认或box-sizing: content-box;
<div class="Fu">
<div class="Son">
</div>
</div>
.Fu{
width: 500px;
height: 500px;
background: blue;
}
.Son{
width: 478px;
height: 478px;
padding: 10px;
border: 1px solid red;
}
<!-- 怪异盒模型 设置的div包含 padding 和 border 不影响宽高 -->
<!-- 怪异盒模型 转换 box-sizing: border-box;-->
<div class="Fu2">
<div class="Son2">
</div>
</div>
.Fu2{
width: 500px;
height: 500px;
background-color: red;
}
.Son2{
box-sizing: border-box;
width: 500px;
height: 500px;
padding: 10px;
border: 1px solid blue;
}