8个简单和实用的CSS技巧

最好的解决方案往往是最简单的,这里列出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的问题。

原文:8 Premium One Line Css Tips
翻译: 帕兰

“8个简单和实用的CSS技巧”的一个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注