為了能在web頁面中方便實現類似報紙、雜誌那種多列排版的布局，w3c特意給css3增加了乙個多列布局模組（css multi column layout module）。它主要應用在文字的多列布局方面，這種布局在報紙和雜誌上都使用了幾十年了，但要在web頁面上實現這樣的效果還是有相當大的難度，慶幸的是，css3的多列布局可以輕鬆實現。接下來咱們一起學習多列布局相關的知識。
多列布局
一、多列布局columns 語法：
columns： ||
多列布局columns屬性引數主要就兩個屬性引數：列寬和列數。
column-width:主要用來定義多列中每列的寬度
column-count：主要用來定義多列中的列數
相容性：到目前為止大部分主流瀏覽器都對其支援：
使用：要顯示2欄顯示，每欄寬度為200px，**為：
columns: 200px 2;
**實現：
"column">
畫畫的baby、畫畫的baby、賓士的小野馬和帶刺的玫瑰、我說不開心也拍手、拍走傷痕累累、用乾澀的眼淚、釀出香醇肥美、
雖比茅台般辣、卻有溫柔的heart、開心就拍手、一給我裡giao giao
畫畫的baby、畫畫的baby、賓士的小野馬和帶刺的玫瑰、我說不開心也拍手、拍走傷痕累累、用乾澀的眼淚、釀出香醇肥美、
雖比茅台般辣、卻有溫柔的heart、開心就拍手、一給我裡giao giao
column-width的使用和css中的width屬性一樣，不過不同的是，column-width屬性在定義元素列寬的時候，既可以單獨使用，也可以和多列屬性中其他屬性配合使用。其基本語法如下所示 ；
column-width: auto |
取值說明：
auto：如果column-width設定值為auto或者沒有顯式的設定值時，元素多列的列寬將由其他屬性來決定，比如前面的示例就是由列數column-count來決定。
length：使用固定值來設定元素列的寬度，其主要是由數值和長度單位組成，不過其值只能是正值，不能為負值。
使用：column-width:100px
三、列數column-count
column-count屬性主要用來給元素指定想要的列數和允許的最大列數。其語法規則：
column-count：auto |
取值說明：
auto：此值為column-count的預設值，表示元素只有一列，其主要依靠瀏覽器計算自動設定。
integer：此值為正整數值，主要用來定義元素的列數，取值為大於0的整數，負值無效。
使用：column-count：4
總結：columns是column-width和column-count的總寫。
四、列間距column-gap
column-gap主要用來設定列與列之間的間距，其語法規則如下：
column-gap: normal ||
取值說明：
normal：預設值，默值為1em（如果你的字型大小是px，其預設值為你的font-size值）。
length：此值用來設定列與列之間的距離，其可以使用px,em單位的任何整數值，但不能是負值。
使用：column-gap: 2em;
五、列表邊框column-rule
column-rule主要是用來定義列與列之間的邊框寬度、邊框樣式和邊框顏色。簡單點說，就有點類似於常用的border屬性。但column-rule是不占用任何空間位置的，在列與列之間改變其寬度不會改變任何列的位置。
語法規則：
column-rule:||
取值說明：
column-rule-style：類似於border-style屬性，主要用來定義列邊框樣式，其預設值為「none」。column-rule-style屬性值與border-style屬值相同，包括none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color：類似於border-color屬性，主要用來定義列邊框顏色，其預設值為前景色color的值，使用時相當於border-color。column-rule-color接受所有的顏色。如果不希望顯示顏色，也可以將其設定為transparent(透明色)。
使用：column-rule: 2px dotted green;
六、跨列設定column-span
column-span主要用來定義乙個分列元素中的子元素能跨列多少。column-width、column-count等屬效能讓一元素分成多列，不管裡面元素如何排放順序，他們都是從左向右的放置內容，但有時我們需要其中一段內容或乙個標題不進行分列，也就是橫跨所有列，此時column-span就可以輕鬆實現，此屬性的語法如下。
column-span: none | all
取值說明：
none：此值為column-span的預設值，表示不跨越任何列。
all：這個值跟none值剛好相反，表示的是元素跨越所有列，並定位在列的ｚ軸之上。
使用：column-span:all;
七、填充列column-fill
瀏覽器支援：主流瀏覽器都不支援 column-fill 屬性。
語法：column-fill: balance|auto;
取值說明：
balance：對列進行協調。瀏覽器應對列長度的差異進行最小化處理。
auto：按順序對列進行填充，列長度會各有不同。
如何讓粉絲甘心為你的微博文章買單？
2014年8月，新浪微博啟動了 打賞 功能公測，讀者可以下面的打賞按鈕對作者進行打賞。現在呢，它已經向每個普通使用者開放了，也就是是說每個人都可以設定打賞了，只要你有自己的獨特的魅力，有自己忠誠的粉絲，那也是有機會獲得粉絲的青睞的。那麼該如何去做呢？我們首先來想乙個問題，為什麼粉絲要打賞你呢？我想那...
如何讓你的文章快速被百度收錄
在這個網路覆蓋大江南北的時代，不管我們是做站還是做部落格推廣自己的專案，發表的文章能被搜尋引擎快速收錄，都會帶來不菲的高質量流量，但是要讓文章被快速收錄，單靠一腔蠻熱血是不行的，還需要進行搜尋引擎優化方能奏效，下面本人就自己經驗給大家分享下如何讓你的文章快速被收錄的詳細步驟，從構思到推廣！第1步 寫...
如何讓你的文章更有可讀性，讓大家分享點讚收藏？
優化標題只是為了讓讀者在資訊流中快速注意到你，而展示你真正實力的則是文章內容本身。我們經常在部落格上看到一些技術文章，通篇都是大段大段程式碼，截個圖出個結果，就完事了。大家都是程式設計師，固然覺得程式碼是重要載體，但文章畢竟是文章，可讀性還是很重要的。如果我們決定寫一篇可以拿得出手的技術文章，給大家...