CSS属性
CSS 多列属性(Multi-column)
| 属性 | 说明 | CSS | |-----|-----|-----| | column-count | 指定元素应该分为的列数 | 3 | | column-fill | 指定如何填充列 | 3 | | column-gap | 指定列之间的差距 | 3 | | column-rule | 对于设置所有column-rule-*属性的简写属性 | 3 | | column-rule-color | 指定列之间的颜色规则 | 3 | | column-rule-style | 指定列之间的样式规则 | 3 | | column-rule-width | 指定列之间的宽度规则 | 3 | | column-span | 指定元素应该跨越多少列 | 3 | | column-width | 指定列的宽度 | 3 | | columns | 缩写属性设置列宽和列数 | 3 | ## columns - 语法:columns: column-width column-count; - 属性值 - column-width:列的宽度。 - column-count:列数。 ```css div{ columns:100px 3; -moz-columns:100px 3; /* Firefox */ -webkit-columns:100px 3; /* Safari 和 Chrome */ } ``` ## column-width属性 ```css div{ column-width:100px; -moz-column-width:100px; /* Firefox */ -webkit-column-width:100px; /* Safari 和 Chrome */ } ``` ## column-count属性 - JavaScript 语法::object.style.columnCount=3 - 属性值 - number:列的最佳数目将其中的元素的内容无法流出 - auto:列数将取决于其他属性,例如:"column-width"  ## column-fill属性 - 主流浏览器都不支持 column-fill 属性。 - 属性值 - balance:对列进行协调。浏览器应对列长度的差异进行最小化处理。 - auto:按顺序对列进行填充,列长度会各有不同。 ## column-gap属性 - Firefox 支持替代的 -moz-column-gap 属性。 - Safari 和 Chrome 支持替代的 -webkit-column-gap 属性。 - 属性值 - length:把列间的间隔设置为指定的长度。: - normal:规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。 ```css div{ -moz-column-gap:40px; /* Firefox */ -webkit-column-gap:40px; /* Safari 和 Chrome */ column-gap:40px; } ``` ## column-rule属性 - column-rule属性是一个速记属性设置所有column-rule-*属性。column-rule属性设置列之间的宽度,样式和颜色。 - 语法:column-rule: column-rule-width column-rule-style column-rule-color; ```css div{ column-rule:3px outset #ff00ff; -moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ } ``` ## column-rule-color属性 ```css div{ column-rule-color:#ff0000; -moz-column-rule-color:#ff0000; /* Firefox */ -webkit-column-rule-color:#ff0000; /* Safari and Chrome */ } ``` ## column-rule-style属性 - 属性值 - none:定义没有规则。 - hidden:定义隐藏规则。 - dotted:定义点状规则。 - dashed:定义虚线规则。 - solid:定义实线规则。 - double:定义双线规则。 - groove:定义 3D grooved 规则。该效果取决于宽度和颜色值。 - ridge:定义 3D ridged 规则。该效果取决于宽度和颜色值。 - inset:定义 3D inset 规则。该效果取决于宽度和颜色值。 - outset:定义 3D outset 规则。该效果取决于宽度和颜色值。 ```css div{ column-rule-style:dotted; -moz-column-rule-style:dotted; /* Firefox */ -webkit-column-rule-style:dotted; /* Safari and Chrome */ } ``` ## column-rule-width属性 - 属性值 - thin:指定一个细边框的规则 - medium:定义一个中等边框规则 - thick:指定一个粗边框的规则 - length:指定宽度的规则 ```css div{ column-rule-width:10px; -moz-column-rule-width:10px; /* Firefox */ -webkit-column-rule-width:10px; /* Safari and Chrome */ } ``` ## column-span属性 - 语法:column-span: 1|all; - 属性值 - 1:元素应横跨一列。 - all:元素应横跨所有列。 ```css h2{ -webkit-column-span:all; /* Chrome */ column-span:all; } ```
顶部
收展
底部
[TOC]
目录
CSS 动画属性(animation)
CSS 背景属性(background)
CSS 边框和轮廓属性
CSS 列表属性(List)
CSS 尺寸属性(size)
CSS 字体属性(font)
CSS 定位属性(Positioning)
CSS 盒子模型
CSS 文本属性(Text)
CSS 表格属性(Table)
CSS 过渡属性(Transition)
CSS 2D/3D 转换属性
CSS 内容生成属性
CSS 颜色属性(Color)
CSS 网格属性(Grid)
CSS 超链接属性
CSS 多列属性(Multi-column)
CSS 页面媒体属性
CSS 分页属性
CSS 用户外观属性
相关推荐
CSS教程
CSS进阶