/** 更新于 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+