一、选择器
1、类型选择器（元素选择器）
2、后代选择器
3、ID选择器
4、类选择器
5、伪类选择器
6、通用选择器 *：选择一个元素的所有后代
7、子选择器 #nav>li：只选择后代的直接后代，即子元素
8、相邻同胞选择器h2+p：定位同一个父元素下某个元素之后的元素
9、属性选择器a[rel="nofollow"]：根据某个属性是否存在或属性的值来寻找元素
二、可视化格式模型
1、外边距叠加：外边距的高度等于两个发生叠加的外边距的高度中的较大者
只有普通文档流中的块级的垂直外边距才会发生外边距叠加；行内框、浮动框或绝对定位框之间的外边距不会叠加；
2、修改行内框尺寸的唯一办法是修改行高或者水平边框、内边距或外边距
3、inline-block：让元素像行内元素一样水平地依次排列，框的内容仍符合块级框的行为
4、相对定位：元素相对于它的起点移动
使用相对定位，无论是否移动，元素仍然占据原来的空间。因此，元素会导致其覆盖其他框。是普通流定位模型的一部分。
5、绝对定位：相对于距离它最近的那个已经定位的祖先元素确定的，若不存在，那么相对于初始包含块
绝对定位使元素的位置与文档流无关，因此不占据空间。可以覆盖页面上的其他元素。通过设置z-index控制叠放次序，值越大，框在栈中的位置越高。
相对于已相对定位的祖先元素对框进行绝对定位。
6、浮动：浮动会让元素脱离文档流，不再影响不浮动的元素
clear:right/left/both/none 表示行框的哪些边不应该挨着浮动框
overflow:hidden/auto 包含的内容对于指定的尺寸太大的情况下元素应该怎样；会自动清理包含的任何浮动因素
三、背景图像效果
1、h1{background:#ccc url(/img/bullet.gif) no-repeat left center}
2、box-shadow:垂直和水平偏移、投影的宽度（模糊程度）、颜色
3、box-radious
4、opacity:0.8 除了对背景生效之外，应用它的元素的内容也会继承它
rgba(0,0,0,0.8)则不会
四、对链接应用样式
1、:link 没有被访问过的链接
:visited 被访问过的链接
:hover 鼠标悬停处的元素
:active 被激活的元素（链接被单击时）
:focus 通过键盘移动到链接上时
text-decoartion:none/underline
定义的次序非常重要 LVHFA
2、:target 为目标元素设置样式
3、inline-height 文本垂直居中
4、text-index 文本块中首行文本的缩进
五、对列表应用样式和创建导航条
1、list-style-image 项目符号
2、cursor 鼠标光标
3、:before :after伪选择器 content属性
六、对表单和数据表格应用样式
1、<caption> 表格的标题 summary：属性，表格标签，用来描述表格内容
2、<thead>所有列标题 <tfoot><tbody>
前两个在一个表格中只能各使用一次，但后一个可以使用多次，且如果使用了前两个，后一个必须出现一次
3、<th>行标题、列标题 <td>既是内容又是数据
<thead>
<tr>
<th>one</th>
<th>two</th>
</tr>
</thead>4、<colgroup><col>对一个或多个列定义和分组
5、boder-collapse:collapse/seperate
6、<fieldset>对相关的信息块进行分组 <legend>fieldset的标题
7、<lable>有意义的描述性标签
8、将标签与表单控件关联起来：
隐式：把表单元素嵌套在lable元素中
<lable>email<input name="email" type="text"/><lable>显示：把lable的for属性设置为相关联的表单元素的id名称
<lable for="email">email<lable>
<input name="email" id="email" type="text"/>