1. CSS简介
CSS（Cascading Style Sheets），即层叠样式表。
CSS可以快速维护页面元素（如表格、文本、链接、图像等）的样式（如宽度、高度、字体、字号、颜色等）。
W3C建议尽量使用CSS样式取代HTML属性。
2. CSS的使用方式
外部样式（引入外部的CSS文件） 内部样式（书写于文档的内部，以style标签进行标识） 内联样式（书写于标签的内部）
三种使用方式的优先级为：外部样式最低，内部样式其次，内联样式最高。（前两种的优先级和它们在文件中的位置有关）。
3. 选择器
选择器（Selector）：告诉Web页面，哪些HTML元素将使用规定的样式。
通配选择器： * （自动应用于所有的HTML元素） 标记选择器： 标记名称 （自动应用于指定的元素） 类选择器： .类名称 （添加class=”类名称”，多个类名称之间用空格分隔） id选择器： #id名称 （添加id=”id名称”，只能应用于唯一元素） 群组选择器： 选择器1,选择器2,… （具有相同样式的CSS选择器的简写 派生选择器（后代选择器）： 选择器1 选择器2 …（选择器1和选择器2至少是父子关系） 子代选择器： 选择器1>选择器2>… （选择器1和选择器2必须是父子关系）
伪类/伪元素选择器
:before :after :link :hover :active :visited :focus
4. 常用的尺寸单位
% 百分比 px 像素 em 相较于当前字体大小的倍数 rem 相较于根元素html字体大小的倍数5. 外边距
margin:value; (只给一个值，表示四个方向的外边距相同) margin:value value;（给两个值，第一个值表示上下，第二个值表示左右） margin:value value value;(给三个值，第一个值表示上，第二个值表示左右，第三个值表示下） margin:value value value vlaue;(给四个值，分别表示上，右，下，左）
小技巧： 块级元素的水平居中 margin:0 auto;
5. display 属性
| 值 | 描述 |
|---|---|
| none | 此元素不会被显示。（不保留所在空间） |
| block | 此元素将显示为块级元素，元素前后会带有换行符。 |
| inline | 默认。此元素会被显示为行内元素，元素前后没有换行符。 |
| inline-block | 行内块元素。 |
| inherit | 从父元素继承 display 属性的值。 |
以下的HTML元素默认为块级元素：
p,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd
块级对象的默认宽度为父元素的100%。
6. 首行缩进
语法：text-indent:value
text-indent:2em; # 首行缩进2个字符。
7. 行高
语法：line-height:value
line-height:1.5em; # 行高一般为字体大小的1.5倍到2倍（1.5em-2em）
8. 文本的水平对齐
语法：text-align:value
text-align:center; # 文本水平居中
9. 浮动
描述：设置对象的浮动
语法：float:none|left|right|inherit
说明：
元素如果存在float:left;样式，那么该对象将尽量向左浮动，直到遇到第一个浮动对象的右边界。 元素左浮动或右浮动时，会脱离标准的文档流，而且该元素的高度已经无法影响到父元素的高度。 浮动元素会生成一个块级框，而不论它本身是何种元素。10. 清除浮动
语法：clear:left|right|both
常见的清除浮动的代码：
.clear:after{
display:block;
content:".";
height:0;
clear:both;
visibility:hidden;
}
11. 定位
position 属性规定元素的定位类型。
语法：position:static|fixed|relative|absolute|inherit
任何元素都可以定位。 绝对或固定定位的元素会生成一个块级框，而不论该元素本身是什么类型。 相对定位的元素会相对于它在正常流中的默认位置进行偏移。| 值 | 描述 |
|---|---|
| static | 默认值。没有定位，元素出现在正常的文档流中（忽略 top、right、bottom、left和z-index 声明）。 |
| fixed | 固定定位。脱离文档流，相对于浏览器窗口进行定位，通过TRBL调整其位置。主要用于设置页面顶端或底部的固定区域，拖动滚动条时，不会随滚动条滚动。 |
| absolute | 绝对定位。脱离文档流，相对于非 static 定位的第一个祖先元素进行定位，通过TRBL调整其位置。如果没有的话，就相对于body。主要用于设置遮罩层。 |
| relative | 相对定位。没有脱离文档流，相对于该元素在正常文档流中的位置进行定位，通过TRBL调整其位置。 |
| inherit | 从父元素继承 position 属性的值。 |
常常把祖先元素的position属性设置成relative（这样并不会影响祖先元素在页面中的位置），然后把子元素设置成absolute，根据这种技巧来制作下拉菜单或浮动图标。
12. z-index 属性
设置元素的堆叠顺序。拥有更高堆叠顺序的元素会处于堆叠顺序较低的元素的上层。
注意： z-index 属性仅能在定位元素上奏效。
13. 透明度
opacity:value(0-1); # Chrome、Fixfox等浏览器 filter:alpha(opacity=value); # IE浏览器，value的取值范围是0-100
