css（知识点）

一、选择器

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"/>

9、<em><strong> 可以用来显示提示信息