css column-gap属性定义及用法

在css中,column-gap属性通常和columns、column-count等分列属性一起使用,用来设置元素内容分列(多列布局)后列与列之间的距离

css column-gap属性语法格式

css语法:column-gap: length / normal;(例:column-gap:36px;)

JavaScript语法:object.style.columnGap="40px"

css column-gap属性值说明

length:自定义列之间的间距

normal:列之间的普通差距

实例

css3 column-gap属性设置列之间的距离笔记

body{background: #ddd;}div{width: 400px;border:1px solid blueviolet;}

.gap{column-count:3;column-gap:60px;}

.gap_normal{column-count:3;column-gap:normal;}

column-gap:60px;演示,将列与列之间的距离设置为60px
column-gap:normal;演示,将列与列之间的距离设置普通距离!

运行结果

css的fill属性,css column-fill属性怎么用相关推荐

  1. CSS中flex弹性盒子——弹性容器属性,弹性元素属性(附图)

    网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,2009 ...

  2. CSS3基础(基础认知,选择器,字体属性,文本属性,CSS 的三种引入方式)

    CSS3基础 1. 基础认知 1.1 CSS 简介 CSS 的使用场景是什么? 美化网页,布局页面 CSS 的中文名称是什么? 层叠/级联样式表(Cascading Style Sheets) CSS ...

  3. css学习(第一天)(css基础选择器,css字体属性,css文本属性,css引入方式)

    CSS第一天 1.css简介 1.1 html的局限性 1.2 css-网页的美容师 1.3 css语法规范 1.4 css代码风格 1.4.1 样式格式书写 1.4.2 样式大小写风格 1.4.3 ...

  4. CSS入门之引用、选择器、属性(六分之三)

    CSS 入门教程六分之三篇 没办法,我直播教小伙伴CSS入门,属性讲完,准备说定位的时候,他们就喊停,hold不住了...所以先写到六分之三,23333333 要点 解释 引用 如何使用定义的CSS样 ...

  5. CSS初识(三):CSS字体文本相关属性

    属性 CSS属性有很多,不过常用的并不多,大概30个左右.请注意区别CSS属性和HTML属性. 按照功能大致分为以下几类: 字体有关属性 font-size: 设置字体大小,单位是px(像素):一些不 ...

  6. CSS:布局的三个关键属性:float、position、display

    最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...

  7. css text top,text-align属性(css中文本对齐属性)

    text-align属性 设置h1.h2.h3元素的文本对齐方法: h1{text-align:center} h2{text-align:left} h3{text-align:right} 亲自试 ...

  8. css设置title字体_CSS中简写属性要注意TRouBLe的顺序,避免踩坑

    简写属性是用于同时给多个属性赋值的属性.比如font是一个简写属性,可以用于设置多种字体属性.它指定了font-style.font-weight.font-size.font-height以及fon ...

  9. html5后代选择符,css选择符有哪些?哪些属性可以继承?

    属性的名字是一个合法的标识符,它们是CSS语法中的关键字.一种属性规定了格式修饰的一个方面.CSS选择器用于选择你想要的元素的样式的模式. css选择符有哪些?哪些属性可以继承?下面我们来看一下css ...

最新文章

  1. F - Monkey Banana Problem
  2. 合作开发工具——freeze和pipreqs
  3. R语言观察日志(part11)--好用的R命令之高效安装
  4. leetcode 190. 颠倒二进制位(位运算)
  5. oracle参数文件和口令文件
  6. 看了5种分布式事务方案,最终选择了Seata,真香!
  7. python 基础之文件
  8. 我们差点就用不上 Java 了!
  9. android立方体旋转动画,如何画出一个旋转的立方体
  10. linux网卡驱动realtek,Linux系统Realtek网卡驱动安装
  11. 微信小程序base64转为二维码、条形码图片
  12. Linux中括号的使用
  13. 如何用Mathpix 和 MathType在WPS快速输入数学公式
  14. 天数最少的年份_年月日格式有哪几种 年、月、日
  15. 如何快速学习一门技术?
  16. MATLAB2016b遗传算法工具箱安装
  17. 算法题-报数游戏(java)
  18. ssm基于jsp的网上购物系统 毕业设计-附源码190917
  19. MySQL怎么运行的系列(八)14张图说明白MySQL事务原子性和undo日志原理
  20. 笔记本linux系统改win7系统教程,联想笔记本电脑自带win8或linux改装win7详细教程...

热门文章

  1. 网管型交换机比普通交换机有哪些明显优势
  2. 【渝粤教育】国家开放大学2018年秋季 0014-21T秘书学(一) 参考试题
  3. 【渝粤教育】国家开放大学2018年秋季 1007t公司财务 参考试题
  4. 【渝粤题库】陕西师范大学200771 可视化程序设计
  5. 亿佰特电源模块:无线通信模块电平转换指南
  6. unzip不能解压mysql的zip_Linux中zip压缩和unzip解压缩命令详解
  7. java wrap方法_Java WritableCellFormat.setWrap方法代码示例
  8. IDEA中注解注释快捷键及模板
  9. MySQL在哪里看secret_key_K8S 创建和查看secret(九)
  10. 信号与系统 chapter8 LTI连续系统的描述