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>
大家好！

 

没有display:inline属性，标题与后面的文字是换行的，有这个属性就在同一行上了。

 

b、display:none和visibility:hidden的不同

 

两者的区别在于：display:none完全取消元素的显示，visibility:hidden保持元素位置但视觉上的内容不可见。 例子：

 

<style type="text/css">
h1.see{
    display:none;
    /*visibility:hidden;*/
}
</style>

 

<h1>1-Hello World!</h1>
<h1 class="see">2-Hello World!</h1>
<h1>3-Hello World!</h1>

 

6、CSS选择器优先级

 

a、相同选择器的优先级

 

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