CSS 多列属性(Multi-column)-KeepStudy

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"
![](/uploads/20221118/2022111815411671487.jpg)

## 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;
}
```

顶部

CSS属性

目录

相关推荐