css2

盒子模型（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，取值越大，定位元素在层叠元素中越居上。
• 如果取值相同，则根据书写顺序，后来居上。
• 后面数字一定不能加单位。
• 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性