CSS的使用技巧
1. 文字的水平居中
将一段文字置于容器的水平中点，只要设置text-align属性即：
text-algin: center;
2. 容器的水平居中
先为该容器设置一个明确宽度，然后将margin的水平值设为auto即可。
div#container {
width:760px;
margin:0 auto;
}
3. 文字的垂直居中
单行文字的垂直居中，只要将行高与容器高设为相等即可。
比如，容器中有一行数字。
<div id="container">1234567890</div>
然后CSS这样写：
div#container {height: 35px; line-height: 35px;}
如果有n行文字，那么将行高设为容器高度的n分之一即可。
4. 容器的垂直居中
比如，有一大一小两个容器，请问如何将小容器垂直居中?
<div id="big">
<div id="small">
</div>
</div>
首先，将大容器的定位为relative。
div#big{
position:relative;
height:480px;
}
然后，将小容器定位为absolute，再将它的左上角沿y轴下移50%，最后将它margin-top上移本身高度的50%即可。
div#small {
position: absolute;
top: 50%;
height: 240px;
margin-top: -120px;
}
使用同样的思路，也可以做出水平居中的效果。
5. 图片宽度的自适应
如何使得较大的图片，能够自动适应小容器的宽度？CSS可以这样写：
img {max-width: 100%}
6. CSS的优先性
如果同一个容器被多条CSS语句定义，那么哪一个定义优先呢？
基本规则是：
行内样式 > id样式 > class样式 > 标签名样式
比如，有一个元素：
<div id="ID" class="CLASS" style="color:black;"></div>
行内样式是最优先的，然后其他设置的优先性，从低到高依次为：
div < .class < div.class < #id < div#id < #id.class < div#id.class
7. 透明
将一个容器设为透明，可以使用下面的代码：
.element {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
在这四行CSS语句中，第一行是IE专用的，第二行用于Firefox，第三行用于webkit核心的浏览器，第四行用于Opera。
8. CSS三角形
如何使用CSS生成一个三角形？
先编写一个空元素
<div class="triangle"></div>
然后，将它四个边框中的三个边框设为透明，剩下一个设为可见，就可以生成三角形效果：
.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 300px 300px 300px;
height: 0px;
width: 0px;
}
9. 禁止自动换行
如果你希望文字在一行中显示完成，不要自动换行，CSS命令如下：
h1 { white-space:nowrap; }
10. CSS提示框
当鼠标移动到链接上方，会自动出现一个提示框。
<a class="tooltip" href="#">链接文字 <span>提示文字</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;}
11. 容器的水平和垂直居中
HTML代码如下：
<figure class='logo'>
<span></span>
<img class='photo'/>
</figure>
CSS代码如下：
.logo {
display: block;
text-align: center;
display: block;
text-align: center;
vertical-align: middle;
border: 4px solid #dddddd;
padding: 4px;
height: 74px;
width: 74px; }
.logo * {
display: inline-block;
height: 100%;
vertical-align: middle; }
.logo .photo {
height: auto;
width: auto;
max-width: 100%;
max-height: 100%; }
12. CSS阴影
外阴影：
.shadow {
-moz-box-shadow: 5px 5px 5px #ccc;
-webkit-box-shadow: 5px 5px 5px #ccc;
box-shadow: 5px 5px 5px #ccc;
}
内阴影：
.shadow {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
