最棒的解决方案往往是最简单的那个，提供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;
}

（并不总是有效果）

  

相关日志：

• 最常用的CSS小把戏(Most used CSS tricks)
• Microsoft IE8 CSS3扩展支持
• CSS Float 基本概念汇总
• IE8 beta2重装上阵 无法忽视的雷蒙德巨头
• 使用CSS滑动门技术编写一个灵活的Tab页

Filed under: 绾青丝 - WebDesign, css, tips | 433次浏览