## 盒模型 `margin(外边距)`\- 清除边框外的区域,外边距是透明的。 `border(边框)`\- 围绕在内边距和内容外的边框。 `padding(内边距)`\- 清除内容周围的区域,内边距是透明的。 `content(内容)`\- 盒子的内容,显示文本和图像。 ## W3C的标准盒模型 ![](https://box.kancloud.cn/0be399fd845fe0099a3e656d904c0552_746x455.jpg) > **在标准的盒子模型中,width指content部分的宽度** ## IE的盒模型 ![](https://box.kancloud.cn/779363b28b3b8819c483f39409575cc8_791x462.jpg) > **在IE盒子模型中,width表示content+padding+border这三个部分的宽度** ## css如何设置两种模型 这里用到了CSS3 的属性 box-sizing ~~~ /* 标准模型 */ box-sizing:content-box; /*IE模型*/ box-sizing:border-box; ~~~