CSS 入门（一）

0x00 盒模型

盒模型分为两种，标准模式和怪异模式，他们的定义如下：

标准模式: (box-sizing: content-box)
padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding )

怪异模式: (box-sizing: border-box)
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )

怪异模式是 IE 5.x 6.x 中的标准盒模型，虽然叫做怪异模式，但是这种模式的布局模型更符合我们的直觉，所以一般都会将 box-sizing 属性设置为 border-box 。

example:

content-box

div { box-sizing:content-box; width:200px; height:200px; background:blue; padding:10px; border:5px solid lightblue }

border-box

div { box-sizing:border-box; width:200px; height:200px; background:blue; padding:10px; border:5px solid lightblue }

0x01 边距合并

情况1：
当一个元素出现在另一个元素的上面时，第一个元素的下外边距会与第二个元素的上外边距合并，合并后的边距为两个边距中较大的值。

example:

div1

div2

.div1 {                             .div1 {
    width:30px;                         width:30px;     
    height:30px;                        height:30px;
    margin-bottom:20px;                 margin-top:10px;
    background:lightgreen;              background:lightblue;
}                                   }

连个 div 的上边距都合并为 20px 了，既两个边距中较大的值。

情况2：
当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），
它们的上和/或下外边距也会发生合并。
example:

.outter {                           .inner {
    width:80px;                         width:30px;     
    height:80px;                        height:30px;
    margin-top:20px;                    margin-top:30px;
    background:lightgreen;              background:green;
}                                   }

整体的上边距都合并为 30px 了，既两个上边距中较大的值。

情况3：
空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并

如果这个外边距遇到另一个元素的外边距，它还会发生合并

例外情况：
只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

0x02 定位

浏览器中只有两种定位的层次，普通流和非普通流。相对定位的元素会被放置在普通流中，浮动和绝对定位的元素都不会被放入普通流中。

在流中的块级元素会按照从上到下的顺序一个个排列。元素之间的距离根据垂直方向的外边距计算而得。

在流中的行内元素会在行中水平布置。水平方向的间距不会影响行内框的高度，行内框的高度只能通过行高来设置。

position 为 absolute 的时候，元素会从普通流中脱离，普通流中不会再包含这个元素的空间。此时偏移属性参照的是离自身最近的相对定位祖先元素，如果没有相对定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠。

position 为 fixed 时，和 absolute 一样，只是包含块被指定为视窗本身。

绝对定位元素的默认 top 值是最近一个已经定位元素的底部坐标。