CSS设计指南笔记：盒模型篇

盒模型：浏览器为页面中的每个HTML元素生成的矩形盒子，这些盒子按照可见版式模型在页面上排布。

可见的页面板式由三个属性控制：position属性、display属性  和float属性。其中，position 属性控制页面上元素间的位置关系，display 属性控制元素是堆叠、并排，还是根本不在页面上出现，float 属性提供控制的方式，以便把元素组成成多栏布局。

 每个元素盒子的属性：

 边框（border）。可以设置边框的宽窄、样式和颜色。
 内边距（padding）。可以设置盒子内容区与边框的间距。
 外边距（margin）。可以设置盒子与相邻元素的间距。

CSS 为边框、内边距和外边距分别规定了简写属性，在每个简写声明中，属性值的顺序都是上、右、下、左，顺时针旋转就记住了。如果要设定盒子的外边距，不简写属性：
{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}
使用简写属性：{margin:5px 10px 12px 8px;}
{margin:12px 10px 6px;}
对这个例子来说，由于没有写最后一个值（左边的值），所以左边就会使用右边的值，即10px。
而在下面的例子中：
{margin:12px 10px;}
只写了两个值，上和右，因此缺少的下和左就会被设定为12px 和10px。最后，如果你只写
一个值：
{margin:12px;}
那么4 个边都取这个值。
另外，每个盒子的属性也分三种粒度，到底选择哪个粒度的属性，要看你想选择哪条边，以及
那条边的哪个属性。这三种粒度从一般到特殊分别是举例如下。
1. 全部3 个属性，全部4 条边
{border:2px dashed red;}
2. 1 个属性，全部4 条边
{border-style:dashed;}
3. 1 个属性，1 条边
{border-left-style:dashed;}

 

 盒子边框

 宽度（border-width）。可以使用thin、medium 和thick 等文本值，也可以使用
除百分比和负值之外的任何绝对值。
 样式（border-style）。有none、hidden、dotted、dashed、solid、double、groove、
ridge、inset 和outset 等文本值。
 颜色（border-color）。可以使用任意颜色值，包括RGB、HSL、十六进制颜色
值和颜色关键字。

p.warning {border:solid #f33;}
p.warning {border-width:4px 1px 1px 4px;}

盒子内边距：padding

盒子外边距：margin

叠加外边距：垂直方向上的外边距会叠加

 p {height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px;
margin-bottom:30px;}

它们实际的间距是50 像素。也就是说，较宽的外边距决定两个元素最终离多远。

盒模型结论一：没有（就是没有设置width 的）宽度的元素始终会扩展到填满其父
元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量
等于水平边框、内边距和外边距的和。

 盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展
得更宽。实际上，盒子的width 属性设定的只是盒子内容区的宽度，而非盒子要占
据的水平宽度。

 CSS3 新增了一个box-sizing 属性，通过它可以将有宽度的盒子也设定成具有默认的
auto 状态下的行为