CSS之Multi-columns的column-gap和column-rule

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之间,其同样具有与列一样的高度

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407036.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis多机功能介绍

Redis多机功能目的&#xff1a;以单台Redis服务器过渡到多台Redis服务器 Redis单机在生产环境中存在的问题 1、内存容量不足 Redis使用内存来存书数据库中的数据&#xff0c;但是对于一台机器来说&#xff0c;硬件的内存容量是有限的&#xff0c;当我们需要存储的数据量超过机器…

Taro+react开发(43)重新渲染置空

changeTab type > {this.setState({curType: type,pageIndex: 1,getStauList: []},() > {this.getStatusList();});};

C#设计模式

C#设计模式 (1) .NET设计模式系列文章 作者&#xff1a;TerryLee 出处&#xff1a;http://terrylee.cnblogs.com/ (2) 设计模式 作者&#xff1a;吕震宇出处&#xff1a;http://www.cnblogs.com/zhenyulu/ (3) Design & Pattern 作者&#xff1a;张逸:晴窗笔记 - (张逸)…

watch命令

watch是一个非常实用的命令&#xff0c;基本所有的Linux发行版都带有这个小工具&#xff0c;如同名字一样&#xff0c;watch可以帮你监测一个命令的运行结果&#xff0c;省得你一遍遍的手动运行。在Linux下&#xff0c;watch是周期性的执行下个程序&#xff0c;并全屏显示执行结…

CSS之Multi-columns的跨列

column-span主要用来定义一个分列元素中的子元素能跨列多少列。前面大家都知道column-width&#xff0c;column-count等属性让一元素分成多列&#xff0c;不管里面元素如何排放顺序&#xff0c;他们都是从左向右的放置内容&#xff0c;但有时我们需要基中一段内容或一个标题不进…

详解Microsoft Office Communication Server (OCS) 2007 标准版部署(上)

详解Microsoft Office Communication Server (OCS) 2007 标准版部署&#xff08;上&#xff09;前几篇博文中介绍了LCS今天我们来部署ocs&#xff0c;它是lcs的升级版&#xff0c;功能比lcs多个很多&#xff0c;可以视频&#xff0c;多人会议&#xff0c;等多项功能。但是安装起…

awk按分隔符的不同取出不同的列

看下bash代码&#xff1a; #!/bin/bash# get "orderno" and "order_money" from datafile of thisside or otherside, save the result to file xxx.bak# 把金额的单位全部化为&#xff1a;元function get_orderNo_orderMoney(){if [ $1 "|" ];…

Taro+react开发(45)taro中组件生命周期

组件生命周期# 每一个组件都有几个你可以重写以让代码在处理环节的特定时期运行的“生命周期方法”。方法中带有前缀 will 的在特定环节之前被调用&#xff0c;而带有前缀 did 的方法则会在特定环节之后被调用。装载(Mounting)# 这些方法会在组件实例被创建和插入 DOM 中时被调…

Linux命令 - watch

watch命令 功能 execute a program periodically, showing output fullscreen 周期性执行命令并全屏显示结果安装 brew install watch (mac os) 用法 watch command - 基础用法 $ watch date "%Y-%m-%dT%H:%M:%S[%Z]" Every 2.0s: date "%Y-%m-%dT%H:%M:%…

CSS之浮动(一)

1. 浮动出现的意义其实只是用来让文字环绕图片而已&#xff0c;仅此而已。而我们目前用浮动实现页面布局本不是浮动该干的事情 2. 浮动的包裹性 撇开浮动的“破坏性”&#xff0c;浮动就是个带有方位的display:inline-block属性 display:inline-block某种意义上的作用就是包…

一个怎样得到treeView值的小例子

阅读全文&#xff1a;http://www.cckan.net/forum.php?modviewthread&tid40 private void treeViewMenu_MouseDown(object sender, MouseEventArgs e) { if (e.Button MouseButtons.Right) { Point ClickPoint new Poi…

jquery miniui , 普加甘特图,流程管理

http://www.miniui.com/docs/quickstart/index.html 普加 甘特图 流程管理 http://www.plusgantt.com/project/demo/Project.html转载于:https://www.cnblogs.com/qq-757617012/p/4021130.html

Taro+react开发(46)taro中环境判断

环境判断 Taro.ENV_TYPE# ENV_TYPE.WEAPP 微信小程序环境ENV_TYPE.SWAN 百度小程序环境ENV_TYPE.ALIPAY 支付宝小程序环境ENV_TYPE.TT 字节跳动小程序环境ENV_TYPE.WEB WEB(H5)环境ENV_TYPE.RN ReactNative 环境ENV_TYPE.QUICKAPP 快应用环境ENV_TYPE.QQ QQ小程序 环境ENV_TYPE…

Linux shell重复执行某命令n次

方法一 for i in {1..10}; do echo "Hello"; done方法二 在~/.bashrc文件中创建一个run函数&#xff08;函数名字随意&#xff09;&#xff1a; function my_repeat() {number$1shiftfor n in $(seq $number); do$done }使./bashrc生效 souce ~/./bashrc示例 run…

CSS之浮动(二)

1. 浮动的非本职工作 我们只要静下心来好好想想浮动的本质&#xff0c;实现的原理&#xff0c;就可以知道为什么浮动本不应该用来对页面进行布局。还记得上一部分所说的浮动的本质吗&#xff1f;即“包裹与破坏”。我们可以用这个&#xff08;“包裹与破坏”&#xff09;解释为…

centos配置ftp

centos配置ftp 1、终端命令&#xff1a;yum -y install vsftpd,这样将会自动在网上down and setup vsftpd。 2、创建ftp用户组及用户: $ groupadd ftpgroup $ useradd ftpuser -g ftpgroup -d /webroot/myftpdir -m $ passwd ftpuser 码密 /webroot/myftpdir是ftp用户访问的文件…

iOS8中提示框的使用UIAlertController(UIAlertView和UIActionSheet二合一)

本文转载至 http://blog.csdn.net/liuwuguigui/article/details/39494597IOS8UIAlertViewUIActionSheetiOS8推出了几个新的“controller”&#xff0c;主要是把类似之前的UIAlertView变成了UIAlertController&#xff0c;这不经意的改变&#xff0c;貌似把我之前理解的“contro…

嵌入式学习路线

ARMLINUX路线&#xff0c;主攻嵌入式Linux操作系统及其上应用软件开发目标&#xff1a; &#xff08;1&#xff09;掌握主流嵌入式微处理器的结构与原理&#xff08;初步定为arm9&#xff09; &#xff08;2&#xff09;必须掌握一个嵌入式操作系统&#xff08;初步定为uclinux…

Taro+react开发(47)taro中消息机制

import Taro, { Events } from tarojs/taroconst events new Events()// 监听一个事件&#xff0c;接受参数 events.on(eventName, (arg) > {// doSth })// 监听同个事件&#xff0c;同时绑定多个 handler events.on(eventName, handler1) events.on(eventName, handler2) …

纯js监听滚动条到底部(vue版)

项目中&#xff0c;因为数据量过大&#xff0c;为提高页面性能&#xff0c;采用页面滑动 滚动条到底部的时候再进行数据请求分页&#xff0c;这边给大给个核心&#xff0c;结合vue的生命周期用纯javascript写的一个监听函数 第一个我们需要知道几个属性值&#xff0c;判断滚动…