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 class="outer">
    <div class="inner1"></div>
    <div class="inner2"></div>
    <div class="inner3"></div>
</div>

?

.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 class="snowman" href="#">百度</a>
<a href="#">谷歌</a>

?

5、display属性

?

a、display:inline可以让HTML元素与其前后display值不是block的元素（标题和段落元素都是block元素）在同一行。 例如：

?

<style type="text/css">
h1.see{
    display:inline;
}
</style>

?

<h1 class="see">Hello World!</h1>
大家好！

<