column多列屬性

column-count:欄目數(shù)

兼容性寫法：

column-width 屬性規(guī)定列的寬度。

column-gap屬性規(guī)定列之間的間隔
column-rule 屬性設(shè)置列之間的寬度、樣式和顏色規(guī)則。

CSS3中新出現(xiàn)的多列布局(multi-column)是傳統(tǒng)HTML網(wǎng)頁中塊狀布局模式的有力擴(kuò)充。這種新語法能夠讓W(xué)EB開發(fā)人員輕松的讓文本呈現(xiàn)多列顯示。我們知道，當(dāng)一行文字太長時(shí)，讀者讀起來就比較費(fèi)勁，有可能讀錯(cuò)行或讀串行；人們的視點(diǎn)從文本的一端移到另一端、然后換到下一行的行首，如果眼球移動(dòng)浮動(dòng)過大，他們的注意力就會(huì)減退，容易讀不下去。所以，為了最大效率的使用大屏幕顯示器，頁面設(shè)計(jì)中需要限制文本的寬度，讓文本按多列呈現(xiàn)，就像報(bào)紙上的新聞排版一樣。

但是在CSS3的多列布局(columns)語法功能出現(xiàn)之前，人們?nèi)绻胱屛谋境识嗔酗@示，要么使用絕對(duì)定位，手動(dòng)給文本分段落，或者使用JS腳本等，而新語法的出現(xiàn)，徹底改變了這樣的局面。
多列(columns)的用法
列個(gè)數(shù) 和 列寬度

不管想讓一段文本呈多少列顯示，你需要的只是兩個(gè)屬性：column-count 和 column-width。

column-count 屬性設(shè)置列的具體個(gè)數(shù)，例如：

<div style="column-count:2;">CSS里一直有一個(gè)讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運(yùn)的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控，避免了很多麻煩。</div>

這將會(huì)使文本里的內(nèi)容顯示成兩列(首先你的瀏覽器要支持這種新語法，比如火狐瀏覽器、谷歌瀏覽器，IE10+等)：

column-width屬性控制列的寬度。如果你沒有提供column-count屬性值，那么，瀏覽器就是自主決定將文本分成合適的列數(shù)。

<div style="column-width:10em;">CSS里一直有一個(gè)讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運(yùn)的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控，避免了很多麻煩。</div>

就變成了這樣：

在一個(gè)多列的文本塊里，文本內(nèi)容會(huì)自動(dòng)的一列一列的填充。
多列布局columns語法簡寫

大多時(shí)候，WEB程序員只需要同時(shí)使用這兩個(gè)屬中的一個(gè)：column-count 或 column-width?；蛘邇蓚€(gè)同時(shí)使用，幸運(yùn)的是，這兩個(gè)屬性的屬性值是不同單位，不會(huì)搞混，所以就有了簡寫方式，columns，例如：

我們之前寫的 column-width:12em 可以用下面的寫法替換：

<div style="columns:12em">CSS里一直有一個(gè)讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運(yùn)的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控，避免了很多麻煩。</div>。

而之前寫的 column-count:4 可以用以下語法簡寫替換：
<div style="columns:4">CSS里一直有一個(gè)讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運(yùn)的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控，避免了很多麻煩。</div>

而同時(shí)聲明了 column-width:8em 和 column-count:12 的情況可以用以下簡寫替換：
<div style="columns:12 8em">CSS里一直有一個(gè)讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運(yùn)的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控，避免了很多麻煩。</div>

列高度的平衡

CSS3規(guī)范里描述的是，各列的高度是均衡的，瀏覽器會(huì)自動(dòng)調(diào)整每列里填充多少文本、均分文本，來使各列的高度保持均衡一致。

然而，有時(shí)候，我們需要設(shè)定列的最大高度，這個(gè)時(shí)候，文本內(nèi)容會(huì)從第一列開始填充，然后第二列，第三列，也許以后的列會(huì)填不滿，也許會(huì)溢出。所以，當(dāng)對(duì)多列布局設(shè)定了height或max-height屬性值后，列會(huì)伸長到指定高度——無論內(nèi)容有多少，夠不夠或超不超。
列之間的縫隙間隔寬度

兩列之間會(huì)有縫隙間隔。缺省情況下這個(gè)間隔寬度是1em，但如果你使用column-gap屬性，就會(huì)修改這個(gè)缺省的寬度值：

<div style="column-width:20em; column-gap:2em;">CSS里一直有一個(gè)讓我們頭疼的問題，就是創(chuàng)建布局很麻煩。當(dāng)然，有很多方式，有很多技術(shù)都可以創(chuàng)建各種布局，但我們總覺得CSS里應(yīng)該提供一些新屬性，讓我們能更好的管理布局。幸運(yùn)的是，CSS3里提供了一批新的創(chuàng)建列式布局的column屬性，有了這些屬性，我們不需要再使用float,clear,margin等屬性進(jìn)行調(diào)控，避免了很多麻煩。</div>

列布局的瀏覽器完美兼容

對(duì)于一些不支持多列布局特征的瀏覽器，比如IE9/IE8，會(huì)把這些屬性全部忽略，這樣布局就呈現(xiàn)出傳統(tǒng)的單塊布局。

為了保證瀏覽器最大的兼容性，我們?cè)谑褂枚嗔胁季謱傩詴r(shí)，最好添加瀏覽器引擎前綴，最基本的要加上三種：谷歌瀏覽器的-webkit-，火狐瀏覽器的-moz-，IE瀏覽器的-ms-，最后，別忘了不帶前綴的寫法。
總結(jié)

CSS3的多列布局(columns)是一種方便WEB開發(fā)者高效利用寬屏顯示器的非常有用的功能特征。你會(huì)發(fā)現(xiàn)在很多地方都需要用到它們，特別是需要自動(dòng)平衡列高度的地方。

最新評(píng)論