多列布局（Multi-column）
多列布局就是將文本內(nèi)容設(shè)計(jì)成像報(bào)紙那樣的多列布局。或者說(shuō)在之前我們通過(guò)js或者JQuery才能實(shí)現(xiàn)的瀑布流，在CSS3中我們可以直接通過(guò)CSS就可以實(shí)現(xiàn)，雖然有兼容性上面的問(wèn)題。。
兼容性
IE10+、FireFox16+、Chrome26+、Safari6.1+、Opera12.1
多列布局的屬性
CSS3 中提供了一系列實(shí)現(xiàn)多列布局的屬性，如下表所示：
| 屬性 | 說(shuō)明 |
| column-count | 指定元素應(yīng)該分為幾列 |
| column-fill | 指定如何填充每個(gè)列 |
| column-gap | 指定列與列之間的間隙 |
| column-rule | 所有 column-rule-* 屬性的簡(jiǎn)寫(xiě)形式 |
| column-rule-color | 指定列與列之間邊框的顏色 |
| column-rule-style | 指定列與列之間邊框的樣式 |
| column-rule-width | 指定列與列之間邊框的寬度 |
| column-span | 指定元素應(yīng)該橫跨多少列 |
| column-width | 指定列的寬度 |
| columns | column-width 與 column-count 屬性的簡(jiǎn)寫(xiě)屬性 |
1. columns 設(shè)置對(duì)象的列數(shù)個(gè)每列的寬度
設(shè)置或檢索對(duì)象的列數(shù)和每列的寬度。
語(yǔ)法：
columns: <'column-width'> || <'columns-count'>;
參數(shù)說(shuō)明：
（1）第一個(gè)參數(shù)指每列的寬度
（2）第二個(gè)參數(shù)指列數(shù)?？蓪?xiě)兩個(gè)，也可寫(xiě)一個(gè)。
兩個(gè)參數(shù)優(yōu)先考慮列數(shù)（在放的下的情況下）。若是寬度不夠（列數(shù)*設(shè)置的寬度>容器的寬度），將會(huì)自動(dòng)減小一列，并自動(dòng)加寬段落的寬度，使之達(dá)到容器的寬度。中間自動(dòng)生成合適的間距。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style>
*{margin: 0;padding: 0;}
div.test1,div.test2{
border: 20px solid rgba(0,0,0.3);
}
div.test1{
width: 900px;
-webkit-columns: 300px 4;
-moz-columns: 300px 4;
columns: 300px 4;
}
div.test1>div{
margin-top: 20px;
border: 2px solid red;
}
div.test2{
-webkit-columns: 400px;
-moz-columns: 400px;
columns: 400px;
}
div.test2>div{
margin-top: 20px;
border: 2px solid red;
}
</style>
</head>
<body>
<div>
<div>從C語(yǔ)言的發(fā)明人丹尼斯里奇的發(fā)明之初定位，我們知道它就是要做系統(tǒng)的，本身就不是做圖形化軟件的，應(yīng)該是包括開(kāi)發(fā)驅(qū)動(dòng)、做系統(tǒng)內(nèi)核、文件管理、內(nèi)管管理、網(wǎng)絡(luò)通信等等一系列核心的，因此單純學(xué)習(xí)C語(yǔ)言的語(yǔ)法，還要學(xué)習(xí)操作系統(tǒng)原理、通信協(xié)議、編譯器原理、數(shù)據(jù)結(jié)構(gòu)等其他學(xué)科才可以完成前面的需求的。</div>
<div>這個(gè)時(shí)候你看到全英文的主板說(shuō)明書(shū)的時(shí)候，才知道應(yīng)該讀取哪個(gè)接口、通信協(xié)議是如何規(guī)定的，應(yīng)該讀幾個(gè)字節(jié)...等等，才可以寫(xiě)驅(qū)動(dòng)才可以寫(xiě)內(nèi)核才可以做通信，到這個(gè)程度，即便社會(huì)上企業(yè)人才需求比較少，但也根本不存在找不到工作問(wèn)題，而是你挑工作甚至帶工資挑，因?yàn)椴还饽憧梢宰鲞@些，許多關(guān)聯(lián)的工作，比如驅(qū)動(dòng)開(kāi)發(fā)、DNS解析、反病毒、通信安全、虛擬化技術(shù)、內(nèi)核剪裁都可以勝任了，甚至可以自己開(kāi)發(fā)新的操作系統(tǒng)。</div>
<div>話(huà)說(shuō)回來(lái)，我們目前的大環(huán)境，C語(yǔ)言絕大多數(shù)大學(xué)的教學(xué)定位，僅部分院校除了C語(yǔ)言課程外，還應(yīng)該開(kāi)設(shè)數(shù)據(jù)結(jié)構(gòu)、計(jì)算機(jī)體系結(jié)構(gòu)、編譯器原理、操作系統(tǒng)原理等課程，而這些課程中有些學(xué)校僅保留數(shù)據(jù)結(jié)構(gòu)，甚至數(shù)據(jù)結(jié)構(gòu)也不開(kāi)設(shè)了，因此把C語(yǔ)言?xún)H僅定位為編程啟蒙，熟悉面向過(guò)程思想、熟悉C語(yǔ)言語(yǔ)法即可。</div>
<div>學(xué)校更希望的是通過(guò)C語(yǔ)言學(xué)習(xí)后進(jìn)而學(xué)習(xí)C++或者java或者其他高級(jí)語(yǔ)言進(jìn)而可以更實(shí)用的做出東西來(lái)從而好找工作，再急于求成一些的話(huà)，干脆C語(yǔ)言也不學(xué)了，零基礎(chǔ)直接學(xué)java或者C++其他高級(jí)語(yǔ)言。這其實(shí)也是專(zhuān)業(yè)的科班到培訓(xùn)機(jī)構(gòu)的區(qū)別，沒(méi)有白學(xué)的知識(shí)，到底有沒(méi)有用大家多想想。</div>
</div>
<br>
<div>
<div>所以從目前整體大環(huán)境看，你如果在重點(diǎn)院校，計(jì)算機(jī)/軟件的科班專(zhuān)業(yè)，那么你應(yīng)該好好搞這些真材實(shí)料的東西，不要浪費(fèi)國(guó)家的教學(xué)資源，因?yàn)槟愠袚?dān)了國(guó)家未來(lái)IT軟件行業(yè)的未來(lái)；如果你想從事軟件研發(fā)/開(kāi)發(fā)，那么你至少也要學(xué)習(xí)好數(shù)據(jù)結(jié)構(gòu)，因?yàn)槟阋獎(jiǎng)?chuàng)造要?jiǎng)?chuàng)作，而不是復(fù)制黏貼代碼的搬運(yùn)工。如果你僅僅想混口飯吃，直接學(xué)個(gè)能出成果的技術(shù)就行了。</div>
<div>最后在看看普遍同學(xué)學(xué)C語(yǔ)言的目的，專(zhuān)升本、考研、二級(jí)C語(yǔ)言，以需求為導(dǎo)向的教程、大多是理論題、刷題、考試為主，因此項(xiàng)目類(lèi)偏難的C語(yǔ)言資源就少很多，自然很少看到圖形化的東西。當(dāng)然，Dotcpp作為C語(yǔ)言的堅(jiān)定支持者，今后也會(huì)加強(qiáng)這里的編程資源，從而給大家提供足夠的資源支持。</div>
<div>我們學(xué)習(xí)C語(yǔ)言的時(shí)候因?yàn)槭沁x擇控制臺(tái)程序，所以你的程序都是在黑窗口下運(yùn)行，如果寫(xiě)windows應(yīng)用程序則沒(méi)有這個(gè)黑窗口了，依舊是C語(yǔ)言的語(yǔ)法，大家可以了解。</div>
<div>如果是純C語(yǔ)言的圖形化開(kāi)發(fā)，按大家的所處的階段，可以考慮用TurBoC編譯器支持的graphics圖形接口函數(shù)或者VC6安裝easyX庫(kù)來(lái)實(shí)現(xiàn)圖形化的開(kāi)發(fā)，可以完成一些游戲的開(kāi)發(fā)，比如五子棋、俄羅斯方塊、彈珠游戲、貪吃蛇等等，都是圖形化可交互的，在高級(jí)一些，考慮到圖片刷新，專(zhuān)業(yè)性的提升，則可以考慮用MFC，MFC或者QT。</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
設(shè)置div.test1的columns：300px 4; 也就是每列寬度300px,一共有4列，但是容器的為900px，小于1200px，所以會(huì)自動(dòng)減 少列數(shù)，適當(dāng)增加列寬來(lái)以最合適的方式來(lái)顯示。而div.test2沒(méi)有設(shè)置容器寬度，列寬設(shè)置為300px，列數(shù)設(shè)置為4列，會(huì)有限考慮列數(shù)去優(yōu)化列寬。
注意：設(shè)置div.test1的columns：300px 4; 也就是每列寬度300px,一共有4列，但是容器的為900px，小于1200px，所以會(huì)自動(dòng)減 少列數(shù)，適當(dāng)增加列寬來(lái)以最合適的方式來(lái)顯示。而div.test2沒(méi)有設(shè)置容器寬度，列寬設(shè)置為300px，列數(shù)設(shè)置為4列，會(huì)有限考慮列數(shù)去優(yōu)化列寬。
2. column-width 設(shè)置列寬
語(yǔ)法：
columns-width：<length> | auto默認(rèn);
: 用長(zhǎng)度值來(lái)定義列寬，不允許負(fù)值；auto：根據(jù)列數(shù)自定分配寬度。
雖說(shuō)設(shè)置了列寬，但還是會(huì)根據(jù)列數(shù)和容器寬度來(lái)自動(dòng)分配寬度。
PS：每列中的空隙為14像素。
3. column-count 設(shè)置列數(shù)
設(shè)置或檢索對(duì)象的列數(shù)。
語(yǔ)法：
column-count：<integer> | auto;
參數(shù)說(shuō)明：: 用整數(shù)值來(lái)定義列數(shù)，不允許負(fù)值；auto：根據(jù)列寬自定分配寬度。
4. column-gap 設(shè)置列之間的間隙
設(shè)置或檢索對(duì)象的列與列之間的間隙。
語(yǔ)法：
column-gap：<length> | normal;
參數(shù)說(shuō)明：用長(zhǎng)度值來(lái)定義列與列之間的間隙（不是字與字間的距離，而是段落和段落間的距離），不允許負(fù)值；normal：與字體大小相同。normal間隙取決于字體大小。和字體大小相等。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多列布局</title>
<style>
*{margin: 0;padding: 0;}
div.test1,div.test2,div.test3{
border: 20px solid rgba(0,0,0.3);
}
div.test1>div,div.test2>div,div.test3>div{
background-color: rgb(0,0,0,.3);
margin-top: 20px;
}
div.test1{
width: 900px;
columns: 300px 4;
font-size: 14px;
}
div.test2{
columns: 400px;
font-size: 30px;
}
div.test3{
column-count: 4;
column-gap: 14px;
}
</style>
</head>
<body>
<h3>字體：14px，沒(méi)有設(shè)置間隙：默認(rèn)和字體一樣14px;</h3>
<div>
<div>很多學(xué)習(xí)過(guò)C語(yǔ)言的朋友在回過(guò)頭看C語(yǔ)言的時(shí)候一定會(huì)有這樣的疑問(wèn)，為啥C語(yǔ)言都在黑窗口下運(yùn)行？不是計(jì)算三角形面積就是打印水仙花數(shù)這樣的程序？ 當(dāng)初說(shuō)好的編程怎么怎么厲害，那些酷炫的軟件怎么還是不會(huì)做，到頭來(lái)都是一些小兒科！為什么呢。</div>
<div>第一，C語(yǔ)言的發(fā)明定位，從C語(yǔ)言的發(fā)明人丹尼斯里奇的發(fā)明之初定位，我們知道它就是要做系統(tǒng)的，本身就不是做圖形化軟件的，應(yīng)該是包括開(kāi)發(fā)驅(qū)動(dòng)、做系統(tǒng)內(nèi)核、文件管理、內(nèi)管管理、網(wǎng)絡(luò)通信等等一系列核心的。</div>
<div>第二、國(guó)內(nèi)普遍的教學(xué)定位，話(huà)說(shuō)回來(lái)，我們目前的大環(huán)境，C語(yǔ)言絕大多數(shù)大學(xué)的教學(xué)定位，僅部分院校除了C語(yǔ)言課程外，還應(yīng)該開(kāi)設(shè)數(shù)據(jù)結(jié)構(gòu)、計(jì)算機(jī)體系結(jié)構(gòu)、編譯器原理、操作系統(tǒng)原理等課程。</div>
<div>此外，萬(wàn)安縣紀(jì)委監(jiān)委已對(duì)縣教育體育局、縣市場(chǎng)和質(zhì)量監(jiān)督管理局、澗田鄉(xiāng)政府等相關(guān)單位和人員履職盡責(zé)情況進(jìn)行了調(diào)查，并對(duì)監(jiān)管不力的縣教育體育局、縣市場(chǎng)和質(zhì)量監(jiān)督管理局、縣農(nóng)業(yè)局、縣衛(wèi)計(jì)委、澗田鄉(xiāng)政府等相關(guān)單位責(zé)任人分別進(jìn)行了立案審查等處理。同時(shí)，縣紀(jì)委監(jiān)委對(duì)學(xué)生營(yíng)養(yǎng)餐的招投標(biāo)工作進(jìn)行調(diào)查，待調(diào)查結(jié)果出來(lái)后第一時(shí)間向社會(huì)公布。</div>
</div>
<br>
<h3>字體：30px,沒(méi)有設(shè)置間隙：默認(rèn)和字體一樣30px;</h3>
<div>
<div>很多學(xué)習(xí)過(guò)C語(yǔ)言的朋友在回過(guò)頭看C語(yǔ)言的時(shí)候一定會(huì)有這樣的疑問(wèn)，為啥C語(yǔ)言都在黑窗口下運(yùn)行？不是計(jì)算三角形面積就是打印水仙花數(shù)這樣的程序？ 當(dāng)初說(shuō)好的編程怎么怎么厲害，那些酷炫的軟件怎么還是不會(huì)做，到頭來(lái)都是一些小兒科！為什么呢。</div>
<div>第一，C語(yǔ)言的發(fā)明定位，從C語(yǔ)言的發(fā)明人丹尼斯里奇的發(fā)明之初定位，我們知道它就是要做系統(tǒng)的，本身就不是做圖形化軟件的，應(yīng)該是包括開(kāi)發(fā)驅(qū)動(dòng)、做系統(tǒng)內(nèi)核、文件管理、內(nèi)管管理、網(wǎng)絡(luò)通信等等一系列核心的。</div>
<div>第二、國(guó)內(nèi)普遍的教學(xué)定位，話(huà)說(shuō)回來(lái)，我們目前的大環(huán)境，C語(yǔ)言絕大多數(shù)大學(xué)的教學(xué)定位，僅部分院校除了C語(yǔ)言課程外，還應(yīng)該開(kāi)設(shè)數(shù)據(jù)結(jié)構(gòu)、計(jì)算機(jī)體系結(jié)構(gòu)、編譯器原理、操作系統(tǒng)原理等課程。</div>
<div>第三、C語(yǔ)言完全可以做，但很少直接用C語(yǔ)言做，我們學(xué)習(xí)C語(yǔ)言的時(shí)候因?yàn)槭沁x擇控制臺(tái)程序，所以你的程序都是在黑窗口下運(yùn)行，如果寫(xiě)windows應(yīng)用程序則沒(méi)有這個(gè)黑窗口了，依舊是C語(yǔ)言的語(yǔ)法，大家可以了解。</div>
</div>
<br>
<h3>字體：30px,設(shè)置間隙：14px;</h3>
<div>
<div>很多學(xué)習(xí)過(guò)C語(yǔ)言的朋友在回過(guò)頭看C語(yǔ)言的時(shí)候一定會(huì)有這樣的疑問(wèn)，為啥C語(yǔ)言都在黑窗口下運(yùn)行？不是計(jì)算三角形面積就是打印水仙花數(shù)這樣的程序？ 當(dāng)初說(shuō)好的編程怎么怎么厲害，那些酷炫的軟件怎么還是不會(huì)做，到頭來(lái)都是一些小兒科！為什么呢。</div>
<div>第一，C語(yǔ)言的發(fā)明定位，從C語(yǔ)言的發(fā)明人丹尼斯里奇的發(fā)明之初定位，我們知道它就是要做系統(tǒng)的，本身就不是做圖形化軟件的，應(yīng)該是包括開(kāi)發(fā)驅(qū)動(dòng)、做系統(tǒng)內(nèi)核、文件管理、內(nèi)管管理、網(wǎng)絡(luò)通信等等一系列核心的。</div>
<div>第二、國(guó)內(nèi)普遍的教學(xué)定位，話(huà)說(shuō)回來(lái)，我們目前的大環(huán)境，C語(yǔ)言絕大多數(shù)大學(xué)的教學(xué)定位，僅部分院校除了C語(yǔ)言課程外，還應(yīng)該開(kāi)設(shè)數(shù)據(jù)結(jié)構(gòu)、計(jì)算機(jī)體系結(jié)構(gòu)、編譯器原理、操作系統(tǒng)原理等課程。</div>
<div>第三、C語(yǔ)言完全可以做，但很少直接用C語(yǔ)言做，我們學(xué)習(xí)C語(yǔ)言的時(shí)候因?yàn)槭沁x擇控制臺(tái)程序，所以你的程序都是在黑窗口下運(yùn)行，如果寫(xiě)windows應(yīng)用程序則沒(méi)有這個(gè)黑窗口了，依舊是C語(yǔ)言的語(yǔ)法，大家可以了解。</div>
</div>
</body>
</html>運(yùn)行結(jié)果：
5. column-rule 設(shè)置列與列之間的邊框
語(yǔ)法：
column-rule：<column-rule-width> || <column-rule-style> || <column-rule-color>
參數(shù)說(shuō)明
● column-rule-width 邊框的厚度
● column-rule-style 邊框的樣式
● column-rule-color 邊框的顏色
PS：特別注意，如果列與列之間的間隙 < 邊框的寬度，這就會(huì)出現(xiàn)列蓋在邊框上的情況。
（1）column-rule-width
設(shè)置或檢索對(duì)象的列與列之間的邊框厚度。
語(yǔ)法：
column-rule-width：<length> | thin | medium | thick;
參數(shù)說(shuō)明
● length：用長(zhǎng)度值來(lái)定義邊框的厚度，不允許負(fù)值；
● medium：定義默認(rèn)厚度的邊框；
● thin：定義比默認(rèn)厚度細(xì)的邊框；
● thick：定義比默認(rèn)厚度粗的邊框。
（2）column-rule-style 設(shè)置邊框的樣式
設(shè)置或檢索對(duì)象的列與列之間的邊框樣式。
語(yǔ)法
column-rule-style：none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset；
參數(shù)說(shuō)明
● none：無(wú)輪廓；
● hidden：隱藏邊框；
● dotted：點(diǎn)狀輪廓；
● dashed：虛線(xiàn)輪廓；
● solid：實(shí)線(xiàn)輪廓；
● double：雙線(xiàn)輪廓；
● groove：3D凹槽輪廓；
● ridge：3D凸槽輪廓；
● inset：3D凹邊輪廓；
● outset：3D凸邊輪廓。
注意：如果是有兩條線(xiàn)的輪廓，width將會(huì)是包括了兩條線(xiàn)的距離。
（3）column-rule-color 設(shè)置邊框顏色
設(shè)置或檢索對(duì)象的列與列之間的邊框顏色。
語(yǔ)法：
column-rule-color：<color>;
參數(shù)說(shuō)明：指定顏色。沒(méi)有寬度沒(méi)有樣式，顏色將會(huì)失效。默認(rèn)黑色。
6. column-span 設(shè)置元素跨所有列
設(shè)置或檢索對(duì)象元素是否橫跨所有列。
語(yǔ)法：
column-span：none | all；
參數(shù)說(shuō)明：none：不跨列；all：橫跨所有列。
不是像其他column屬性用在容器當(dāng)中，而是用在容器里的子元素當(dāng)中。
7. column-fill 設(shè)置列與列的高度統(tǒng)一（目前主流瀏覽器都不兼容）
設(shè)置或檢索對(duì)象所有列的高度是否統(tǒng)一。
語(yǔ)法：
column-fill: auto默認(rèn) | balance;
參數(shù)說(shuō)明：auto：列高度自適應(yīng)內(nèi)容；balance：所有列的高度以其中最高的一列統(tǒng)一。
主流瀏覽器都不兼容此屬性。
8. column-break 設(shè)置換行
● column-break-before 設(shè)置指定對(duì)象前是否換行。
● column-break-after 設(shè)置指定對(duì)象后是否換行。
● column-break-inside 設(shè)置對(duì)象內(nèi)部是否換行
（1）column-break-before
設(shè)置或檢索對(duì)象之前是否斷行。
語(yǔ)法：
column-break-before：auto | always | avoid；
參數(shù)說(shuō)明：auto：既不強(qiáng)迫也不禁止在元素之前斷行并產(chǎn)生新列；always：總是在元素之前斷行并產(chǎn)生新列；avoid：避免在元素之前斷行并產(chǎn)生新列。
（2）column-break-after
設(shè)置或檢索對(duì)象之后是否斷行。
語(yǔ)法：
column-break-after：auto | always | avoid；
參數(shù)說(shuō)明：auto：既不強(qiáng)迫也不禁止在元素之后斷行并產(chǎn)生新列；always：總是在元素之后斷行并產(chǎn)生新列；avoid：避免在元素之后斷行并產(chǎn)生新列。
（3）column-break-inside屬性
設(shè)置或檢索對(duì)象內(nèi)部是否斷行。
語(yǔ)法：
column-break-inside：auto默認(rèn) | avoid
C語(yǔ)言網(wǎng)提供由在職研發(fā)工程師或ACM藍(lán)橋杯競(jìng)賽優(yōu)秀選手錄制的視頻教程，并配有習(xí)題和答疑，點(diǎn)擊了解：
一點(diǎn)編程也不會(huì)寫(xiě)的：零基礎(chǔ)C語(yǔ)言學(xué)練課程
解決困擾你多年的C語(yǔ)言疑難雜癥特性的C語(yǔ)言進(jìn)階課程
從零到寫(xiě)出一個(gè)爬蟲(chóng)的Python編程課程
只會(huì)語(yǔ)法寫(xiě)不出代碼？手把手帶你寫(xiě)100個(gè)編程真題的編程百練課程
信息學(xué)奧賽或C++選手的 必學(xué)C++課程
藍(lán)橋杯ACM、信息學(xué)奧賽的必學(xué)課程：算法競(jìng)賽課入門(mén)課程
手把手講解近五年真題的藍(lán)橋杯輔導(dǎo)課程