浅谈css盒子模型

说起css盒子模型，它基本内容很简单，但是他对排版起着至关重要的作用，在实际编程中大家一般喜欢用W3C标准模型盒子，除此之外，还有IE盒子这一模型。

盒子，顾名思义，首先就需要有一个合适的大小来满足存放它的条件，所以我们有了 margin（外边距），来让它的大小适宜于整个网页页面，而不至于在页面中显示太过拥挤，更重要的是居中常常也用到它，后面我会详细讲居中这一块。而光有了外面的美观并不足够，盒子的材质也很重要，border（边框）给我们提供了一个多方位的选择，它包括三个属性，border-style（边框样式），border-width（边框宽度），border-color（边框颜色），它亦具有位置特点（margin和padding同），例如可以这样表示：border-left-style（左边框样式）。若要简写则需要注意顺序先样式再宽度最后颜色，它的style则有如下几种属性：

none    定义无边框。
hidden    与 "none" 相同。应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted    定义点状边框。在大多数浏览器中呈现为实线。
dashed    定义虚线。在大多数浏览器中呈现为实线。
solid    定义实线。
double    定义双线。双线的宽度等于 border-width 的值。
groove    定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge    定义 3D 垄状边框。其效果取决于 border-color 的值。
inset    定义 3D inset 边框。其效果取决于 border-color 的值。
outset    定义 3D outset 边框。其效果取决于 border-color 的值。
inherit   继承父元素。

盒子内部为了美观也需要一些留白，就应声而出了padding（内边距），是内容（content）与border的距离，这个不多说。

在编程中，默认模型则是W3C标准模型盒子，也可以用box-sizing来定义，其中content-box是标准模型，border-box是IE模型。

两种种盒子模型的区别一定要记清楚，它只有一点区别，就是W3C盒子的width只是内容（content）宽度，而IE盒子则是content+padding+border的总宽度，这个宽度width对后面获取元素宽度有重要意义。

加两张图便于理解记忆：