摘要：注意會(huì)生成新的，因此不會(huì)出現(xiàn)效果。圖中藍(lán)色線(xiàn)框，位于內(nèi)，作為間的分隔線(xiàn)。不可否認(rèn)求學(xué)之路的艱辛苦悶。如此的努力，為了僅僅是能在大學(xué)逍遙快活一番這動(dòng)機(jī)實(shí)在讓人心寒，也正因如此造就了大學(xué)生的墮落。人類(lèi)文明進(jìn)步最有力的證明。

?是否記得《讀者文摘》中那一篇篇優(yōu)美感人的文章呢？那除了文章內(nèi)容外，還記得那報(bào)刊、雜志獨(dú)有的多欄布局嗎？
?當(dāng)我們希望將報(bào)刊、雜志中的閱讀體驗(yàn)遷移到網(wǎng)頁(yè)上時(shí)，最簡(jiǎn)單直接的方式就是采用多欄布局來(lái)對(duì)內(nèi)容排版，然而在過(guò)去我們僅能通過(guò)float+positioned來(lái)模擬多欄布局，而且效果不盡人意。而CSS3引入新的Multi-column Layout模型，從底層支持多欄布局。
?文本作為學(xué)習(xí)筆記，以便日后查閱。

?在深入Multi-column Layout模型之前，我們先看看療效吧。

?大家在網(wǎng)上瀏覽的新聞、博客等一般采用的是通欄布局，效果如同當(dāng)前本篇博客一樣，就是所有內(nèi)容均集中在一列中排版。若將這種布局方式運(yùn)用在報(bào)刊、雜志上那只能一個(gè)字來(lái)形容，那就是丑了。

?感覺(jué)是不是猶如在讀紙質(zhì)的雜志呢:)

multi-column element(abbr. multicol):圖中白色線(xiàn)框，column-width或column-count屬性值不為auto時(shí)，該元素則作為multicol并為其子元素提供multi-column layout。
注意：

multicol會(huì)生成新的BFC，因此不會(huì)出現(xiàn)collapsing margins效果。

column box(abbr. column):圖中紅色線(xiàn)框，如同line box一樣用于組織multicol中的各子元素。具體特性如下

multicol下的子元素被分配到column box中進(jìn)行排版，若column box不足以容納某個(gè)子元素，則將子元素拆解成N個(gè)部分并分配到N個(gè)column box中;

column box沿multicol的inline direction排列;

column box的數(shù)目是根據(jù)column-width、column-count屬性值，和multicol的content box的inline dimension上的長(zhǎng)度度計(jì)算而來(lái)的;

同一個(gè)multicol下的所有column box的寬度都是一樣的，當(dāng)column-fill:balance時(shí)高度均等于mluticol在block dimension上的長(zhǎng)度;

子元素所屬的containing block不再是multicol的content box，而是該元素位于的column box;(因此如width:100%和float:left均是以column box為參考系)

若內(nèi)容超出column box在inline dimension的長(zhǎng)度時(shí)，則會(huì)被隱藏;(視覺(jué)上就是內(nèi)容剛好在column gap前被截取了)

absolute positioned元素不參與multi-column layout.

column gap:圖中粉色線(xiàn)框，位于column box之間。
column rule:圖中藍(lán)色線(xiàn)框，位于column gap內(nèi)，作為column box間的分隔線(xiàn)。

注意上述內(nèi)容有幾個(gè)相對(duì)陌生的概念——inline direction、block direction、inline dimension、block dimension，其實(shí)就是對(duì)應(yīng)我們默認(rèn)情況下的"從左至右"、"從上到下"、"水平方向"和"垂直方向"。那為何不用后者來(lái)描述呢？原因就是后者是一種"合理誤解"的描述方式，"從左至右"只是inline direction的其中一種而已。下面我們簡(jiǎn)單梳理一下！參考

block dimension與inline dimension相互垂直；

writing mode為水平方向時(shí)，inline dimension與horizontal dimension一致；writing mode為垂直方向時(shí)，inline dimension與vertical dimension一致；

block direction其實(shí)是Flow-relative Direction下的block flow direction,我們要從關(guān)注"上下"轉(zhuǎn)移到關(guān)注block-start和block-end，沿block direction排列實(shí)際上就是從block-start到block-end排列。當(dāng)writing-mode為horizontal-tb時(shí)，block-start為上，block-end為下;當(dāng)writing-mode為vertical-rl時(shí)，block-start為右，block-end為左;當(dāng)writing-mode為vertical-lr時(shí)，block-start為左，block-end為右;

inline direction其實(shí)是Flow-relative Direction下的inline base direction,我們要從關(guān)注"左右"轉(zhuǎn)移到關(guān)注line-start和line-end，沿inline direction排列實(shí)際上就是從line-start到line-end排列。當(dāng)writing-mode含horizontal關(guān)鍵詞時(shí)，且direction為ltr，則line-start為左，line-end為右，否則相反；若writing-mode含vertical關(guān)鍵詞時(shí)，且direction為ltr，則line-start為上，line-end為下，否則相反。

  
  

    
夢(mèng)開(kāi)始的地方
    
核心提示：十年寒窗無(wú)人問(wèn)，一舉成名天下知。不可否認(rèn)求學(xué)之路的艱辛苦悶。但這似乎也阻止不了那些為上大學(xué)而晝夜奮戰(zhàn)的莘莘學(xué)子。如此的努力，為了僅僅是能在大學(xué)“逍遙快活一番”這動(dòng)機(jī)實(shí)在讓人心寒，也正因如此造就了大學(xué)生的墮落。電腦，科技革命的產(chǎn)物。人類(lèi)文明進(jìn)步最有力的證明。這也成為了大學(xué)生必不可少的裝備之一，但大多數(shù)...
十年寒窗無(wú)人問(wèn)，一舉成名天下知。不可否認(rèn)求學(xué)之路的艱辛苦悶。但這似乎也阻止不了那些為上大學(xué)而晝夜奮戰(zhàn)的莘莘學(xué)子。如此的努力，為了僅僅是能在大學(xué)“逍遙快活一番”這動(dòng)機(jī)實(shí)在讓人心寒，也正因如此造就了大學(xué)生的墮落。
  

1.column-width:auto|
?設(shè)置每欄的寬度

若column-count屬性值為auto，則column-count=父容器寬度/column-width;

若column-count屬性值不為auto，則該設(shè)置為每欄的最小寬度，并根據(jù)父容器寬度，調(diào)整顯示的欄目數(shù)目。(注意：當(dāng)column-width*column-count < 父容器寬度時(shí)，column-width將自動(dòng)擴(kuò)大)

2.column-count:auto|
?作用：設(shè)置欄目數(shù)量

若column-width屬性值為auto，則無(wú)論父容器寬度是多少，依然保持固定的欄目數(shù)；

若column-width屬性值不為auto，則該設(shè)置為欄目的最大數(shù)量，并根據(jù)父容器寬度，調(diào)整顯示的欄目數(shù)目。(注意：當(dāng)column-width*column-count < 父容器寬度時(shí)，column-width將自動(dòng)擴(kuò)大)

column: ||

3.column-gap:normal|
?作用：設(shè)置欄之間的間距，normal的結(jié)果值一般為1em。
4.column-rule:||