前端开发者学堂 - fedev.cn

13个CSS技巧

#HTML#trick
发布于 大漠

大家说CSS很简单，三下五除二就能把CSS拿下，初学时，我也是这么认为的，也是这样给我很大的信心从事这一行，但后面随着相关知识面的提高，我越来越感觉CSS是蛮深的东西，而且越来越觉得自己掌握的CSS还是很薄弱。从而决心要先把CSS这座山头攻下来。大家平时在Web制作中碰到CSS的问题，总会觉得烦人，其实我个人认为最好的解决方案往往都是最简单的。今天在这篇教程中要和大家一起分享CSS的几种小技巧。

一、使用行高来实现垂直居中

		elm {
			height: 24px;
			line-height: 24px;
		}

当你有一个固定高度的容器时，并且只有单行内容，此时要实现元素的垂直居中，最好的办法就是设置元素的line-height和height相同。如果对于多行大家可以参考本站前面介绍的《CSS制作水平垂直居中对齐》和《CSS制作图片水平垂直居中》两篇有关于元素居中的教程。

二、防止内容溢出破坏布局

		elm {overflow: hidden;}

大家在平时的Web制作中肯定有碰到这样的问题：当超大的内容（比如说图片）放在一个固定了宽度的浮动容器内，它可能会破坏你原本的布局。解决这样的Bug大家肯定都想起了“overflow:hidden”。其实是这样，我们可以使用这种技巧将溢出的内容隐藏起来，虽然有部分内容好像被裁切了一样，但最起码你的布局将是保持完整的，不变的。我在《浏览器兼容之旅的第三站:IE常见Bug——part1》将此列入为IE的bug中。

三、防止链接内容换行

		a {
			white-space: nowrap;
			work-break: keep-all;
		}

这种技巧是有来防止您的链接内容换行，其实也不只运用于链接中，当你需要元素不换行时，你就可以使用这种技巧。当然这种方法是实现强制作不换行，我在前面的《CSS3 Word-wrap》介绍了自动换行的使用。

四、始终在Firefox下显示滚动条

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

在Firefox浏览器中，它会隐藏默认的垂直滚动条，所以会出现你浏览一个网站时，有不同页面高度的时候， 会有一个水平移位。这种方法就可以始终显示垂直滚动条，防止前在所说的移位问题的出现。

五、块元素的水平居中

		elm {
			width: 元素宽度；
			margin: 0 auto;
		}

在现代浏览器中完全可以使用这个方法来实现水平居中问题，但前提条件下是此元素需要一个显式的宽度设置，才会有效果的。

六、移除IE下textarea的垂直滚动条

		textarea {
			overflow: auto;
		}

大家都知道“textarea”文本区域在IE浏览器中默认会有垂直滚动条显示出来的。如果你不想让它有这个东东出来，你就只需要像上面那样设置就OK了。

七、打印文档时强制分页符

		h2 {page-break-before:always;}

使用上面那行简短的段码就能帮你实现你想在打印页面时在你想要的地方强制分页。

八、删除链接的外边框

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

你只需要设置上面的代码，在你的链接中就可以不显示“active”和“focus”状态下的外边框，当然你也可以按类似的方法设置你需要的样式。

九、取消textarea在浏览器下的自由伸展

		textarea {resize:none;}

在 Firefox和webkit内核心的浏览器中textarea有一个功能，就是用户可以自己控制textarea的大小，如果你想取消这样的功能，你只要在代码中加入上面的代码就搞定了。

十、取消浏览器字号限制

		html {
			-ms-text-size-adjust: 100%; 
	    -webkit-text-size-adjust: 100%; 			
		}

不知道大家在平时的制作中是否有发现，当你字体设置过于太小时，在手持设备或webkit中的google chrome都会有怪异的事情发生，据说在chrome下不会解析12px以下字体（未经考验），使用上面的代码就能解决这样的问题，你也不防试试看。

十一、隐藏浏览器横向滚动条

		html {
			overflow-x: hidden;
		}

有时你想在浏览器中不显示横向的滚动条，在body中使用“overflow-x:hidden”将无任何效果，那么你不防像上面一样，将其写到html中，你会得到你想要的效果。

十二、解决IE下图片缩放和底部3px的问题

		img {
			vertical-align: top;
			-ms-interpolation-mode: bicubic;
		}

在运用img时，常常会碰到图片底产无缘无故多出3px，如果你想解决这样的麻烦，你只需要在“img”中设置一个“vertical-align:top”;另外一个问题是图片缩放产生一个不清楚的图片，具体解决主法，大家可以参考《浏览器兼容之旅的第四站:IE常见Bug——part2》一文。

十三、防止IE6下的振动

		* html,
		* html body{
				background-image:url(about:blank);
				background-attachment:fixed;
		}

这种小技巧是用来防止IE6浏览器下的振动问题，大家在使用position:fixed时，我们采用“:expression”方法来处理其在IE6下兼容问题时，常常会给我们带来这个振动问题，你只需要加上上面的代码，他就不会在振动了。具体也可以参考《浏览器兼容之旅的第五站:IE常见Bug——part3》一文中的介绍。

上面所收集的十三种有关于CSS的小技巧，大家或许有一些碰到过并且使用过了，但有一些不太常见，又能帮你解决大问题的技巧，还是要记住一下。还是那句话，秀备无患。希望大家喜欢这篇文章，如果你有更好的小技巧，记得与我们大家一起分享哟，你可以直接在下面的评论中给我留言，或者留下您的宝贵经验。我们都会感谢您！

如需转载烦请注明出处：W3CPLUS

Air Jordan III 3 Shoes