CSS盒子模型

1、简介

CSS中每一个元素都是一个盒模型，包括html和body标签元素。在盒模型中主要包括width、height、border、background、padding和margin这些属性，而且他们之间的层次关系可以相互影响，来看一张盒模型的3D展示图：

2、两种盒模型

box-sizing盒模型分两种：

• 一种是w3c的标准模型
• 另一种是IE的传统模型

它们相同之处都是对元素计算尺寸的模型，它们不同之处是两者的计算方法不一致，原则上来说盒模型是分得很细的，这里所看到的主要是外盒模型和内盒模型，如下面计算公式所示：

（1）W3C标准盒模型

外盒尺寸计算（元素空间尺寸）
element空间高度 ＝ 内容高度 ＋ 内距 ＋ 边框 ＋ 外距
element空间宽度 ＝ 内容宽度 ＋ 内距 ＋ 边框 ＋ 外距

内盒尺寸计算（元素大小）
element高度 ＝ 内容高度 ＋ 内距 ＋ 边框（height为内容高度）
element宽度 ＝ 内容宽度 ＋ 内距 ＋ 边框（width为内容宽度）

（2）IE传统下盒模型

外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）

内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）

3、box-sizing

在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：

box-sizing: content-box | border-box | inherit

取值说明

属性值	属性值说明
content-box	默认值，其让元素维持W3C的标准盒模型，也就是说元素的宽度和高度（width/height）等于元素边框宽度（border）加上元素内距（padding）加上元素内容宽度或高度（content width/ height），也就是element width/height = border + padding + content width / height
border-box	重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度 （此处的内容宽度或高度＝盒子的宽度或高度 - 边框 - 内距）。
inherit	使元素继承父元素的盒模型模式

哪个常用？

如果我们将一个div元素宽度设置为200px后，再为该div设置padding:20px;

• 在content-box情况下：div的宽度会变为200+20*2像素
• 在border-box情况下：div的宽度仍为200像素，只是里面为设置宽度子元素的宽度会发生变化。

因而由上可看出，border-box即IE盒模型更常用。

为了方便，一般我们在通用选择器中加入IE盒模型计算方式

*{
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}