1.CSS的color屬性並不是只能用於文本顯示
對於CSS的color屬性,相信全部Web開發人員都使用過。若是你並非一個特別有經驗的程序員,我相信你未必知道color屬性除了能用在文本顯示,還能夠用做其它地方。它能夠把頁面上的全部的東西都變顏色。好比:
沒法顯示的圖片的alt文字
list元素的邊框
無序list元素前面的小點
有序list元素前面的數字
還有hr元素css
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’元素。ide
5.元素豎向的百分比設定是相對於容器的寬度,而不是高度
這是一個很讓人困惑的CSS特徵,我以前也談到過它。咱們你們都知道,當按百分比設定一個元素的寬度時,它是相對於父容器的寬度計算的,可是,對於一些表示豎向距離的屬性,例如padding-top,padding-bottom,margin-top,margin-bottom等,當按百分比設定它們時,依據的也是父容器的寬度,而不是高度。post