多列布局
CSS多列布局繼承自塊級布局模式，允許簡單地定義多列文本。 一行太長的文字讀起來很麻煩；當(dāng)人眼從一行過長的文字末端移動到下一行開始處，就容易弄錯到底該讀哪一行。因此，為了最優(yōu)化使用大的顯示屏幕，設(shè)計(jì)者應(yīng)該限制文字段落的寬度而并排排列，就像報紙一樣。

糟糕的是如果不使用CSS和HTML在特定的位置強(qiáng)制換行，或者嚴(yán)格限制文本中允許的標(biāo)記，或者夸張地使用腳本的話，這是不可能實(shí)現(xiàn)的。該限制通過從傳統(tǒng)的塊級布局模塊中延伸出來的新的CSS屬性得以解決。

列計(jì)數(shù)器和寬度

有兩個CSS屬性控制是否實(shí)現(xiàn)多列布局和顯示多少列： column-count and column-width。

屬性 column-count 設(shè)置特定數(shù)量的列數(shù)。例如，

會以兩列的方式顯示內(nèi)容：(如果你正使用支持多列布局的瀏覽器的話):

屬性 column-width 設(shè)置期望的最小列寬。如果 column-count 沒有設(shè)置，那么瀏覽器就會以合適的寬度盡量顯示更多的列。

變成：

在多列塊中，內(nèi)容會自動從一列換到另一列中。所有 HTML， CSS 和 DOM 功能在列之間都得到支持, 比如編輯和打印。

columns 屬性簡寫

多數(shù)時候，網(wǎng)頁設(shè)計(jì)者都會使用 column-count 和 column-width 的一個. 由于它們的值沒有重疊，一般使用簡寫屬性 columns。例如，

CSS聲明 column-width:12em 可替換成：

CSS聲明 column-count:4 可替換成：

CSS聲明 column-width:8em 和 column-count:12 可替換成：

高度平衡

CSS3多列規(guī)范需要列高平衡：即，瀏覽器自動設(shè)置最大列高，因此每列中的內(nèi)容高度大致相同。Firefox瀏覽器是這樣的。

然而，一些情況下，明確設(shè)置最大列高也是有用的，這樣內(nèi)容從第一列開始，盡可能多的生成列，甚至?xí)绯鲇疫呇?。因此，如果通過設(shè)置height 或 max-height 屬性來限制列高，在生成新的一列之前每一列都會僅允許增加到這個高度。該模型對布局來說也更高效。

列間隙

列之間有縫隙。建議值為1em。該值可通過設(shè)置多列模塊的 column-gap 屬性來修改：

優(yōu)雅降級
多列屬性會被不支持多列模型的瀏覽器忽略。因此，為這些瀏覽器創(chuàng)建單列結(jié)構(gòu)而為支持多列的瀏覽器創(chuàng)建多列結(jié)構(gòu)相對來說比較簡單。

注意不是所有的瀏覽器都支持不帶前綴的屬性名。為了在大多數(shù)現(xiàn)代瀏覽器中應(yīng)用這種特性，每個屬性必須寫三次： 一次用 -moz 前綴，一次用 -webkit 前綴，一次不使用前綴

多背景
通過使用 CSS3，你可以向元素應(yīng)用多個背景。這些背景相互堆疊，第一個背景放在最上面，最后一個背景放在最下面。 僅最后一個背景允許擁有背景色。

指定多個背景很簡單：

你既可以使用簡寫屬性 background 也可以使用除 background-color 外的獨(dú)立屬性。即,，下面的屬性可以用屬性列表指定， 每個背景一個： background，background-attachment，background-clip, background-image，background-origin，background-position， background-repeat， background-size。

示例
該例中，三個背景進(jìn)行堆疊：火狐標(biāo)志,一個線性漸變， 和一張帶有花的圖片：

結(jié)果