12個css小知識

1.CSS的color屬性並不是只能用於文本顯示
對於CSS的color屬性，相信全部Web開發人員都使用過。若是你並非一個特別有經驗的程序員，我相信你未必知道color屬性除了能用在文本顯示，還能夠用做其它地方。它能夠把頁面上的全部的東西都變顏色。好比：
沒法顯示的圖片的alt文字
list元素的邊框
無序list元素前面的小點
有序list元素前面的數字
還有hr元素

2.CSS裏的visibility屬性有個collapse屬性值：collapse
對於CSS裏的visibility屬性，相信你用過不下幾百次。大多時候，你會把它的值設置成visible(這是全部頁面元素的缺省值)，或者是hidden。後者至關於display: none，但仍然佔用頁面空間。
其實visibility能夠有第三種值，就是collapse。當一個元素的visibility屬性被設置成collapse值後，對於通常的元素，它的表現跟hidden是同樣的。但例外的是，若是這個元素是table相關的元素，例如table行，table group，table列，table column group，它的表現卻跟display: none同樣，也就是說，它們佔用的空間也會釋放。
但遺憾的是，各類瀏覽器對collapse值的處理方式不同。

3.CSS的background簡寫方式裏新增了新的屬性值
在CSS2.1裏，background屬性的簡寫方式包含五種屬性值 – background-color, background-image,background-repeat, background-attachment, and background-position。從CSS3開始，又增長了3個新的屬性值，加起來一共8個。下面是按順序分別表明的意思：
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];
注意裏面的反斜槓，它更font和border-radius裏簡寫方式使用的反斜槓的用法類似。反斜槓能夠在支持這種寫法的瀏覽器裏在position後面接着寫background-size。
除此以外，你開能夠增長另外兩個描述它的屬性值： background-origin 和 background-clip.
它的語法用起來像下面這個樣子：
.example {
background: aquamarine url(img.png)
no-repeat
scroll
center center / 50%
content-box content-box;
}
關於瀏覽器的支持狀況，大概全部的現代瀏覽器都支持這些新屬性值，但對於一些很是老舊的瀏覽器(IE6/7/8)，最好在代碼裏提供一些萬一不支持的補救機制。

4.CSS的clip屬性只在絕對定位的元素上纔會生效
以前說到了background-clip，你可能會想到clip屬性。它的用法是下面這個樣子：
.example { clip: rect(110px, 160px, 170px, 60px);}
它的做用是按指定的尺寸、規定的大小裁剪元素。不少簡單，但惟一你須要注意的事情是，clip只會在絕對定位的元素上生效。全部，你必須這樣作：
.example { position: absolute; clip: rect(110px, 160px, 170px, 60px);}
可是，你也能夠將元素的position設置成position: fixed，由於，根據css官方規範，fixed的元素也屬於‘absolutely positioned’元素。

5.元素豎向的百分比設定是相對於容器的寬度，而不是高度
這是一個很讓人困惑的CSS特徵，我以前也談到過它。咱們你們都知道，當按百分比設定一個元素的寬度時，它是相對於父容器的寬度計算的，可是，對於一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。

6.border屬性比你想象的要複雜
咱們不少人都用過這樣的寫法：
.example { border: solid 1px black;}
這裏的border屬性的用法其實是一種簡寫的形式，它分別設置了border-style, border-width, 和border-color — 用一句代碼表示它們三個。
但不要忘記，border-style, border-width, 和border-color也都有本身的簡寫形式。因此，border-width能夠寫成這樣：
.example { border-width: 2px 5px 1px 0;}
這樣，四個邊的寬度被一次設定。border-color 和 border-style 屬性也能夠這樣作。

7.text-decoration屬性變成了屬性簡寫
我相信有些小知識會讓你大吃一驚。
跟着最新的CSS規範，text-decoration如今的寫法是這樣的：
a { text-decoration: overline aqua wavy;}
text-decoration屬性如今須要用三種屬性值來表示了：text-decoration-line,text-decoration-color, and text-decoration-style.
但不幸的是，目前只有火狐瀏覽器實現了對這些新屬性的支持。

7.text-decoration屬性變成了屬性簡寫
我相信有些小知識會讓你大吃一驚。
跟着最新的CSS規範，text-decoration如今的寫法是這樣的：
a { text-decoration: overline aqua wavy;}
text-decoration屬性如今須要用三種屬性值來表示了：text-decoration-line,text-decoration-color, and text-decoration-style.
但不幸的是，目前只有火狐瀏覽器實現了對這些新屬性的支持。

8.border-width屬性可使用預約義常量值
也許對與你來講這並非一個什麼新鮮信息。除了可使用標準寬度值(例如5px或1em)外，border-width屬性能夠接受預約義的常量值：medium, thin, 和 thick
事實上，若是你不給border-width屬性賦值，那它的缺省值是「medium」。

9.爲何沒有人使用border-image
如今幾乎全部的現代瀏覽器都支持這個屬性——除了IE10及如下IE版本。
看起來這是一個很是漂亮的CSS功能，它可讓你用圖片修飾元素的邊框。

10.你知道table裏的empty-cells屬性嗎？
css裏的empty-cells屬性是全部瀏覽器都支持的，甚至包括IE8，它的用法是下面這個樣子：
table { empty-cells: hide;}
估計你從語義上已經猜出它的做用了。它是爲HTML table服務的。它會告訴瀏覽器，當一個table單元格里沒有東西時，就隱藏它。

11.font-style的oblique屬性值
對與css的font-style屬性，我估計你們每次見到的都是使用「normal」或 「italic」兩個屬性值。但事實上，你還可讓它賦值爲「oblique」。

12.word-wrap和overflow-wrap是等效的 word-wrap並非一個很經常使用的CSS屬性，但在特定的環境中確實很是有用的。咱們常用的一個例子是讓頁面中顯示一個長url時換行，而不是撐破頁面。