日期:2014-05-17  浏览次数:20681 次

8个小方法,css使用中的八个诀窍

1. 使用line-height(行高)垂直居中

line-height:24px;

对于拥有确定高度的元素,使用line-height可以将其内部元素垂直居中。PS. 原来的做法 valign 是一个不正确的做法。

2. 防止确定宽度的浮动元素布局被其内部超宽的元素破坏

#main{
overflow:hidden;
}

对于拥有确定宽度的浮动(float)元素,如果内部有一个超宽元素(比如一个很宽的图片),那你精心设计的布局可能就无法正常显示,最简单有效的防止手段就是 overflow:hidden;
虽然会隐藏掉一部分元素,但最大限度保证了整体布局的正确。

3. 防止链接换行

a{
white-space:nowrap;
}

很多时候,链接会非常长,如果换行变成2行乃至多行,可能对用户造成误导,建议使用这个方法防止该情况。(我本人到觉得要根据具体情况分析)

?

4. 始终显示Firefox的垂直滚动条

html{
overflow:-moz-scrollbars-vertical;
}

Firefox默认是不显示垂直滚动条的,为了避免滚动条在有和无之间切换,建议使用该方法强制显示。(还真没意识到这个问题:-))

5. 块级(block)元素水平居中

margin:0 auto;

这个基本是处理水平居中的最简单方法了。(CSS mastery?中提供了另外几种方法,不过这个是我最喜欢的)

6. 去除IE中textarea的垂直滚动条

textarea{
overflow:auto;
}

如果你和我一样讨厌这个,去掉它。

7. 打印网页时强制换页

h2{
page-break-before:always;
}

这个可以强制打印网页是换页。 (/qiang)

8. 去除链接的虚线框

a:active, a:focus{
outline:none;
}