一、a标签
1、a标签的伪类
a：link 鼠标未点击时的状态
a：visited 鼠标点击之后的状态
a：hover 鼠标悬停时的状态
a：active 鼠标激活时的状态（鼠标点击不松手）
div.box表div 标签有一个box类，这个box类的属性之间渲染在页面。而我们现在a标签的伪类a:hover，
样式不会直接渲染在页面上。只有当用户有某种行为时才会触发这的状态。这就是“伪类”。
伪类的权重和类的权重一样。
2、a标签的伪类顺序不能颠倒
我们正确的顺序：
| 1 a:link 2 a:visited 3 a:hover 4 a:active |
爱恨准则：love hate
二、背景
1、background-color（背景色）
2、background-image（背景图）
| 1 background-image:url("images/hai.jpg"); |
3、background-repeat（重复模式）
属性值：
repeat：重复（默认值）
no-repeat：不重复
repeat-x:在水平方向（X轴）重复
repeat-y:在垂直方向（Y轴重复）
4、background-position（背景图片在整个背景图的位置）
l 像素表示法：
background-position：X方向的偏移 Y方向的偏移；
第一个参数：100px 表示背景图的左上角相对于整个背景图的水平方向的偏移量；
第二个参数：150px 表示背景图的左上角相对于整个背景图的垂直方西的偏移量；
精灵图技术：css sprite技术。
我们知道任何一张图片都会发起一次http请求，我们页面有很多小图片或者小图标，都会发起一次http请求，就降低网页的加载速度。这时我们可以把这些小图片或者是小图标放在一张图片，利用宽度和高度以及背景位置得到任意的小图片。这就是我们精灵图技术。
l 单词表示法：
background-postion:X轴 Y轴；
X轴：left right center;
Y轴：top bottom center;
l 百分比表示法
居中：
| 1 background-position:50% 50%; |
5、background-attechment（背景是否固定）
属性值：
scroll：背景跟随页面滚动（默认值）
fixed:背景固定（背景不跟随页面滚动）
复合写法：
| 1 background:lightblue url(images/bg3.jpg) no-repeat center top fixed; |
三、定位
定位：相对定位，绝对定位，固定定位。
脱标：浮动，绝对定位，固定定位。
position:定位
属性值：relative(相对定位) absolute(绝对定位) fixed(固定定位)
3.1 相对定位
position：relative；
相对定位是相对于元素原位置进行的偏移
相对定位没有脱离标准流，原位置保留，新盒子是相对于原位置进行的偏移。
相对定位有4个方向的值可以偏移：
水平：left,right
垂直：top,bottom
3.2 绝对定位
绝对定位脱离标准流，原来的位置让给其他标准流的元素。
绝对定位也是四个方向 偏移：left，right/top,bottom
3.3 不针对祖先元素的参考点
有top参与时，相对于页面的左上角（右上角）偏移。
有bottom参与时相对于首屏的左下角（右下角）
3.4 针对祖先元素的参考元素
参考元素：距离最近且有定位的元素。
3.5 参考顶点
绝对定位的参考顶点是border以内的四个顶点（背景的四个顶点，无视父盒子的padding）
3.6 压盖效果
压盖效果用绝对定位书写（不用浮动）
3.7 绝对定位的元素的水平居中
绝对定位的元素margin:0 auto;失效
3.8 应用
“子绝父相”：子盒子设置绝对定位，父盒子设置为相对定位。（也有子绝父绝，子绝父固）
因为相对定位结构比较固定。作为绝对定位的参考盒子。