從這里開(kāi)始我們學(xué)習(xí)一下CSS3的布局篇
多列布局——Columns
為了能在Web頁(yè)面中方便實(shí)現(xiàn)類似報(bào)紙敦第、雜志那種多列排版的布局心俗，W3C特意給CSS3增加了一個(gè)多列布局模塊（CSS Multi Column Layout Module）墓毒。它主要應(yīng)用在文本的多列布局方面，這種布局在報(bào)紙和雜志上都使用了幾十年了撵儿，但要在Web頁(yè)面上實(shí)現(xiàn)這樣的效果還是有相當(dāng)大的難度渤闷，慶幸的是，CSS3的多列布局可以輕松實(shí)現(xiàn)含潘。接下來(lái)咱們一起學(xué)習(xí)多列布局相關(guān)的知識(shí)饲做。
語(yǔ)法：
columns：<column-width> || <column-count>
多列布局columns屬性參數(shù)主要就兩個(gè)屬性參數(shù)：列寬和列數(shù)。
| 參數(shù) | 參數(shù)說(shuō)明 |
|---|---|
| <column-width> | 主要用來(lái)定義多列中每列的寬度 |
| <column-count> | 主要用來(lái)定義多列中的列數(shù) |
舉例：要顯示2欄顯示调鬓，每欄寬度為200px艇炎，代碼為：
columns: 200px 2;
多列布局——column-width
column-width的使用和CSS中的width屬性一樣，不過(guò)不同的是腾窝，column-width屬性在定義元素列寬的時(shí)候缀踪，既可以單獨(dú)使用，也可以和多列屬性中其他屬性配合使用虹脯。其基本語(yǔ)法如下所示 驴娃；
column-width: auto | <length>
取值說(shuō)明：
| 屬性值 | 說(shuō)明 |
|---|---|
| auto | 如果column-width設(shè)置值為auto或者沒(méi)有顯式的設(shè)置值時(shí)，元素多列的列寬將由其他屬性來(lái)決定循集，比如前面的示例就是由列數(shù)column-count來(lái)決定唇敞。 |
| <length> | 使用固定值來(lái)設(shè)置元素列的寬度，其主要是由數(shù)值和長(zhǎng)度單位組成，不過(guò)其值只能是正值疆柔，不能為負(fù)值咒精。 |
多列布局——column-count
column-count屬性主要用來(lái)給元素指定想要的列數(shù)和允許的最大列數(shù)。其語(yǔ)法規(guī)則：
column-count：auto | <integer>
取值說(shuō)明
| 屬性值 | 屬性值說(shuō)明 |
|---|---|
| auto | 此值為column-count的默認(rèn)值旷档，表示元素只有一列模叙，其主要依靠瀏覽器計(jì)算自動(dòng)設(shè)置。 |
| <integer> | 此值為正整數(shù)值鞋屈，主要用來(lái)定義元素的列數(shù)范咨，取值為大于0的整數(shù)，負(fù)值無(wú)效厂庇。 |
例如：將列分成四列顯示渠啊，代碼如下：
column-count:4;
列間距column-gap
column-gap主要用來(lái)設(shè)置列與列之間的間距，其語(yǔ)法規(guī)則如下：
column-gap: normal || <length>
取值說(shuō)明：
| 屬性值 | 屬性說(shuō)明 |
|---|---|
| normal | 默認(rèn)值权旷，默值為1em（如果你的字號(hào)是px替蛉，其默認(rèn)值為你的font-size值）。 |
| <length> | 此值用來(lái)設(shè)置列與列之間的距離炼杖，其可以使用px,em單位的任何整數(shù)值灭返，但不能是負(fù)值。 |
例如：將內(nèi)容分三列顯列坤邪，列與列之間的間距為2em熙含，實(shí)現(xiàn)代碼為：
column-count: 3;
column-gap: 2em;
列表邊框column-rule
column-rule主要是用來(lái)定義列與列之間的邊框?qū)挾取⑦吙驑邮胶瓦吙蝾伾Х摹：?jiǎn)單點(diǎn)說(shuō)怎静，就有點(diǎn)類似于常用的border屬性。但column-rule是不占用任何空間位置的黔衡，在列與列之間改變其寬度不會(huì)改變?nèi)魏瘟械奈恢谩?/p>
語(yǔ)法規(guī)則：
column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>
取值說(shuō)明：
| 屬性值 | 屬性值說(shuō)明 |
|---|---|
| column-rule-width | 類似于border-width屬性蚓聘，主要用來(lái)定義列邊框的寬度，其默認(rèn)值為“medium”盟劫，column-rule-width屬性接受任意浮點(diǎn)數(shù)夜牡，但不接收負(fù)值。但也像border-width屬性一樣侣签，可以使用關(guān)鍵詞：medium塘装、thick和thin。 |
| column-rule-style | 類似于border-style屬性影所，主要用來(lái)定義列邊框樣式蹦肴，其默認(rèn)值為“none”。column-rule-style屬性值與border-style屬值相同猴娩，包括none阴幌、hidden勺阐、dotted、dashed矛双、solid渊抽、double、groove议忽、ridge腰吟、inset、outset徙瓶。 |
| column-rule-color | 類似于border-color屬性，主要用來(lái)定義列邊框顏色嫉称，其默認(rèn)值為前景色color的值侦镇，使用時(shí)相當(dāng)于border-color。column-rule-color接受所有的顏色织阅。如果不希望顯示顏色壳繁，也可以將其設(shè)置為transparent(透明色) |
例如：為了能有效區(qū)分欄目列之間的關(guān)系，可以為其設(shè)置一個(gè)列邊框荔棉，代碼為：
column-rule: 2px dotted green;
跨列設(shè)置column-span
column-span主要用來(lái)定義一個(gè)分列元素中的子元素能跨列多少闹炉。column-width、column-count等屬性能讓一元素分成多列润樱，不管里面元素如何排放順序渣触，他們都是從左向右的放置內(nèi)容，但有時(shí)我們需要基中一段內(nèi)容或一個(gè)標(biāo)題不進(jìn)行分列壹若，也就是橫跨所有列嗅钻，此時(shí)column-span就可以輕松實(shí)現(xiàn)，此屬性的語(yǔ)法如下店展。
column-span: none | all
取值說(shuō)明
| 屬性值 | 屬性值說(shuō)明 |
|---|---|
| none | 此值為column-span的默認(rèn)值养篓，表示不跨越任何列。 |
| all | 這個(gè)值跟none值剛好相反赂蕴，表示的是元素跨越所有列柳弄，并定位在列的Ｚ軸之上。 |
跨越所有列：
column-span:all;
Flex布局
現(xiàn)在我用的布局方式就是Flex布局概说，非常好用和強(qiáng)大碧注，加上SCSS之后，工具效率提高了很多席怪，大家可以看
和
