CSS盒模型是网页布局中一个很重要的概念，在前端面试题中也会经常出现。本文将从以下几个方面讲解CSS盒模型：
- CSS盒模型的概念
- 标准盒模型和IE盒模型
- 元素的实际宽高计算
- 更改盒模型模式
一、CSS盒模型的概念
在网页中，所有的HTML元素都可以看做一个盒子。那么CSS盒模型其本质上就是一个盒子，它封装HTML元素，包括：外边距（margin），边框（border），内边距（padding），和内容（content）。如下图所示：
除 content 区域外，其他三个区域还可以设置*-left、*-right、*-top、*-bottom 四个方向的值，其中*为margin、border 或 padding。如果觉得上述解释仍然很抽象，那我们可以以相框为例，进行理解。
拿出您女朋友或者全家福相框，其中的content 指的就是照片，是这个相框中最主要和最重要的内容；而 padding 指的是照片到相框内边缘的距离；border 指的就是相框的精美的边框；您左手拿一个相框，右手拿一个相框，margin 指的就是两个相框之间的距离。这样一来，是不是就很清晰了？
二、标准盒模型和IE盒模型
在CSS中，有两种盒模型，即标准盒模型和IE盒模型。两者都包括：margin，border，padding，和 content。他们的区别在于在标准盒模型中，设置元素的 width 属性，其实就是设置 content 区域的宽高；而在IE盒模型中，设置元素的 width 属性，其实就是设置了content、padding、border 三者的宽高。下面两图形象的阐述了两者的区别。
三、元素的实际宽高计算
在标准模式下，在CSS中设置 width/height 属性，并不意味着该元素的实际宽高就是该属性值，元素的实际宽高可以通过以下公式得到：
元素的实际宽度 = width + padding-left + padding-right + border-left + border-right元素的实际高度 = height + padding-top + padding-bottom + border-top + border-bottom举两个例子：
eg1：对某个div元素设置如下属性值：
div{
width: 100px;
height: 60px;
border:1px solid black;
padding-left:10px;
}则该div元素的实际宽度 = width + padding-left + border-left + border-right = 100 + 10 + 1 + 1 =112px；
该div元素的实际高度 = height + border-top+ border-bottom= 60 + 1 + 1 =62px；
eg2：对某个div元素设置如下属性值：
div{
width: 120px;
height: 90px;
border:2px solid black;
padding:16px 5px;
margin:5px;
}则该div元素的实际宽度 = width + padding-left + padding-right+ border-left + border-right = 120 + 5 + 5 + 2 + 2 =134px；
该div元素的实际高度 = height + border-top+ border-bottom+ padding-top + padding-bottom= 90 + 2 + 2 + 16 +16 =126px；
四、更改盒模型模式
CSS3的 box-sizing 属性可以更改盒模型显示模式，其用法为：
box-sizing: content-box|border-box|inherit;
| 属性值 | 说明 |
|---|---|
| content-box | 默认值，指定为标准盒模型模式，在宽度和高度之外绘制元素的内边距和边框。 |
| border-box | 指定为IE盒模型模式，为元素设定的宽度和高度决定了元素的边框盒。 即为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
如上面第2个例子，若添加一个属性为：
div{
/*同之前一样*/
box-sizing:border-box;
}那么，元素的实际宽度 = width = 120px；
元素的实际高度 = height = 90px；