CSS盒子模型

1、盒子

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。
所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

盒子模型特性：

• 每个盒子都有：边界、边框、填充、内容 4个属性；
• 每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。

2、W3C盒子模型(标准盒模型)和IE盒子模型(怪异盒模型)

2.1 W3C盒子模型(标准盒模型)

2.2 IE盒模型(怪异盒模型)

3、CSS3-box-sizing

box-sizing 属性允许以特定的方式定义匹配某个区域的特定元素。
box-sizing属性可以指定盒子模型种类，content-box指定盒子模型为W3C（标准盒模型），border-box为IE盒子模型（怪异盒模型）。

• content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框
• border-box：为元素设定的宽度和高度决定了元素的边框盒，就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制，通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度
• inherit：规定应从父元素继承 box-sizing 属性的值