字体
font-family就是字体，如果用户电脑里面没有这个字体，那么就会变成宋体。页面中，我们只使用微软雅黑，宋体，黑体，如果页面中需要其他的字体，那么需要切图。
font-family: "Arial", "宋体";
我们需要先将英文字体写在前面，否则英文字体会出错。
行高可以用百分比。
font: 12px/200% "宋体";等价于font: 12px/24px "宋体";
伪类
同一个标签，根据用户的某种状态不同，有不同的样式，这就叫做“伪类”。伪类用冒号来表示，a标签有4个伪类：
a:link {
color: red;
}
a:visited {
color: orange;
}
a:hover {
color: green;
}
a:active {
color: black;
}:link表示用户没有点击过这个链接的样式，:visited表示用户访问过这个链接的样式，:hover表示鼠标悬停的时候链接的样式，:active表示用户点击这个链接但是不松手的样式。
这四种状态在css中必须按照固定顺序写，如果不按照顺序，那么将失效。“爱恨准则”link，visited，hover，active（love，hate）。
.nav ul li a {
display: block;
width: 120px;
height: 40px;
}
.nav ul li a:link, .nav ul li a:visited{
text-decoration: none;
color: white;
background-color: green ;
}
.nav ul li a:hover {
background-color: red;
font-weight: bold;
color: purple;
}a标签在使用的时候，我们一定要将a标签写在前面，伪类写在后面。a标签中，描述盒子：伪类中描述文字的样式、背景。（如上）
记住，所有的a都不继承text、font这类东西，因为a有自己的伪类的权重。
background属性
- 用英语单词表示
- 用rgb三原色表示, rgb(255, 0, 0)
- 十六进制表示法
background-img属性
url()提供背景图的地址。
用途：
- 大背景图居中
- 通栏banner
background-attachment
背景图固定，内容可以滚动。
综合起来：
background: red url(1.jpg) no-repeat 100px 100px fixed等价于：
background-color: red;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: 100px 100px;
background-attachment: fixed;相对定位
相对定位就是相对自己原来的位置进行移动，也就是说，相对定位就是微调元素位置的，让元素相对自己原来的位置进行定位。
position: relative;
left: 100px;
top: 150px;先声明相对定位，然后调整位置。
相对定位不脱标，如图，第三章图片没有顶上去。
不脱标，老家留坑，形影分离
相对定位的用途
- 微调元素
- 绝对定位的参考，子绝父相
微调button的位置和input输入框对齐：
<style type="text/css">
.txt {
font-size: 20px;
}
.btn {
position: relative;
top: -1px;
left: 0;
}
</style>
</head>
<body>
<p>
<input type="text" class="txt" />
<input type="button" value="我是一个小按钮" class="btn" />
</p>绝对定位
绝对定位是脱标的，所示绝对定位后的元素，就可以设置宽高了。
绝对定位的参考点：
- top，使用top定位时，绝对定位的参考点是文档的左上角，而不是浏览器窗口的左上角。
- bottom，使用bottom定位时，参考点是浏览器首屏（记住是首屏幕，也不是浏览器窗口）的左下角！而不是文档的左下角。
以盒子为参考点
一个绝对定位的元素，如果父辈元素中出现了也定位了的元素，那么将以父辈的这个元素为参考点。
1.子绝父相
<div class="box1">
<div class="box2">
<div class="box3">
<p></p>
</div>
</div>
</div>如果box1相对定位，box2也相对定位，p绝对定位，那么将以最近的box1为参考点。
不一定是相对定位，任何定位都可以作为参考点
2.子绝父绝
3.子绝父固
工程商，子绝父相有意义，父亲没有脱标，儿子脱标在父亲的宽度范围内移动。
绝对定位的儿子，无视父亲的padding，直接视border内侧为参考点
固定定位
就是相对浏览器窗口定位，页面如何滚动，这个盒子显示地位置不变。
position: fixed;
z-index值
- z-index值表示谁压着谁，数值大的压着数值小的。
- 只有定位了的元素，才有z-index值。也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index值，而浮动的东西不能用。
- z-index值没有单位，就是一个正整数，默认的z-index值是0。
- 如果大家都没有z-index值，或者z-index值一样，那么水写在HTML后面，谁在上面压着别人。
- 从父现象，父亲的z-index怂了，儿子再牛逼也没用
.box1 {
width: 200px;
height: 200px;
background-color: yellowgreen;
position: absolute;
top: 100px;
left: 100px;
z-index: 988;
}
.box2 {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
top: 180px;
left: 180px;
z-index: 444;
}如图：
本来后面的生效，由于第一个box的z-index值大，所以第一个压住第二个。
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
