本文共 555 字，大约阅读时间需要 1 分钟。

CSS盒模型

我们可以把盒模型想象成你的身边摆着一个盒子，盒子中装着一块砖头，砖头就是Content(内容)，盒子里砖头旁边剩下的空间是Padding(内边距)，盒子自身的宽度是Border(边框)，而盒子和你之间的距离就是Margin(外边距) 。

Margin(外边距)：边框外的区域，外边距是透明的。

Border(边框)：围绕在内边距和内容外的边框。 Padding(内边距)：清除内容周围的区域，内边距是透明的。 Content(内容)：盒子的内容，显示文本和图像。

盒模型分为两种（box-sizing的默认属性是content-box ）

1.IE盒模型：box-sizing: border-box

2.W3C的标准盒模型：box-sizing: content-box

这二者之间的区别在于宽高的计算：

设padding=“10px”,border=“20px”

W3C的标准盒模型：

比如你设置content的width为200px，那么浏览器最后显示出来的width为width + padding + border = 200 + 10 * 2 + 20 * 2 = 260px

而IE盒模型最后显示出来的width为：

width + padding + border = 200px

转载地址：http://vzrgn.baihongyu.com/