1、设置css样式的两种方式：
1、内联样式：写在标签的style元素里面：
eg:<p style=”color:red;font-size:20px”>这是一只猫咪</p>
2、内联样式表：写在head标签中，可以应用到所有的标记的段落中
eg:<head>
<style type=”text/css”>
P{
color:red;
font-size:20px;
}
</style>.
</head>
3、外联样式表：把样式表编写在外部的css文件中，然后通过link标签来将外部的css文件导入到当前页面中。
eg:<head>
<link rel=”stylesheet” type=”text/css” href=”路径” />
</head>
样式表可以有很多个，多个link链接时，下面的链接会覆盖上面的，因此顺序很重要
2、常用选择器
1、元素选择器
作用：选择页面中所有的指定元素。
语法：标签名{ }
2、id选择器
作用：通过元素的id属性值选择唯一的一个元素。
语法：#id的属性值{}
3、类选择器
作用：通过class属性选一组元素，class属性与id元素类似，但是class属性可以重复，拥有相同class属性的元素是一组元素。一个元素可以有多个class属性值，属性值之间用空格。Eg:class=”a b p2”
语法：.class的属性值{ }
4、选择器分组（并集选择器）
作用：同时选中多个选择器对应的元素。
语法：选择器1，选择器2，……选择器n{ }
5、通配选择器
作用：选择页面中的所有元素。
语法：*{ }
6、交集选择器（复合选择器）
作用：可以选中同时满足多个选择器的元素。
语法：选择器1选择权……选择器n{ }
7、子元素选择器
作用：选中指定父元素的直接子元素。
语法：父元素>子元素{ }
8、后代选择器
作用：选中指定元素的指定后代。
语法：祖先元素 后代元素{ }
3、伪类选择器
专门用来表示元素的一种特殊的状态，为处在特殊状态的元素设置样式。
（1）a:link 表示普通的链接，即未曾访问过的链接。
（2）a:visited 表示访问过链接。只可以设置字体颜色。
（3）a:hover 表示鼠标移入的状态，即移入后鼠标编程任何一个状态。也可以给a以外的其他元素设置
（4）a:active 表示超链接被点击的状态。也可以对a元素外的元素设置
4、选择器的优先级
一般情况下，各种选择器的权重为：
内联样式表1000
Id选择器：100
类选择器和伪类选择器：10
元素选择器：1
通配选择器：0
继承的样式没有优先级
行内>内联>外部，内联和外部取决于加载的顺序，外部样式表可以放在head标签也可以放在body的最底部，因此取决于加载的顺序
伪类选择器的优先级
a:link a:visited a:hover a:active的优先级一样，前两个顺序可以颠倒，但是a:hover表示鼠标移入的状态，a:active表示被点击的状态，点击时必须要移入，所以这两个设置样式时a:hover必须在a:active的前面, a:link a:visited必须在a:hover a:active的前面。
5、三大定位和层级关系
定位position，可选值有static（不开启定位）absolute（绝对定位）relative（相对定位），fixed（固定定位）。当position的值不是static时可以通过top bottom left right来设置偏移量。
绝对定位：
1、元素会脱离文档流。
2、不设置偏移量则位置不会改变。
3、绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的，如果祖先元素都没有，则是相对于浏览器窗口定位。
4、会使元素提升一个层次。
5、会改变元素性质，块元素宽度和高度都默认被撑开，内联元素变成块元素。
相对定位：
1、元素不会脱离文档流。
2、不设置偏移量则位置不会改变。
3、相对定位是相对于元素未脱离文档流的位置进行定位。
4、会使元素提升一个层次。
5、不会改变元素性质。
固定定位：
与绝对定位唯一不同，永远相对于浏览器定位的，且会固定在某个位置，不会随着浏览器的滚动条消失。
层级
（1）开启定位后，下面的元素会覆盖上面的
（2）可以通过z-index来设置层级，格式为z-index:数字；1最小，未设置层级的比1小
（3）父元素的层级最高，子元素层级再高也不能超越父元素。
6、解决高度塌陷问题
1、使用overflow:hidden来消除，如果是IE6浏览器，则使用zoom:1。
2、使用clear清除元素浮动造成的影响，可选值有none：不清除浮动。Left：清除左侧元素浮动的影响。Right：清除右侧元素浮动的影响。Both：清除两侧浮动中影响较大的一侧浮动。
3489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
