css盒子模型布局详解

盒子模型是css里的一个重点内容，一般来讲主要是W3C的盒子模型，不过IE原先也有自己的盒子模型，但是随着发展IE也调整了盒子模型同步W3C，因此这里就不讲IE盒子模型了。

标准W3C盒子模型

以下用一个div的盒子模型作为范例进行解读：






可以看出这个div里面只有范例的文字，而它的盒模型分为四部分：content部分（这部分就是div里的内容部分），padding部分（这个是内边距），border部分（边框），margin部分（外边距）。而该div的width和height在没有其他因素的影响下是content的宽和高。

padding和border以及margin都有top、bottom、left、right四个属性，代表各自四个方向的部分，下面进行了文字标注。



这就是标准的W3C盒子模型，另外有；两个属性对于盒子模型也非常重要，一个是box-sizing，一个是background-clip，这两个属性经常会和盒子模型一起使用，这里也一起说一下。

box-sizing属性具有三个值，且该属性无法继承，该属性用来改变盒子模型的content内容部分宽高的计算方式，默认的宽高计算方式是只计算content部分为宽高，在这里选用不同的值可以改变这种计算方式，这三个值分别是：

border-box：将border部分和padding部分都算入width和height里

padding-box：将padding部分计算入width和height里

content-box：默认content内容部分计算为width和height里

这里举个例子更好理解：

<div style="width:100px;padding:10px;border:10px solid black;">内容</div>

这里默认情况下div内的content部分的宽度为100px，因为没有使用box-sizing，因此默认content-box模式，width就是指的content部分，因此content部分为100px。
如果这里使用了box-sizing:padding-box的css，那么width就是包含了padding部分了，我们知道padding的上下左右都为10px，因此content=width-padding（左右部分），因此是100-20等于80，content部分为80px。

如果这里使用的是box-sizing:border-box的css，那么width就是包含了border和padding部分，padding的上下左右都为10px，border的上下左右夜斗为10px，因此content=width - padding（左右）- border（左右），这样的话就是100-20-20=60，content部分为60px。

blackground-clip属性同样具有三个值，该属性的值用来选择渲染的内容部分，默认情况下blackground-clip的默认值是content-box，也就是默认content部分进行background渲染，该属性没有继承性。

content-box：background的渲染部分是content部分。

padding-box：background的渲染部分是content部分加上padding部分。

border-box：background的渲染部分是content部分加上padding部分以及border部分。

举个例子:

<div>内容</div>

//以下是css
div{
width:100px;
padding:5px;
border:5px solid black;
background:red;
}

如果在上面的css中加入blackground-clip:content-box，那么还是默认的，红色部分width将为100px，如果是padding-box，红色部分width为110px，如果是border-box将是120px，因为背景颜色的渲染部分随着background-clip的值变化了。