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
關於瀏覽器的支援情況，大概所有的現代瀏覽器都支援這些新屬性值，但對於一些非常老舊的瀏覽器(ie6/7/8)，最好在**裡提供一些萬一不支援的補救機制。
4.css的clip屬性只在絕對定位的元素上才會生效
之前說到了background-clip，你可能會想到clip屬性。它的用法是下面這個樣子：
.example
它的作用是按指定的尺寸、規定的大小裁剪元素。很多簡單，但唯一你需要注意的事情是，clip只會在絕對定位的元素上生效。所有，你必須這樣做：
.example
但是，你也可以將元素的position設定成position: fixed，因為，根據css官方規範，fixed的元素也屬於『absolutely positioned』元素。
5.元素豎向的百分比設定是相對於容器的寬度，而不是高度
這是乙個很讓人困惑的css特徵，我之前也談到過它。我們大家都知道，當按百分比設定乙個元素的寬度時，它是相對于父容器的寬度計算的，但是，對於一些表示豎向距離的屬性，例如padding-top,padding-bottom,margin-top,margin-bottom等，當按百分比設定它們時，依據的也是父容器的寬度，而不是高度。
6.border屬性比你想象的要複雜
我們很多人都用過這樣的寫法：
.example
這裡的border屬性的用法實際上是一種簡寫的形式，它分別設定了border-style, border-width, 和border-color — 用一句**表示它們三個。
但不要忘記，border-style, border-width, 和border-color也都有自己的簡寫形式。所以，border-width可以寫成這樣：
.example
這樣，四個邊的寬度被一次設定。border-color 和 border-style 屬性也可以這樣做。
7.text-decoration屬性變成了屬性簡寫
我相信有些小知識會讓你大吃一驚。
跟著最新的css規範，text-decoration現在的寫法是這樣的：
a text-decoration屬性現在需要用三種屬性值來表示了：text-decoration-line,text-decoration-color, and text-decoration-style.
但不幸的是，目前只有火狐瀏覽器實現了對這些新屬性的支援。
7.text-decoration屬性變成了屬性簡寫
我相信有些小知識會讓你大吃一驚。
跟著最新的css規範，text-decoration現在的寫法是這樣的：
a 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
估計你從語義上已經猜出它的作用了。它是為html table服務的。它會告訴瀏覽器，當乙個table單元格裡沒有東西時，就隱藏它。
11.font-style的oblique屬性值
對與css的font-style屬性，我估計大家每次見到的都是使用「normal」或 「italic」兩個屬性值。但事實上，你還可以讓它賦值為「oblique」。
12.word-wrap和overflow-wrap是等效的
word-wrap並不是乙個很常用的css屬性，但在特定的環境中確實非常有用的。我們經常使用的乙個例子是讓頁面中顯示乙個長url時換行，而不是撐破頁面。
CSS日常小知識
假如有乙個padding border margin 與其他的三條邊不同，其他三條邊一樣，這個時候我們設定總體樣式，再單獨去設定它的樣式。border 5px solid red css 層疊特效 border bottom 10px dashed green 有一些標籤會有預設的樣式，比如預設的m...
CSS屬性小知識
1.float 注意 1.浮動元素產生了浮動流，塊級元素看不到他們，也就是會忽略它所佔的位置 2.產生bfc的元素和文字類屬性的元素以及文字都能看到他們 3.有inline 睡醒都具有文字屬性 4.若設定浮動，應該馬上清除浮動，避免不必要的影響 清除浮動的方法 方法一 新增新的元素 應用 clear...
css簡單小知識
一.css盒子模型 1 屬性 外邊距 margin 邊框 border 內邊距 padding 和內容 content 2.種類 ie盒子模型和標準模型兩種。標準模型 box sizing content box ie模型 box sizing border box 3.筆記 1 內邊距paddin...