CSS（层叠样式表）是一种表现网页格式与外观的非常棒的计算机语言，CSS在网页设计过程中总是扮演着一个重要的角色，总是能够给您机会去使得您的网站对用户更加友好。CSS学习起来跟其他语言一样，并不是十分难，不过，仍然有许多人在利用它来处理一些特定问题的时候因为需要特定的解决方案，所以也会遇到困难。可喜的是，我们中间已经有人懂得如何去解决这些问题了，对此，本文算是一个总结，总结40多个人们在使用CSS过程中曾经遇到过的问题的解决方法、技巧（大多数都是跨浏览器兼容的），它们之中有些可能您已经很熟悉，但有些您可能还没有见过；有些属于初级技巧，而有些则属于高级技巧。它们对您来说，无论是属于哪种情况，我认为都是非常实用的、值得用的、值得收藏的。
如果您对CSS代码比较生疏，请通过以下两条链接访问维基百科和W3C来作深入和详细了解：
01. 水平居中
要在CSS中让块级元素水平居中，您需要做三件事情：设定元素宽度为一个固定值、设定元素左右外边距为auto、包含一个正确的doctype声明 。
div#page {
width: 960px;
margin: 0 auto
}
上面的代码会将包含有一个ID为page的div按水平方向居中显示。
02. 文本垂直居中
如果您想让一个固定高度容器内的文本按垂直方向居中，只需要将行高（line-height ）和容器高度设定为同样高即可。
HTML:
<div id="container">some text here</div>
CSS:
div#container {
height: 35px;
line-height: 35px
}
03. Div垂直居中
详细可参考这一篇 vertically center block level elements.
HTML:
<div id="content">your content here</div>
CSS:
div#content {
position: absolute;
top: 50%;
height: 500px;
margin-top: -250px
}
从以上代码可知，div容器固定高度为500px，要让它垂直居中，得先将div容器左上角沿y轴向下移50% ；再将容器的上外边距（margin-top）设定为其本身高度的一半，也就是上移250个px，这样整个div容器就垂直居中了。
按照同样的道理，我们也可以将容器设定为同时在水平和垂直方向上居中，先将left和top设定为50%来定位div到浏览器中央，再将margin-left和margin-top值设定为宽和高的一半，使div居中显示，如下面的代码：
div#content {
position: absolute;
top: 50%;
left:50%;
width:800px;
height: 500px;
margin-left: -400px;
margin-top: -250px
}
04. 自适应图片宽度
设定图片自适应宽度，一般情况下，只需将其最大宽度max-width的值定为100% 即可，但IE6却不支持max-width属性，所以我们只能另外为IE6添加一个条件标签以使其兼容图片的自适应，如下：
img {max-width: 100%}
/* IE 6 hack */
<!--[if IE 6]>
img {width: 100%}
<![endif]-->
05. 纯CSS的3D 按钮
要想让按钮具有3D效果，可以将它的左上部边框设为浅色，右下部边框设为深色即可。
div#button {
background: #888;
border: 1px solid;
border-color: #999 #777 #777 #999;
}
06. CSS Font 简写
要使用 CSS Font 简写 ，您需要按照以下顺序设定每个属性值：
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
font-variant: small-caps;
font-style: italic;
line-height: 150%;
}
/* 可以缩写成以下这种方式 */
body {
font: font-style font-variant font-weight font-size/line-height font-family;
}
您不必每个属性值都得填写，但您应该明白不填写即意味着取默认值。
07. 为一个HTML 元素设定多个class类别名
如果您想为一个HTML元素设定多个class类别，而每个class类别的值都不一样，记忆起来可能并不那么容易，如:
<div class="class-1 class-2 class-3">content </div>
每个class类别名都位于同一对双引号之内 ，而根据CSS优先级特性，浏览器对各个class类别的解释是分先后顺序的，也就是会先解释class-1。
例如，您给HTML中的每个class类别分别取值为：
class-2 {color: blue}
class-3 {color: green}
class-1 {color: red}
那么，上面那对div中的文本颜色会显示为red，也就是说，出现在HTML中的class类别是不分次序的。
08. CSS3圆角的实现
如果所有的浏览器都支持CSS3，那么圆角的实现就会变得相当简单：
.element {border-radius: 5px}
这句代码设定了元素的四个角度都是5px。不过，在CSS3还没全面普及之前，我们要在Safari、Chrome等以webkit为核心的浏览器中使用 -webkit-border-radius 属性，而在Firefox之类基于Mozilla 的浏览器中则使用 -moz-border-radius 属性来实现圆角。
/* Safari, Chrome */
.element {
border-radius: 5px
-webkit-border-radius: 5px
-moz-border-radius: 5px
}
/* Firefox */
.element {
border-top-left-radius: 5px
-webkit-border-top-left-radius: 5px
-moz-border-radius-top-left
}
至于其他的浏览器，我们也可以使用JQuery 插件来实现圆角。
$(".element").corner("5px");
09. Link链接状态设定顺序
a:link a:visited a:hover a:active
我们可以简单记忆成：LoVe HAte. LVHA – Link, Visited, Hover, Active.
10. Clearing and Containing Floats——清除浮动和浮动
有两种方法可以设定CSS浮动. 第一种是使用 clear 属性。
例子：
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
在以上html中，我们设定content 和 sidebar这两个 div 都向左浮动，而想要 footer 这个div 固定在它们的下方，可以这样设定clear属性值：
#content {float: left}
#sidebar {float: left}
#footer {clear: both}
我们也可以使用clear: left 或 clear: right 来设定 content 和 sidebar 的浮动方向。
再举个例子，下面是html:
<div id="header">
<img id="logo" src="" alt="">
<p id="tagline"> </p>
</div>
如果同时给logo 和 tagline都设定浮动，header 这个div就会崩溃，高度就会变成零。为了避免这种现象出现，我们可以使用一个空的div (如<div class="clear"></div>)，或者我们也可以在header div中使用overflow属性值：
div#header {overflow: hidden}
这样，即使header div中包含有浮动元素也不会崩溃了。
11.Conditional comments——条件注释
条件注释 是针对IE 浏览器进行Hack的有效方法，基本形式如下：
<!--[if IE]> <link rel="stylesheet" type="text/css" href="ie-stylesheet.css" /> < ![endif]-->
如果访问此页面的浏览器为IE浏览器，则只加载针对IE的样式表ie-stylesheet.css文件。我们还可以分别针对指定的IE浏览器版本进行Hack：
<!--[if IE 6]> - targets IE6 only --> <!--[if gt IE 6]> - targets IE7 and above --> <!--[if lt IE 6]> - targets IE5.5 and below --> <!--[if gte IE 6]> - targets IE6 and above --> <!--[if lte IE 6]> - targets IE6 and below -->
12.针对IE 的HTML Hack
在您的CSS 代码中放置一个*html ，除了IE之外的其它浏览器都将忽略它所在的这一句CSS声明，如：
div#content {width: 580px}
* html body div#content {width: 600px}
这两条代码的意思是，如果是IE6或以下浏览器，content的宽度将显示为600px，而其他浏览器则始终显示为580px。
下面是针对IE7所作设定：
*+html body div#content {width: 620px}
13. CSS优先级
CSS优先级，是指CSS样式在浏览器中被解析的先后顺序。基本规则是：行内样式 > id样式 > class样式 > 标签名样式。当两个或两个以上CSS选择器对一个html元素发出冲突指令时，对于浏览器的解析就存在一个先后顺序（权重）的选择，这其中包含着一定的规则，下面以a、b、c、d的形式来表示这种优先级别的顺序（a的优先级别最大，也可以从后面的数字看出来）：
Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
下面的例子表示，越往后面其优先级别就越高：
p: 1 element – (0,0,0,1)
div: 1 element – (0,0,0,1)
#sidebar: 1 id – (0,1,0,0)
div#sidebar: 1 element, 1 id – (0,1,0,1)
div#sidebar p: 2 elements, 1 id – (0,1,0,2)
div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)
14. IE6不支持min-height的解决办法
我们可以通过以下两种方法来进行修正。
方法一:
.element {
min-height: 500px;
height: auto !important;
height: 500px;
}
方法二:
.element {
min-height: 500px
_height: 500px /* _ 只有IE6才会读取 */
}
15. Font-Size基准
/* 假设浏览器的默认的大小是16px，首先将其设置为10px (font-size:10/16) */
body {font-size:10/16;}
/* 然后就可以用em做统一字体单位了 2.4em = 24px */
h1 {font-size: 2.4 em}
16. 100% Height——百分百高度
100% height 是CSS 较难应付的问题之一。我们可以设定最外层容器的高度为100%：
html, body {
height: 100%;
}
为防止内容撑破页面，可为其设定最小高度：
#content {min-height: 100%}
对于IE，我们可以使用上面第14点的方法解决。
17. CSS Drop Caps——首字符下沉
利用CSS伪元素:first-letter 比较容易实现首字符下沉：
p:first-letter {
display: block;
float: left;
margin: 5px 5px 0 0;
color: red
font-size: 1.4em;
background: #ddd;
font-family: Helvetica;
}
所有的主流浏览器都支持:first-letter伪元素 。CSS3 还使用了::first-letter 表示法，以区分伪元素和伪类，不过与IE不兼容。
18. Remove Dotted Outline on Links——去除链接外部的虚线轮廓
a {
outline: none
}
或
a {
outline: 0
}
19. Text-transform——字母大小写转换
p {text-transform: uppercase} /* 全部大写 */
p {text-transform: lowercase} /* 全部小写 */
p {text-transform: capitalize} /* 首字母大写 */
20. Font Variant
针对英文有效的小型大写字体。
p {font-variant: small-caps}
21. 去除带链接的图片边框
默认情况下，带链接的图片都有一条边框，就像文本链接的下划线一样，去除方法很简单：
a image {border: none}
或
a image {border: 0}
22. 针对浏览器兼容性问题的CSS重置
CSS重置，就是重置浏览器的CSS默认属性。在网页开发过程中，浏览器兼容性一直是个问题，就拿CSS来说，不同的浏览器都使用不一样的默认的CSS属性值。比如<button>标签，在IE浏览器、Firefox浏览器以及Safari浏览器中的样式都是不同的，所以，通过重置button标签的CSS属性，然后再将它统一定义，就可以产生相同的显示效果。
最简单的CSS Reset：
* { padding: 0; margin: 0; border: 0; }?
也有内容更多的，比如YUI的CSS Reset内容：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border: 0;
}
还有国外名人Eric Meyer的CSS Reset内容：
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
rder: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
ackground: transparent;
}
body { line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before,blockquote:after, q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
23. 设定背景图片的Padding
我们无法直接对背景图片设定padding，但可以通过为 background-position 属性设定合适的数值来实现同样的效果，如：
/* background-position {top-value left-value} */
{background-position: 5px 5px}
提示：padding 就是内容与边框的间距，而margin 则是模块与模块之间的间距。
24. 背景图片定位
当然，定位背景图的前提是先指定background-image 属性，然后可以使用background-position属性来调整背景图的位置，默认值为：0% 0% 。此时背景图片将被定位于对象不包括补丁( padding )的内容区域的左上角。如果只指定了一个值，该值将用于横坐标；纵坐标将默认为 50% 。如果指定了两个值，第二个值将用于纵坐标。
{background-position: 50% 50%}
这句代码将使图片位于容器的中心。
25. 为背景图片加上链接
我们无法直接给一张背景图片添加链接，但可以通过给它所在容器中的内容添加链接来达到相同的效果。
<a href=""> <div id="bkgd-image"> your content here </div> </a> <div> <a href=""> your content here </a> </div>
26. 使用背景图片作为列表标志
默认情况下，浏览器是使用一个黑圆圈作为列表标志，我们可以用图片取代它：
ul {list-style: none}
ul li {
background-image: url("dot.png");
background-repeat: none;
background-position: 0 0.5em;
}
27. 鼠标划过时更换背景图片
有两种类似的方法可以实现这种效果，两者关键之处都是在于使用了hover伪类。
方法一，更换图片
.element {background-image: url("path-to-an-image")}
.element:hover {background-image: url("path-to-a-different-image")}
方法二，更换图片位置
.element {background-position: top-value left-value}
.element:hover {background-position: different-top-value different-left-value}
不幸的是，IE只支持链接的hover效果，不过，我们也有解决的办法，请看这一篇： suckerfish system
28. Visibility 或 Display?
从表面上看，CSS visibility 和 display 属性好像并没有多大差别，都是用来隐藏或显示网页元素的，而实际上并不一样。
{visibility: hidden}– 元素被隐藏起来了，但还会占用一个位置{display: none}– 元素不可见，但不会占用位置，这个位置被其他元素占去了
我们一般情况下只会使用display: none，除非您故意要在图片原来的位置上留出一块空白。
29. CSS透明属性
并不是所有的浏览器都支持 CSS3透明属性，但我们也有办法让它们支持。
.transparent_class {
opacity: 0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
}
分析：
- opacity是CSS透明的标准属性，取值范围在0-1之间，目前支持的浏览器有：Firefox、Chrome、Opera、Safari。（也就是说，除了IE，它支持所有主流浏览器）；
- filter:alpha(opacity=50);是专门给IE设定的属性，取值的范围在0-100之间；
- -moz-opacity是为了兼容一些老版本的Mozilla浏览器，取值范围在0-1之间；
- -khtml-opacity是为了兼容一些老版本的Safari浏览器，取值范围在0-1之间。
30. 非常条件注释针对IE7或IE6的HACK
我们都知道，提到CSS，有时候IE就会让我们头痛。不过，与其一味地在那里诅咒IE，不如给它来段特殊点的代码，让它实现我们想要的效果，那也并不是一件难事。按照我自己的做法，就是添加条件注释，但我们也可以不用条件注释，如下面的例子：
.element {
background: red; /* modern browsers */
*background: green; /* IE 7 and below */
_background: blue; /* IE6 exclusively */
}
31. nth-child
nth-child 这个CSS 伪类选择器允许您在一组元素列表中选择第三、第七或第n个元素。看下面的例子:
ul li:nth-child(3) {
background: blue
}
上面这段代码会选择列表中的第3个项目并加以蓝色背景。
ul li:nth-child(3n+3) {
background: blue
}
这段代码会选择列表中的第3、6、9项并加以蓝色背景。
nth-child的学问很多，目前IE是不支持的，不过，我们也可以让IE7和IE8仿效上面的第一点实现同样的效果，参考这一篇。
ul > li:nth-child(3) is the same as ul > *:first-child + * + *
32. CSS 基本型2栏布局(固定宽度，居中，header、footer、sidebar居右)
HTML:
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="sidebar">
</div> <div id="footer">
</div>
</div>
CSS:
#wrapper {width:960px; margin:0 auto}
#content {float:left; width:600px}
#sidebar {float:left; width:360px}
#footer {clear: both}
33. CSS 基本型3栏布局(固定宽度，居中，header、footer、sidebars居右，content居左)
HTML:
<div id="wrapper"> <div id="header">
</div>
<div id="primary">
</div>
<div id="content">
</div>
<div id="secondary">
</div>
<div id="footer">
</div>
</div>
CSS:
#wrapper {width:960px; margin:0 auto}
#primary {float:left; width:230px}
#content {float:left; width:500px}
#secondary {float:left; width:230px}
#footer {clear: both}
34. CSS 三角或其他形状
使用CSS生成一个三角形，最简单的方法是，将四个边框的其中三个边框设为透明，剩下一个，即可以生成一个三角形。这里提供一个详细教程：create some interesting shapes.
HTML:
<div class="triangle"></div>
CSS:
.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
35. 禁止自动换行
h1 { white-space:nowrap; }
36. Class和ID的区别
ID一般用来定义页面中比较大的样式，比如栏目划分，顶部，正文，底部等，用#top的形式来定义；class一般用来定义一些比较细节的样式，如具体的一个菜单，一行文字等，用.text的形式来定义。另外，定义HTML中的标签，如ul、img、p等时，直接写：img{}的形式。
ID在同一文档中只能使用一次。
HTML:
<div id="content"></div>
CSS:
#content {background: #fff}
class在同一文档中可以使用多次。
HTML:
<p class="large-text"> </p>
CSS:
.large-text {font-size: 1.4em}
37. 使用图片替换文本
我们不是直接去掉文本，为了利于SEO，只需给文本加上一个text-indent属性即可。
h1 {
text-indent:-9999px;
background:url("h1-image.jpg") no-repeat;
width:200px;
height:50px;
}
height 和width 的值需要跟您的图片大小相匹配
38. 突出显示焦点元素
input:focus { border: 2px solid green; }
39.认识 !important
多条CSS语句冲突时，具有!important的语句将覆盖其他语句。但是，由于IE不支持!important，因此，也可以利用它区分不同的浏览器。
/* IE 显示蓝色标题，其他浏览器显示红色标题 */
h1 {
color: red !important;
color: blue;
}
40. 为图片创建一个CSS框架
HTML:
<div class="frame"> <img src="" alt="" height="" width=""> </div>
CSS:
.frame {
border: 2px ridge #000;
padding: 10px;
background-color: #fff;
}
.frame img {
border: 2px solid #ooo;
padding: 1px;
margin: 10px;
}
41. CSS实现文本突出效果
这是CSS3的text-shadow阴影特效，详细教程请看：text-shadow to create the letterpress effect.
.element {color: #222; text-shadow: 0px 2px 3px #555;}
text-shadow属性值顺序：
text-shadow: x-offset y-offset blur color;
42. 利用Border-Radius属性创建圆形
CSS2 的 border-radius 属性能够用来给元素创建所有浏览器都支持的圆形，只要设定元素的高度和宽度的值相同，然后再设定元素的border-radius属性值为高度或宽度值的一半即可：
.cirlce {
width: 300px;
height: 300px;
background-color: red;
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
}
border-radius是CSS的标准属性；-moz-border-radius 属性针对基于Mozilla的浏览器，如Firefox；-webkit-border-radius属性针对基于webkit的浏览器，如Safari 和Chrome。不幸的是，这几个属性IE都不支持。
43. CSS提示框
当鼠标移动到链接上方时，会自动出现一个提示框。
HTML:
<a class="tooltip" href="#"> Tooltip Link <span> This will be the text that shows up in the tooltip </span> </a>
CSS:
a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline; position:absolute;}
44. 固定Header
HTML:
<div id="header">header </div> <div id="content">content </div>
CSS:
#header {
position:fixed;
}
详细教程请看： header and footer fixed while allowing your content to scroll
原文：instantshift
Pingback 引用通告： [转]40+个有用的CSS应用技巧 | 鹏鹏的技术空间