CSS提升复习记录
过节后工作不算太紧张，偷空找了篇CSS教程看了遍，孔老夫子说的不错，“温故而知新”。现在就将新学到的东东记录下吧。
?
1、文本样式：
?
a、em单位
?
em单位表示默认字体的倍数。比如：0.8em指是默认字体大小的0.8倍。
?
b、段落格式
?
1）段首缩进
?
段首缩进不要用空格这样笨拙的方法，使用段落的text-indent属性，假设字体大小为12px，那么text-index的值设为24px即可实现缩进两个汉字效果：
?
p{ font-size:12px; text-indent:24px;}?
2）文字间隔
?
使用letter-spacing或word-spacing（只对英文字母有效）属性，值可以是长度值(包括字体倍数的em单位)或normal：
?
p{ letter-spacing:1em;}?
3）行间距
?
使用line-height属性，值可以是长度值(包括字体倍数的em单位)或normal：
?
p{ line-height:1.5em;}?
c、文本转化（针对英文字母）
?
使用text-transform属性，值可以是capitalize （让每个单词的首字母大写）、uppercase （所有字母大写）、lowercase（所有字母小写）、none（不进行转化）：
?
p{ text-transform: capitalize;}?
2、CSS盒模型
?
a、IE6中box左右的margin加倍的问题
?
当box设置了float属性后，在IE中它左右的margin值将加倍，例如：
?
.inner{ width:200px; height:100px; margin:5px; float:left; background-color:red;}?在IE中明显看到上面的例子中box左右的间隔大于5px，解决方法是在css中加入display:inline;属性：
?
.inner{ width:200px; height:100px; margin:5px; float:left; background-color:red; display:inline;}?b、外层box高度自动计算的问题
?
经过多次测试，发现在box嵌套，并且外边的box的高度没有明确指定值时，各个浏览器的显示结果差别较大。
?
里面的box没有float属性时：
?
IE6、IE7能够正确计算出外边的box的高度，IE8、firefox能够计算外边的box的高度，但是不准确。
?
里面的box有float属性时：
?
IE6、IE7能够计算出外边的box的高度，但是不准确，IE8、firefox不能够计算外边的box的高度。
?
解决的最佳方式：
?
在里面box最后再加一个包含clear:both属性的box，且在外边的box里添加overflow:auto属性。例如：
?
<div name="code">.outer{ width:500px; background-color:#000; overflow:auto;}.inner1{ width:200px; height:100px; margin:5px; background-color:red;}.inner2{ width:200px; height:100px; margin:5px; background-color:yellow;}.inner3{ clear:both;}?c、box居中问题
?
实现box横向居中发方法：
?
#wrap?{? width:760px; margin:0?auto;?} ?
但是这个方法在IE5中是无效的（如果考虑IE5的话），解决方法是：在box外边的容器中加入
?
text-align:center;
?
3、p.txt 和p .txt选择器的不同
?
p.txt? 是指class为txt的p元素
p .txt? 是指p元素下的class为txt的元素
?
4、Pseudo Classes 伪类
?
注：一些伪类并不是被所有的浏览器支持，但是超链接的四个伪类（link、visited、active、hover）是被所有浏览器支持的，可以安全使用。
?
<style type="text/css">a.snowman:link{ color:blue;}a.snowman:visited{ color:purple;}a.snowman:active{ color:red;}a.snowman:hover{ text-decoration:none; color:blue; background-color:yellow;}</style>?
<a href="#">百度</a><a href="#">谷歌</a>
?
5、display属性
?
a、display:inline可以让HTML元素与其前后display值不是block的元素（标题和段落元素都是block元素）在同一行。例如：
?
<style type="text/css">h1.see{ display:inline;}</style>?
<h1 name="code"><style type="text/css">h1.see{ display:none; /*visibility:hidden;*/}</style>?
<h1>1-Hello World!</h1><h1 name="code">p { color: red; }p { color: blue; }?
结果：p元素下元素颜色是蓝色。遵循后面原则。
?
b、嵌套选择器优先级
?
一组嵌套选择器的优先级是可以计算出来的。
?
div p { color: red; }p { color: blue; }?
结果：p元素下元素颜色是红色。原则：ID选择器的值是100，class选择器的值是10，html选择器值是1。
?
所以，上面两个选择器的优先级分别是：11、1，所有是红色。
?
例如：
?
div p.tree
?
优先级的值是：1+1+10 = 12
?