Powerjett什么是css盒模型
页面是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型本身是由 margin、border、padding、content组成,在页面中所占的实际宽度是 margin + border + padding + content相加
盒模型的种类
- 标准的(W3C)盒模型：
在标准盒模型下，盒子在页面中所占的实际物理宽度:
宽度 = margin + border + padding + width
- IE盒模型(怪异盒子模型)：
在IE盒模型下，盒子在页面中所占的实际物理宽度:
宽度 = margin + width
说明
由于IE盒模型没有算padding和border,所以用户设置的padding 和 border就需要从width里面去分； 也就是: width = padding + border + 内容的宽度
注意
在IE盒模型下，如果width和height设置成0， 此时padding和border设置了值，那么盒子的宽度是等于 padding + border的;
总结一句话就是: IE盒模型下， width的值= Math.max(width, padding + border)，两者取较大者。
如何设置
css
.box {
box-sizing: border-box | content-box;
}例如
以下两个盒子的样式:
css
.box{
width: 100px;
height: 100px;
background: red;
padding: 20px;
border: 10px solid blue;
margin: 10px;
}
.content-box {
box-sizing: content-box;
}
.border-box {
box-sizing: border-box;
}