盒子模型（CSS重点）
CSS三大模块： 盒子模型 、浮动 、定位。
盒子模型：就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
盒子边框（border）
语法：border : border-width || border-style || border-color
常用属性值：none：没有边框即忽略所有边框的宽度（默认值）、solid线(单实线)、dashed(虚线)、
dotted(点线)、double(双实线)实现居中
1 外边距实现盒子居中
满足两个条件：
- 必须是块级元素。
- 盒子必须指定了宽度（width）
然后给元素左右的外边距都设置为auto。
例如：.header{ width:960px; margin:0 auto;}
2 文字盒子居中
- 文字水平居中是 text-align: center
- 盒子水平居中 左右margin 改为 auto
盒子模型布局稳定性
按照优先使用宽度 （width）、其次 使用内边距（padding）、再次 外边距（margin）。
width > padding > margin
原因：
- margin 会有外边距合并 还有 ie6下面margin 加倍的bug，所以最后使用。
- padding 会影响盒子大小， 需要进行加减计算（麻烦） 其次使用。
- width 没有问题，我们经常使用宽度剩余法 高度剩余法来做。
盒子阴影
语法： box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；浮动(float)
CSS的定位机制有3种：普通流（标准流）、浮动和定位。
浮动：是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法：选择器{float:属性值;} 属性值可以是left，right，both，none。
目的：为了让多个块级元素同一行上显示。
定位(position)
position 属性值分为四种：
- static：自动定位（默认定位方式），所谓静态位置就是各个元素在HTML文档流中默认的位置。
- relative：相对定位，相对定位是将元素相对于它在标准流中的位置进行定位
- absolute：绝对定位，相对于其上一个已经定位的父元素进行定位
- fixed：固定定位，相对于浏览器窗口进行定位。它的特点在于它的元素跟父亲没有任何关系，只认浏览器；完全脱标，不占有位置，不随着滚动条滚动。
叠放次序（z-index的特点：
- z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
- 如果取值相同，则根据书写顺序，后来居上。
- 后面数字一定不能加单位。
- 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性