css盒子模型及实例

/** 更新于 10/25/2014 **/

1.概述css盒子模型

1>先看看w3c的概述



或者是这样



上面的图示看上去可能感觉有点理论化，好吧，让我们试着用一个实例来解释盒状模型。在我们的例子中，有一个标题和一些文本。该例的HTML代码如下（摘自世界人权宣言）：

<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>

通过添加一些颜色及字体信息，该例可以有以下显示效果：



这个例子包含了两个元素：h1和p。这两个元素的盒状模型如下图所示：



尽管上图显得有点复杂，不过它展示了每个HTML元素是如何被盒子所围绕的。我们可以通过CSS来调整这些盒子。
2>其实块级每个元素都是一个盒子（盒模型）

2.css盒子模型种类

1>w3c标准模型—————————>element空间宽度 = content内容 + border + padding + margin

2>IE传统模型（IE6-）—————>element = content = content(border + padding) +margin

3.box-sizing的用法

1>属性：box-sizing: content-box | border-box | inherit

2>用法：content-box是默认的，border-box是IE传统模型

3>一句话：善用box-sizing，拯救布局问题

4>兼容性：IE8+