屬性太多，記不完，因此之前一直對(duì)于頁(yè)面都是拼湊，就像堆積木，出了問題就加margin啊,padding什么的強(qiáng)行調(diào)好，完全沒有布局的概念，最近才慢慢意識(shí)到網(wǎng)頁(yè)是要布的不是拼的。拼起來好累QAQ。
本來是在看flex的帖子，突然瞥見columns，這個(gè)詞好像沒怎么看過啊，一查，這個(gè)不起眼的屬性原來挺牛B的啊，不管是文字還是div都能好好的分成幾列，比自己還要加float,加邊距輕松多了，下面就開始了解。
columns包括column-width和column-count兩個(gè)屬性，分別用來設(shè)置列寬和有幾列。
1.3列文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.newspaper {
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
</style>
</head>
<body>
<div class="newspaper">
人民網(wǎng)北京2月24日電 (記者 劉陽(yáng))國(guó)家發(fā)展改革委近日發(fā)出通知，決定自2月25日零時(shí)起將汽、柴油價(jià)格每噸分別提高300元和290元，折算到90號(hào)汽油和0號(hào)柴油（全國(guó)平均）每升零售價(jià)格分別提高0.22元和0.25元。
此次國(guó)內(nèi)成品油價(jià)格調(diào)整幅度，是按照現(xiàn)行國(guó)內(nèi)成品油價(jià)格形成機(jī)制，根據(jù)國(guó)際市場(chǎng)油價(jià)變化情況確定的。去年11月16日國(guó)內(nèi)成品油價(jià)格調(diào)整以來，受市場(chǎng)預(yù)期歐美經(jīng)濟(jì)復(fù)蘇前景向好以及中東局勢(shì)持續(xù)動(dòng)蕩等因素影響，國(guó)際市場(chǎng)原油價(jià)格先抑后揚(yáng)，2月上旬WTI和布倫特原油期貨價(jià)格再次回升至每桶95美元和115美元以上。雖然近兩日價(jià)格有所回落，但國(guó)內(nèi)油價(jià)掛鉤的國(guó)際市場(chǎng)三種原油連續(xù)22個(gè)工作日移動(dòng)平均價(jià)格上漲幅度已超過4%，達(dá)到國(guó)內(nèi)成品油價(jià)格調(diào)整的邊界條件。
通知指出，這次成品油調(diào)價(jià)后，國(guó)家將按照已建立的補(bǔ)貼機(jī)制，繼續(xù)對(duì)種糧農(nóng)民、漁業(yè)（含遠(yuǎn)洋漁業(yè)）、林業(yè)、城市公交、農(nóng)村道路客運(yùn)（含島際和農(nóng)村水路客運(yùn)）等給予補(bǔ)貼。同時(shí)，為保證市場(chǎng)物價(jià)基本穩(wěn)定，防止連鎖漲價(jià)，對(duì)與居民生活密切相關(guān)的鐵路客運(yùn)、城市公交、農(nóng)村道路客運(yùn)（含島際和農(nóng)村水路客運(yùn)）價(jià)格不作調(diào)整。
通知要求，中石油、中石化、中海油三大公司要組織好成品油生產(chǎn)和調(diào)運(yùn)，保持合理庫(kù)存，加強(qiáng)綜合協(xié)調(diào)和應(yīng)急調(diào)度，保障成品油供應(yīng)。各級(jí)價(jià)格主管部門要加大市場(chǎng)監(jiān)督檢查力度，依法查處不執(zhí)行國(guó)家價(jià)格政策，以及囤積居奇、造謠惑眾、合謀漲價(jià)、搭車漲價(jià)等違法行為，維護(hù)正常市場(chǎng)秩序。
</div>
</body>
</html>
效果
R6ASS`8%V5UF4B73@_@R~XR.png
2.3列div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#newspaper {
columns: 100px 3;
-webkit-columns: 100px 3;
-moz-columns: 100px 3;
}
.div1,.div2,.div3 {
height: 100px;
}
.div1 {
background: red;
}
.div2 {
background: blue;
}
.div3 {
background: green;
}
</style>
</head>
<body>
<div id="newspaper">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>
</body>
</html>
效果
image.png
還能設(shè)置列寬
-moz-column-gap:30px; /* Firefox */
-webkit-column-gap:30px; /* Safari and Chrome */
column-gap:30px;
以及列之間的樣式column-rule(包括column-rule-width column-rule-style column-rule-color)設(shè)置列與列之間間隙中間的線的樣式
-moz-column-rule:4px outset #ff0000; /* Firefox */
-webkit-column-rule:4px outset #ff0000; /* Safari and Chrome */
column-rule:4px outset #ff0000;
{4I2HSQHWWJ~T`%D`FQA26E.png
tips:column-rule-style的可取值如下就不多說了
image.png
據(jù)測(cè)試，columns還能自適應(yīng)寬度不過當(dāng)寬度過小時(shí)會(huì)出問題，并且由于是比較新的屬性所以Internet Explorer 9 以及更早版本的瀏覽器不支持 。。。。。。
