盒子模型总结
1、CSS盒子模型
所有的HTML元素都可以看做盒子,包括:实际内容(content),内边距(padding),边框 (border),外边距(margin)四个属性
2、标准盒子模型和IE盒子(怪异)模型
盒子的实际内容content的width/height=我们设置的width/height
盒子总宽度=width/height+padding+margin+border
.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
}
怪异盒子模型(IE)
width=content+padding+border
盒子的总高度=width+margin
.box {
width: 200px;
height: 200px;
border: 20px solid black;
padding: 50px;
margin: 50px;
}
3、css3指定盒子模型类型
标准盒模型:box-sizing:content-box
IE(怪异)盒模型:box-sizing:border-box