博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS3-多列(column-count等)
阅读量:5138 次
发布时间:2019-06-13

本文共 1688 字,大约阅读时间需要 5 分钟。

CSS3 多列属性

属性 描述
column-count 指定元素应该被分割的列数。
column-fill 指定如何填充列
column-gap 指定列与列之间的间隙
column-rule 所有 column-rule-* 属性的简写
column-rule-color 指定两列间边框的颜色
column-rule-style 指定两列间边框的样式
column-rule-width 指定两列间边框的厚度
column-span 指定元素要跨越多少列
column-width 指定列的宽度
columns 设置 column-width 和 column-count 的简写

创建多列:column-count

column-count 属性指定了需要分割的列数。

语法:column-count: number|auto;

说明
number 列的最佳数目将其中的元素的内容无法流出
auto 列数将取决于其他属性,例如:"column-width"

填充列:column-fill

column-fill属性指定如何填充列。

语法:column-fill: balance|auto;

说明
balance 列长短平衡。浏览器应尽量减少改变列的长度
auto 列顺序填充,他们将有不同的长度

多列中列与列间的间隙:column-gap

column-gap 属性指定了列与列间的间隙。

语法:column-gap: length|normal;

描述
length 一个指定的长度,将设置列之间的差距
normal 指定一个列之间的普通差距。 

列边框:column-rule-

column-rule-style 属性指定了列与列间的边框样式:

语法:column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;

描述
none 定义没有规则。
hidden 定义隐藏规则。
dotted 定义点状规则。
dashed 定义虚线规则。
solid 定义实线规则。
double 定义双线规则。
groove 定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge 定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset 定义 3D inset 规则。该效果取决于宽度和颜色值。
outset 定义 3D outset 规则。该效果取决于宽度和颜色值。

column-rule-width 属性指定了两列的边框厚度

语法:column-rule-width: thin|medium|thick|length;

说明
thin 指定一个细边框的规则
medium 定义一个中等边框规则
thick 指定一个粗边框的规则
length 指定宽度的规则

column-rule-color 属性指定了两列的边框颜色

语法:column-rule-color: color;

column-rule 属性是 column-rule-* 所有属性的简写。

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

指定元素跨越多少列:column-span

语法:column-span: 1|all;

描述
1 元素应跨越一列
all 该元素应该跨越所有列

指定列的宽度:column-width

column-width 属性指定了列的宽度。

语法:column-width:auto|length

描述
auto 浏览器将决定列的宽度
length 指定列宽的长度

colums属性

Columns属性是一个速记属性设置列宽和列数。

语法:columns: column-width column-count;

转载于:https://www.cnblogs.com/lmjZone/p/8567573.html

你可能感兴趣的文章
Perl正则表达式匹配
查看>>
DB Change
查看>>
nginx --rhel6.5
查看>>
Eclipse Python插件 PyDev
查看>>
selenium+python3模拟键盘实现粘贴、复制
查看>>
网站搭建(一)
查看>>
Spring JDBCTemplate
查看>>
Radon变换——MATLAB
查看>>
Iroha and a Grid AtCoder - 1974(思维水题)
查看>>
gzip
查看>>
转负二进制(个人模版)
查看>>
LintCode-Backpack
查看>>
查询数据库锁
查看>>
[LeetCode] Palindrome Number
查看>>
我对于脚本程序的理解——百度轻应用有感
查看>>
SQL更新某列包含XX的所有值
查看>>
网易味央第二座猪场落户江西 面积超过3300亩
查看>>
面试时被问到的问题
查看>>
spring 事务管理
查看>>
VS2008 去掉msvcr90的依赖
查看>>