column-gap就相當(dāng)于兩列之間的空白處，而column-rule就相當(dāng)于一條分隔線，換句話說呢？column-gap就像我們web頁面中的margin一樣，而column-rule就類似于border，不過他們只是存在相鄰兩列之間

另外column-gap和column-rule是有高度的，其高度和列等高，最大區(qū)別是，column-gap沒有任何樣式，而且他在列與列之間占有一定的空間，而column-rule是有一定的樣式，類似于border一樣（只是能用的相當(dāng)?shù)纳?#xff09;，其在列與列之間不占有任何空間位置

一. 列間距column-gap

語法：column-gap: normal || <length>

取值說明：

- normal為默認(rèn)值，默值為1em（如果你的字號(hào)是px佇值，其默認(rèn)值為你的font-size值）

- <length>:此值用來設(shè)置列與列之間的距離，其可以使用px,em單位的任何整數(shù)值，但不能是負(fù)值

上面這個(gè)實(shí)例是在column-width為auto下，我們把元素分成兩列，并把列與列的間距定為20px，從效果圖中，明顯可以看出，column-gap將相鄰兩列以20px的寬度隔開了。下面在這個(gè)例子基礎(chǔ)上加上一個(gè)列的寬度值

從效果中很容易得到答案，就是容器無法顯示兩列。因?yàn)樵乜倢挾仁?00px，現(xiàn)在每列定在193px，總共分成了2列，在前面的例子大家都知道，column-gap為normal時(shí)剛好正常以2列并且每列為193px的寬度顯示。可現(xiàn)在加上一個(gè)列間距20px。這是一個(gè)很簡(jiǎn)單的數(shù)學(xué)題，多列各糝數(shù)值之各超過多列元素總寬度，以至于元素?zé)o法按參數(shù)值進(jìn)行布局

注：這里說這么多，無非想告訴大家column-gap可以用來改變相鄰列之間距離，但在多列元素同時(shí)設(shè)置了column-width時(shí)，column-gap與column-width之和大于多列元素總寬度時(shí)，會(huì)導(dǎo)至列被撐破，并以第一列顯示，此時(shí)的列寬自動(dòng)調(diào)節(jié)到元素的總寬度

二. column-rule

在你的腦海中你可以把column-rule當(dāng)作元素中的border來理解，因?yàn)閏olumn-rule同樣就具有border類似的屬性：寬度column-rule-width，樣式column-rule-style，顏色column-rule-color，不同的是border占有一定的空間位置，而column-rule不占有任何空間位置

語法：column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>

取值說明：

- column-rule-width：此值是用來定義column-rule的寬度，默認(rèn)值為“medium”，不允許取負(fù)值。類似于border-width屬性

- column-rule-style：此值是用來定義column-rule的樣式，其默認(rèn)值為“none”，如果取值為默認(rèn)值時(shí)，column-rule-width值將等于“0”，column-rule-style樣式種類和border-style一樣

- column-rule-color：此值用來定義column-rule的顏色，其默認(rèn)值為前景色color的值，使用相當(dāng)于border-color，如果不希望顯示顏色，也可以將其設(shè)置為transparent(透明色)

上面是一個(gè)非常簡(jiǎn)單的實(shí)例，下面我想在上面的例子基礎(chǔ)上，稍作一下改變，給元素的column-rule-width變大，并同時(shí)改變一下元素的color和background值

column-rule-width增大并不會(huì)影響列的布局，只會(huì)將其往元素兩邊擴(kuò)展，直到元素邊緣為止，同時(shí)也再一次說明column-rule是不占有任何空間位置的；其二，column-rule在z軸上是介于background和content之間的(所以內(nèi)容文字顯示了，而背景的黃色沒有顯示)

總結(jié)：column-gap就類似于元素中的margin和padding，具有一定的空間位置，當(dāng)其值過大時(shí)也會(huì)撐破列布局，但和margin,padding不同的是，其只存在列與列之間，并與列高度相等；而column-rule就類似于元素的border，可以設(shè)置寬度，邊框樣式，邊框顏色，并且column-rule不具有任何空間位置，同時(shí)在z軸介于元素的background和content之間，其同樣具有與列一樣的高度

總結(jié)

以上是生活随笔為你收集整理的CSS之Multi-columns的column-gap和column-rule的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。