CSS常用小技巧

来自：http://my.oschina.net/peengtao123/blog/106554

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

elm {
height: 24px;
line-height: 24px;
}
当你有一个固定高度的容器时，并且只有单行内容，此时要实现元素的垂直居中，最好的办法就是设置元素的line-height和height相同。

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

elm {overflow: hidden;}

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

三、防止链接内容换行

a {
white-space: nowrap;
work-break: keep-all;
}
这种技巧是有来防止您的链接内容换行，其实也不只运用于链接中，当你需要元素不换行时，你就可以使用这种技巧。

四、始终在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”;

十三、防止IE6下的振动

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

这种小技巧是用来防止IE6浏览器下的振动问题，大家在使用position:fixed时，我们采用“:expression”方法来处理其在IE6下兼容问题时，常常会给我们带来这个振动问题，你只需要加上上面的代码，他就不会在振动了。