更多:http://www.1x3x.net/blog/web-design/2008/03/8-premium-one-line-css-tips.html
最棒的解决方案往往是最简单的那个,提供8个一句话CSS小诀窍
原文出处:http://cssglobe.com/post/1392/8-premium-one-line-css-tips
版权声明:本文版权归原作者所有 译文仅供国内读者参考
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;
}
(并不总是有效果)