1、 容器的垂直居中
比如，有一大一小兩個(gè)容器，請(qǐng)問(wèn)如何將小容器垂直居中？
<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;
}
使用同樣的思路，也可以做出水平居中的效果。
2、 圖片寬度的自適應(yīng)
如何使得較大的圖片，能夠自動(dòng)適應(yīng)小容器的寬度？CSS可以這樣寫：
img {max-width: 100%}
但是IE6不支持max-width，所以遇到IE6時(shí)，使用IE條件注釋，將語(yǔ)句改寫為：
img {width: 100%}
3、3D按鈕
要使按鈕具有3D效果，只要將它的左上部邊框設(shè)為淺色，右下部邊框設(shè)為深色即可。
div#button {
background: #888;
border: 2px solid;
border-color: #999 #666 #666 #999;}
4、Text-transform和Font Variant
Text-transform用于將所有字母變成小寫字母、大寫字母或首字母大寫：
p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}
Font Variant用于將字體變成小型的大寫字母（即與小寫字母等高的大寫字母）。
p {font-variant: small-caps}
5、CSS三角形
如何使用CSS生成一個(gè)三角形？
先編寫一個(gè)空元素
<div class="triangle"></div>
然后，將它四個(gè)邊框中的三個(gè)邊框設(shè)為透明，剩下一個(gè)設(shè)為可見(jiàn)，就可以生成三角形效果：
.triangle {
border-color: transparent transparent green transparent;
border-style: solid;
border-width: 0px 150px 260px 150px;
height: 0px;
width: 0px;
}
6、禁止自動(dòng)換行
如果你希望文字在一行中顯示完成，不要自動(dòng)換行，CSS命令如下：
h1 { white-space:nowrap; }
7、 獲得焦點(diǎn)的表單元素
當(dāng)一個(gè)表單元素獲得焦點(diǎn)時(shí)，可以將其突出顯示：
input:focus { border: 2px solid green; }
8、!important規(guī)則
多條CSS語(yǔ)句互相沖突時(shí)，具有!important的語(yǔ)句將覆蓋其他語(yǔ)句。由于IE不支持!important，所以也可以利用它區(qū)分不同的瀏覽器。
h1 {
color: red !important;
color: blue;
}
上面這段語(yǔ)句的結(jié)果是，其他瀏覽器都顯示紅色標(biāo)題，只有IE顯示藍(lán)色標(biāo)題。
9、CSS提示框
當(dāng)鼠標(biāo)移動(dòng)到鏈接上方，會(huì)自動(dòng)出現(xiàn)一個(gè)提示框。
<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;}
10、 固定位置的頁(yè)首
當(dāng)頁(yè)面滾動(dòng)時(shí)，有時(shí)需要頁(yè)首在位置固定不變，CSS語(yǔ)句可以這樣寫，效果參見(jiàn)
http://limpid.nl/lab/css/fixed/header：
body{ margin:0;padding:100px 0 0 0;}
div#header{
position:absolute;
top:0;
left:0;
width:100%;
height:<length>;
}
@media screen{
body>div#header{position: fixed;}
}
* html body{overflow:hidden;}
* html div#content{height:100%;overflow:auto;}
