columns样式属性使用
columns样式属性使用
columns
:用于设置元素的列宽和列数。它是column-width
和column-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样式属性使用的更多相关文章
- 原创:新手布局福音!微信小程序使用flex的一些基础样式属性
来源:新手布局福音!微信小程序使用flex的一些基础样式属性 作者:Nazi Flex布局相对于以前我们经常所用到的布局方式要好的很多,在做微信小程序的时候要既能符合微信小程序的文档开发要求,又能 ...
- 一起学HTML基础-CSS样式表常用样式属性
样式属性 背景与前景: background-color:#F90; /*背景颜色,样式表优先级最高*/ background-image:url(路径); /*设置背景图片(默认)*/ backgr ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- HTML_css样式表 样式属性 格式布局
CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控制精确, ...
- 纯css3样式属性制作各种图形图标
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ActionBar官方教程(11)自定义ActionBar的样式(含重要的样式属性表及练习示例)
Styling the Action Bar If you want to implement a visual design that represents your app's brand, th ...
- hack:选择符前缀法,样式属性前缀法
选择符前缀法 <style> *html .test{width:100px;} /*only for IE6*/ *+html .test{width:100px;}/*for IE6 ...
- 10 GridView 样式属性
GridView 样式属性: 1,android:numColumns="auto_fit" 显示的列数 如果android:numColumns不设置那么自动每行1列 如下图 2 ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
随机推荐
- 几张非常有意义的JavaScript基础学习思维图
分享几张对于学习JavaScript基础知识非常有意义的图,无论你的JavaScript级别如何,“温故而知新”完全可以从这些图中得到. 推荐理由:归类非常好,非常全面 JavaScript 数组 J ...
- BZOJ 4034 树链剖分
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=4034 题意:中文题面 思路:树链剖分入门题. 剖分后就是一个简单的区间更新和区间求和问题. ...
- [NOIP2017普及组]跳房子(二分,单调队列优化dp)
[NOIP2017普及组]跳房子 题目描述 跳房子,也叫跳飞机,是一种世界性的儿童游戏,也是中国民间传统的体育游戏之一. 跳房子的游戏规则如下: 在地面上确定一个起点,然后在起点右侧画 nn 个格子, ...
- js代码检测设备问题:为什么在移动端检测设备的时候会出现pc的页面
为了在手机上也能正常显示页面,所以为之前写的页面又重写了一遍,专门用来在移动端显示,用js代码检测设备,如果是pc就显示pc的页面,如果是移动就显示移动的页面,但遇到一个问题就是在移动端打开会有一个延 ...
- Synchronized和ReentranLock的比较
并发编程最容易遇到的问题就是就是安全问题,因此解决方式有两种 使用同步方法或同步代码块(Synchronized关键字) 使用锁机制(ReentranLock) 同步方法和同步代码块(Synchron ...
- 【归纳】Layui table.render里的json后台传入
在使用Layui的table元素时,传入的json的数据格式是有其自身定义的,需要另外添加一些字符,以正确传入. 为了传入符合前端格式的数据: table.render({ elem: '#test' ...
- BZOJ4671 异或图 斯特林反演+线性基
题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4671 题解 半年前刚学计数的时候对这道题怀着深深的景仰,现在终于可以来做这道题了. 类似于一般 ...
- 前后端分离下的CAS跨域流程分析
写在最前 前后端分离其实有两类: 开发阶段使用dev-server,生产阶段是打包成静态文件整个放入后端项目中. 开发阶段使用dev-server,生产阶段是打包成静态文件放入单独的静态资源服务器中, ...
- Matlab中利用null函数解齐次线性方程组
摘自:http://blog.csdn.net/masibuaa/article/details/8119032 有齐次线性方程AX=0,且rank(A)=r<n时,该方程有无穷多个解, 可以用 ...
- 英语单词contributors
contributors 来源——github网站 翻译 n. 贡献者:参与者:编著者(contributor的复数形式) TOEFL | GMAT 词根:cont ...