你未必知道的10個CSS技巧

來源:互聯網
上載者:User
font的簡寫
CSS很多元素都有簡寫,font要特別和嚴格一些,font-size和font-family是必須的,而且要按照這個順序。因為font用到的地方比較多,所以他可能特別提到。簡寫能有效減小你的CSS檔案的體積。
class屬性疊加
其實在class中可以同時加入多個屬性,屬性用空格隔開。例如:<p class="text side">...</p>這樣<p>就繼承了.text和.side的有效屬性(衝突的地方會自動被排斥)。隨便提一下kubrick主題中也有一個地方使用了這個方法。該文章回複的使用者提到IE在處理多屬性時可能存在問題。
border的預設值
當你使用border簡寫時沒有指定border-width和border-color時,border是有預設值的,寬度為medium(大概3到4個象素),顏色為框內文本的顏色。
!important不理會IE
在CSS規則中,!important會使該規則額外優先,而IE卻聽不懂這條規則,那麼在某些時候這個技巧會非常有用。
圖片移魂
你先看看原文的敘述,我談談我的經曆。哈哈,我最早在zeldman的Blog上發現了這個技巧,注意他的導航條,滑鼠移至上方時空心字圖片會變為實心,而實際上這是一張圖片。呵呵,你再去分析一下他的CSS就知道了。
盒模式的另類hack法
IE6以前的版本都有對盒模式的錯誤理解。以前都是看用CSS的聲音屬性來處理IE6以下版本的效果,這次你可以看看另外一種方法,看上去更簡單方便。
塊元素置中
我們一般都使用指定塊寬度再把左右margin設定為auto來置中。殊不知有時會在IE6之前的版本出現問題。去看看解決技巧,有CSS樣本。
垂直置中
CSS對垂直置中比較弱,沒有表格那麼靈活。而且vertical-align這個屬性你就是用了也是不起作用的。方法就在於用行高來解決,把行高設定為整個box的高度。
子容器的定位
CSS的奇妙除了可以讓對象隨處定位外,還可以讓子容器也做得到。這個用處也很多。比如Binary Bonsai的導航條。
控制螢幕底部的背景色
這個請看原文的詳細講解了。
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.