到現(xiàn)在為止,只有一些已經(jīng)工作的CSS3特性.
多欄
該特性使生活更加容易，呵呵。這個新特性允許網(wǎng)頁設(shè)計師將文字填入欄中。這可以通過兩種方法實現(xiàn)，定義各欄的寬度，或者是定義欄數(shù)。
多欄布局目前只支持Mozilla核心的瀏覽器和Safari 3， 它們支持各自的屬性前綴 -moz-和-webkit-。下面的例子使用欄寬：
-moz-column-width: 13em;
-webkit-column-width: 13em;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
下一個例子使用欄數(shù)：
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
這兩個例子輸出如下：

還有一個特性尚未生效，它就是“column-space-distribution”，這個屬性可以描述當(dāng)頁面中還有剩余空間時如何分配欄目之間的間距。
關(guān)于CSS3 中的 Gird 布局
我們看看下面這張圖：

圖中藍色的線不會出現(xiàn)在實際的網(wǎng)頁中。對于這個布局復(fù)雜的三欄網(wǎng)頁來說，如果使用 CSS3 Gird 布局的話，我們只需這樣寫：
body { columns:3; column-gap:0.5in; }
img { float：page top right; width:3gr; }
其中，body 部分聲明頁面為 3 欄，欄間距為 0.5英寸；img 中 float 屬性指明圖片浮動位置為頁面的右上角（CSS3 定位好強大 -__-），而寬度為 3 個欄寬。只需這樣兩行 CSS，我們就可以實現(xiàn)這個復(fù)雜的布局了。真的很神奇。
Gird 布局是好，不過如果你認為它很簡單的話，你就大錯特錯了?？纯?w3c 中關(guān)于它的介紹，你會發(fā)現(xiàn)理解它的意義不亞于看懂天書。好在還是個草案，但愿它到了正式版的時候，能夠更加簡單易用點。
Gird 布局應(yīng)用很廣泛，最簡單的例子就是內(nèi)容的分欄顯示。但這個 CSS3 特性目前還沒有任何瀏覽器可以支持它。誰要是能第一個支持它（以及其它 CSS3 草案），那就酷斃了。不知道，最近異常低調(diào)的 IE8，會不會是這第一個吃螃蟹的人呢？

最新評論