columns样式属性使用

columns:用于设置元素的列宽和列数。它是column-widthcolumn-count的简写属性。

语法:
columns: <'column-width'> || <'column-count'>;

  • column-width:用来设置列宽,取值auto像素值,实际宽度可能会更宽或更窄以适合可用空间。
  • column-count:用来设置元素内容被划分成几列,取值auto正整数。如果取值和列的宽度都非auto ,则它仅指示允许的最大列数。

兼容性:


查看兼容性详情

查看案例 Demo

column-width样式属性使用

column-width:用于单独设置元素的列宽。

语法:
column-width: auto | length;

  • auto:默认值,由浏览器决定宽度。
  • length:单位值,用来这只每一列的宽度,当设置了column-count的时候优先把内容划分指定列数,宽度将自适应。

兼容性:


查看兼容性详情

查看案例 Demo

column-count样式属性使用

column-count:用于单独设置元素的列数。

语法:
column-count: auto | number;

  • auto:默认值,由其他属性决定列数,比如 column-width,当column-width设置后会根据元素的总宽度和column-width的值来自动划分列数。
  • number:划分元素以多少列来显示内容。

兼容性:


查看兼容性详情

查看案例 Demo

column-gap样式属性使用

column-gap:用于设置每一列之间的间隔

语法:
column-gap: length | normal;

  • length:设置列间的间隔为指定的长度。
  • normal:规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。

兼容性:

查看兼容性详情

查看案例 Demo

column-span样式属性使用

column-span:用于设置元素中的子元素横向跨越的列数

语法:
column-span: 1 | all;

  • 1:设置元素横跨一列,默认值。
  • all:设置元素横跨所有列,也就是单独占一行显示。

兼容性:

查看兼容性详情

查看案例 Demo

column-rule样式属性使用

column-rule:字面意思是设置多列规则,它是一个简写属性,用于整体设置所有 column-rule-* 的规则属性,规定列之间的==宽度==、==样式==和==颜色==规则,此属性类似于设置边框。

语法:
column-rule: width | style | color

  • width:规定列之间的宽度规则,非简写:column-rule-width

    • 取值:thin | medium | thick | length;

      • thin:很细
      • medium:中等
      • thick:宽厚
      • length:自定义单位值
  • style:规定列之间的样式规则,非简写:column-rule-style

    • 取值:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;

      • none:无规则
      • hidden:隐藏
      • dotted:点线效果
      • dashed:虚线效果
      • solid:实线效果
      • double:双线效果
      • groove:定义3D凹槽效果。该效果取决于宽度和颜色值。
      • ridge:定义3D凸起效果。该效果取决于宽度和颜色值。
      • inset:定义3D内显示效果。该效果取决于宽度和颜色值。
      • outset:定义3D外显示效果。该效果取决于宽度和颜色值。
  • color:规定列之间的颜色规则,非简写:column-rule-color
    • 取值:color 颜色值;

兼容性:


查看兼容性详情

查看案例 Demo

column-fill样式属性使用

column-fill:规定如何填充列

语法:
column-fill: balance | auto;

  • balance:对列进行协调。浏览器应对列长度的差异进行最小化处理。
  • auto:按顺序对列进行填充,列长度会各有不同。

兼容性: 暂时无浏览器支持此属性,这里就不做讨论了。

columns样式属性使用的更多相关文章

  1. 原创:新手布局福音!微信小程序使用flex的一些基础样式属性

    来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi   Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...

  2. 一起学HTML基础-CSS样式表常用样式属性

    样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...

  3. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  4. HTML_css样式表 样式属性 格式布局

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...

  5. 纯css3样式属性制作各种图形图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)

    Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...

  7. hack:选择符前缀法,样式属性前缀法

    选择符前缀法 <style> *html .test{width:100px;} /*only for IE6*/ *+html .test{width:100px;}/*for IE6 ...

  8. 10 GridView 样式属性

    GridView 样式属性: 1,android:numColumns="auto_fit" 显示的列数 如果android:numColumns不设置那么自动每行1列 如下图 2 ...

  9. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

随机推荐

  1. 几张非常有意义的JavaScript基础学习思维图

    分享几张对于学习JavaScript基础知识非常有意义的图,无论你的JavaScript级别如何,“温故而知新”完全可以从这些图中得到. 推荐理由:归类非常好,非常全面 JavaScript 数组 J ...

  2. BZOJ 4034 树链剖分

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4034 题意:中文题面 思路:树链剖分入门题. 剖分后就是一个简单的区间更新和区间求和问题. ...

  3. [NOIP2017普及组]跳房子(二分,单调队列优化dp)

    [NOIP2017普及组]跳房子 题目描述 跳房子,也叫跳飞机,是一种世界性的儿童游戏,也是中国民间传统的体育游戏之一. 跳房子的游戏规则如下: 在地面上确定一个起点,然后在起点右侧画 nn 个格子, ...

  4. js代码检测设备问题:为什么在移动端检测设备的时候会出现pc的页面

    为了在手机上也能正常显示页面,所以为之前写的页面又重写了一遍,专门用来在移动端显示,用js代码检测设备,如果是pc就显示pc的页面,如果是移动就显示移动的页面,但遇到一个问题就是在移动端打开会有一个延 ...

  5. Synchronized和ReentranLock的比较

    并发编程最容易遇到的问题就是就是安全问题,因此解决方式有两种 使用同步方法或同步代码块(Synchronized关键字) 使用锁机制(ReentranLock) 同步方法和同步代码块(Synchron ...

  6. 【归纳】Layui table.render里的json后台传入

    在使用Layui的table元素时,传入的json的数据格式是有其自身定义的,需要另外添加一些字符,以正确传入. 为了传入符合前端格式的数据: table.render({ elem: '#test' ...

  7. BZOJ4671 异或图 斯特林反演+线性基

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4671 题解 半年前刚学计数的时候对这道题怀着深深的景仰,现在终于可以来做这道题了. 类似于一般 ...

  8. 前后端分离下的CAS跨域流程分析

    写在最前 前后端分离其实有两类: 开发阶段使用dev-server,生产阶段是打包成静态文件整个放入后端项目中. 开发阶段使用dev-server,生产阶段是打包成静态文件放入单独的静态资源服务器中, ...

  9. Matlab中利用null函数解齐次线性方程组

    摘自:http://blog.csdn.net/masibuaa/article/details/8119032 有齐次线性方程AX=0,且rank(A)=r<n时,该方程有无穷多个解, 可以用 ...

  10. 英语单词contributors

    contributors 来源——github网站 翻译 n. 贡献者:参与者:编著者(contributor的复数形式) TOEFL | GMAT                   词根:cont ...