Web前端: 8个简单和实用的CSS技巧

2012年6月28日星期四

最好的解决方案往往是最简单的，这里列出8个CSS技巧，非常简单，简单到只需要写一行代码，只需要定义一个属性参数。非常适合学习CSS的新手朋友阅读。
1. 使用line-height来达到垂直居中

line-height:24px;

当你有一个固定高度的内容块，你可以通过把line-height和内容块的高度设为相同的数值而达到文本的垂直居中。这里有一个演示.
2. 使用overflow防止内容溢出

#main{

 overflow:hidden;

}

这个应该基本都知道了。可以在限制内容块的宽度的前提下，隐藏那些有可能溢出的文本或图像。虽然会导致一些内容被隐藏，但总比溢出撑开影响页面布局要好。
3。强制在同一行内显示所有文本

a{

 white-space:nowrap;

}

强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。
4. 始终显示firefox垂直滚动条

html{

 overflow:-moz-scrollbars-vertical;

}

Firefox默认是不显示垂直滚动条的，而这个参数设置将能让它始终显示垂直滚动条。
5. 内容居中

margin:0 auto;

这个大家都应该知道了，但是这个设置并不是在所有浏览中都有效。并且，在相同的浏览器中，如果受其它影响，也很可能会失去效果。
6. 移除IE的默认滚动条

textarea{

 overflow:auto;

}

IE默认是显示文本框的垂直滚动条，这个参数将移除这个滚动条，除非输入的内容超过文本框的高度。
7. Force page breaks when printing your document

h2{

 page-break-before:always;

}

这个属性参数可以”始终在对象之前插入页分割符”，主要用于需要打印的页面设置。
8. 移除点击链接时的虚线框

a:active, a:focus{

 outline:none;

}

大家都知道，点击链接时，通常会出现虚线框，影响美观。这个属性设置可以移除点击时的虚线框。不过帕兰之前试用，用于我的WP主题，得到的后果是，确实去除了虚线框，但是在IE内核的浏览器中，用户留言时，姓名居然不能输入中文。不知道是我的编码设置有问题，还是WP的问题。

Web前端