這是原文
Ten CSS tricks you may not know大意如下:
1. CSS font shorthand ruleCSS 縮寫(xiě)
比如
font-style:bold;ling-height:130%;font-size:12px;
可以縮寫(xiě)為
font:bold 12px/130%
2. Two classes together同時(shí)使用多個(gè) class
多個(gè)class中間空格分開(kāi),如 <div class="oMenu oEm">
3. CSS border default value邊框使用默認樣式
邊框默認的為 soild，寬度為medium，大約3-4像素，顏色與包含的文字內容一樣。
4. !important ignored by IE用!important來(lái)區分IE
比如：
margin-top: 3.5em !important; margin-top: 2em
非IE瀏覽器會(huì )優(yōu)先使用 3.5em，而IE根據先后順序關(guān)系，使用 2em
5. Image replacement technique圖片替換技術(shù)
比如：
<img alt="[color]圖片說(shuō)明[/color]">
搜索引擎對這樣 alt 不如真正的文字敏感?？梢赃@樣來(lái)優(yōu)化搜索引擎（SEO）
CSS部分：
h1
{
background: url(widget-image.gif) no-repeat;
}
h1 span
{
position: absolute;
left:-2000px;
}
HTML 代碼：
<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>
6. CSS box model hack alternativeCSS盒式模型
簡(jiǎn)單地說(shuō)，就是把padding和border這種IE不消化的東西，通過(guò) div 嵌套逃避過(guò)去。（在里面那個(gè)div設置 padding 和 border）
代碼如下：
<style>
#box
{
width: 150px;
}
#box div {
border: 5px;
padding: 20px;
}
</style>
<div id="box"><div>...</div></div>
7. Centre aligning a block element頁(yè)面中間對齊
IE 不認識 margin:auto，所以這樣
<style>
body
{
text-align: center;
}
#content
{
text-align: left;
width: 700px;
margin: 0 auto;
}
</style>
<body>
<div id="content">
...
8. Vertically aligning with CSS垂直對齊
vertical-align 不好使，可以試試 line-height
9. CSS positioning within a containerCSS定位
實(shí)際上就是古老的“層嵌套”，外面 relative 里面 absolute，這樣的 absolute 就是相對外面的容器而不再是body（整個(gè)頁(yè)面）了
10. Background colour running to the screen bottom背景顏色走到底
有時(shí)頁(yè)面需要某一列背景色走到底，但這列內容沒(méi)那么多，這時(shí)可以用背景來(lái)做。
body
{
background: url(blue-image.gif) 0 0 repeat-y;
}
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
