广州网站备案拍照,福建网站建设公,网站群的建设,成都微网站column-gap就相当于两列之间的空白处#xff0c;而column-rule就相当于一条分隔线#xff0c;换句话说呢#xff1f;column-gap就像我们web页面中的margin一样#xff0c;而column-rule就类似于border#xff0c;不过他们只是存在相邻两列之间
另外column-gap和column-ru…column-gap就相当于两列之间的空白处而column-rule就相当于一条分隔线换句话说呢column-gap就像我们web页面中的margin一样而column-rule就类似于border不过他们只是存在相邻两列之间
另外column-gap和column-rule是有高度的其高度和列等高最大区别是column-gap没有任何样式而且他在列与列之间占有一定的空间而column-rule是有一定的样式类似于border一样只是能用的相当的少其在列与列之间不占有任何空间位置
一. 列间距column-gap
语法column-gap: normal || length
取值说明
- normal为默认值默值为1em如果你的字号是px伫值其默认值为你的font-size值
- length:此值用来设置列与列之间的距离其可以使用px,em单位的任何整数值但不能是负值 上面这个实例是在column-width为auto下我们把元素分成两列并把列与列的间距定为20px从效果图中明显可以看出column-gap将相邻两列以20px的宽度隔开了。下面在这个例子基础上加上一个列的宽度值 从效果中很容易得到答案就是容器无法显示两列。因为元素总宽度是400px现在每列定在193px总共分成了2列在前面的例子大家都知道column-gap为normal时刚好正常以2列并且每列为193px的宽度显示。可现在加上一个列间距20px。这是一个很简单的数学题多列各糁数值之各超过多列元素总宽度以至于元素无法按参数值进行布局
注这里说这么多无非想告诉大家column-gap可以用来改变相邻列之间距离但在多列元素同时设置了column-width时column-gap与column-width之和大于多列元素总宽度时会导至列被撑破并以第一列显示此时的列宽自动调节到元素的总宽度
二. column-rule
在你的脑海中你可以把column-rule当作元素中的border来理解因为column-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的宽度默认值为“medium”不允许取负值。类似于border-width属性
- column-rule-style此值是用来定义column-rule的样式其默认值为“none”如果取值为默认值时column-rule-width值将等于“0”column-rule-style样式种类和border-style一样
- column-rule-color此值用来定义column-rule的颜色其默认值为前景色color的值使用相当于border-color如果不希望显示颜色也可以将其设置为transparent(透明色) 上面是一个非常简单的实例下面我想在上面的例子基础上稍作一下改变给元素的column-rule-width变大并同时改变一下元素的color和background值 column-rule-width增大并不会影响列的布局只会将其往元素两边扩展直到元素边缘为止同时也再一次说明column-rule是不占有任何空间位置的其二column-rule在z轴上是介于background和content之间的(所以内容文字显示了而背景的黄色没有显示)
总结column-gap就类似于元素中的margin和padding具有一定的空间位置当其值过大时也会撑破列布局但和margin,padding不同的是其只存在列与列之间并与列高度相等而column-rule就类似于元素的border可以设置宽度边框样式边框颜色并且column-rule不具有任何空间位置同时在z轴介于元素的background和content之间其同样具有与列一样的高度
