12個css小知識

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

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時換行,而不是撐破頁面。
相關文章
相關標籤/搜索