CSS3多列布局

最新推荐文章于 2024-01-14 18:44:54 发布

起伏羊

最新推荐文章于 2024-01-14 18:44:54 发布

阅读量508

点赞数

分类专栏： CSS3 文章标签： css css3 前端

本文链接：https://blog.csdn.net/Sonnenlicht77/article/details/103982234

版权

CSS3 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

CSS3多列布局
columns属性的使用方法及浏览器兼容
多利布局的相关属性的使用方法

一、CSS3多列布局

1、CSS3相关属性

属性	描述
columns	规定设置 column-width 和 column-count 的简写属性
column-width	规定列的宽度
column-count	规定元素应该被分隔的列数
column-gap	规定列之间的间隔
column-rule	设置所有 column-rule-* 属性的简写属性属性设置列只觉得宽度、样式和颜色规则
column-span	规定元素应该横跨的列数
column-fill	规定元素应该被分隔的列数
column-count	规定如何填充列
column-rule-color	规定列之间规则的颜色
column-rule-style	规定列之间规则的样式
column-rule-width	规定列之间规则的宽度

2、break-before、break-after和break-inside属性

这3个属性能够接受有限数量的关键字作为属性值，它们的功能和用法与CSS2中page-break-before、page-break-after、page-break-inside这3个属性相同。

break-before:auto|always|avoid|left|right|page|column|avoid-page|avoid-column;

break-after:auto|always|avoid|left|right|page|column|avoid-page|avoid-column;

break-inside:auto|always|avoid|left|right|page|column|avoid-page|avoid-column;

auto：该属性值表示不强迫也不禁止在生成框之前（之后、之间）分页
always：该属性值表示总是强迫在生成框之前（之后）分页
avoid：该属性值表示避免在生成框之前（之后、之间）分页
left：该属性值表示强迫在生成框之前（之后）分一个或两个页，使下一页成为一个左页
right：该属性值表示强迫在生成框之前（之后）分一个或两个页，使下一页成为一个右页
page：该属性值表示总是强迫在生成框之前（之后）分页（CSS3新增）
column：该属性值表示总是强迫在生成框之前（之后）分列（CSS3新增）
avoid-page：该属性值表示总是避免在生成框之前（之后）分页（CSS3新增）
avoid-column：该属性值表示总是避免在生成框之前（之后）分列（CSS3新增）

二、CSS3多列分布基本属性

主要应用于网页文本的多列分布方面

1、columns属性

语法

columns:<column-width>||<column-count>

columns属性是一个复合属性

column-width	列的宽度
column-count	列数

在实际布局中，所定义的多列布局中的列数是最大列数，当容器的宽度不足以划分所设置的列数时，列数会适当减少，而每列的宽度会自适应宽度，从而填满整个容器范围。

2、浏览器兼容

在这里插入图片描述
Internet Explorer 10 和 Opera 支持 column 属性。

Firefox 支持替代的 -moz-column 属性。

Safari 和 Chrome 支持替代的 -webkit-column 属性。

注：Internet Explorer 9 以及更早版本的浏览器不支持 column 属性。

    <style>
        .c {
            columns: 100px 3;
            -webkit-columns: 100px 3;
            /* Safari and Chrome */
            -moz-columns: 100px 3;
            /* Firefox */
        }
    </style>

    <div class="c">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda, alias! Laborum earum expedita ab, deleniti
        tenetur itaque maiores aliquam in? Tempora corrupti esse quas soluta, exercitationem quos incidunt laudantium
        doloremque.
    </div>

在这里插入图片描述

3、CSS3多列分布其他属性

column-width属性
column-width属性规定列的宽度
```
column-width:auto | <length>;
```

属性值	说明
auto	默认值，表示元素多列分布的列宽由其他元素来决定
length	指定列宽的长度，其主要由数值和长度单位组成，只能取正

    <style>
        .newspaper {
            column-width: 100px;
            -moz-column-width: 100px;
            /* Firefox */
            -webkit-column-width: 100px;
            /* Safari and Chrome */
        }
    </style>

    <div class="newspaper">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sapiente natus eaque dolorem quasi non molestiae. Repellendus vel aperiam, commodi natus eaque voluptates distinctio laboriosam maiores! Aperiam atque veritatis quos.
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab, tempore assumenda? Voluptatibus eveniet error atque aliquid veritatis quis aliquam nam explicabo, magnam quae illo dolorum adipisci culpa architecto maiores sequi.
    </div>

在这里插入图片描述

column-count属性

column-count属性用于设置多列布局的列数，而不需要通过列宽自动调整列数。

	column-count:auto|<integer>

属性值	说明
auto	默认值，表示元素多列分布的列数由其他元素来决定
integer	指定多列布局的列数，取值为大于0的正整数

如果没有设置column-width属性，则当设置column-count属性为auto时，只有一列。

        .newspaper {
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari and Chrome */
            column-count: 3;
        }

在这里插入图片描述

column-gap属性

column-gap属性设置分列布局中列与列的间距。

column-gap:normal| length；

值	描述
normal	规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。
length	把列间的间隔设置为指定的长度。不能为负。

        .newspaper {
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari and Chrome */
            column-count: 3;

            -moz-column-gap: 40px;
            /* Firefox */
            -webkit-column-gap: 40px;
            /* Safari and Chrome */
            column-gap: 40px;
        }

在这里插入图片描述

column-rule属性
column-rule属性是一个速记属性设置所有column-rule-*属性。column-rule属性设置列之间的宽度，样式和颜色。

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

值	说明
column-rule-width	设置列中之间的宽度规则
column-rule-style	设置列中之间的样式规则
column-rule-color	设置列中之间的颜色规则

        .newspaper {
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari and Chrome */
            column-count: 3;

            -moz-column-gap: 40px;
            /* Firefox */
            -webkit-column-gap: 40px;
            /* Safari and Chrome */
            column-gap: 40px;

            -moz-column-rule: 4px outset #ff00ff;
            /* Firefox */
            -webkit-column-rule: 4px outset #ff00ff;
            /* Safari and Chrome */
            column-rule: 4px outset #ff00ff;
        }

在这里插入图片描述

column-rule-width 属性

column-rule-width属性指定列之间的宽度规则。
```
column-rule-width: thin|medium|thick|length;
```
值说明
thin 指定一个细边框的规则
medium 默认值，定义一个中等边框规则
thick 指定一个粗边框的规则
length 指定宽度的规则

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

column-rule-style属性
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-color 属性

column-rule-color 属性规定列之间的颜色规则。

column-rule-color: color;

值	描述
color	规定颜色规则。请参阅 CSS 颜色值。

        .newspaper {
            /* Chrome, Safari, Opera */
            -webkit-column-count: 3;
            -webkit-column-gap: 40px;
            -webkit-column-rule-style: outset;
            -webkit-column-rule-width: 1px;
            -webkit-column-rule-color: #ff0000;


            /* Firefox */
            -moz-column-count: 3;
            -moz-column-gap: 40px;
            -moz-column-rule-style: outset;
            -moz-column-rule-width: 1px;
            -moz-column-rule-color: #ff0000;


            column-count: 3;
            column-gap: 40px;
            column-rule-style: outset;
            column-rule-width: 1px;
            column-rule-color: #ff0000;

        }

在这里插入图片描述

column-span属性

column-span 属性规定元素应横跨多少列。
```
column-span: 1|all;
```
属性值说明
1 横跨一列
all 跨越所有列

属性值	说明
1	横跨一列
all	跨越所有列

    <style>
        .newspaper {
            column-count: 3;
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari and Chrome */

        }
        h2 {
            column-span: all;
            -webkit-column-span: all;
            /* Safari and Chrome */
        }
    </style>

    <div class="newspaper">
        <h2>loremloremloremloremloremloremlorenloremloremloremloremloremloremloremloremlorenloremlorem</h2>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores sapiente natus eaque dolorem quasi non
        molestiae. Repellendus vel aperiam, commodi natus eaque voluptates distinctio laboriosam maiores! Aperiam atque
        veritatis quos.
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab, tempore assumenda? Voluptatibus eveniet error
        atque aliquid veritatis quis aliquam nam explicabo, magnam quae illo dolorum adipisci culpa architecto maiores
        sequi.
    </div>

在这里插入图片描述

column-fill属性

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

主流浏览器都不支持 column-fill 属性。
```
column-fill: balance|auto;
```
值描述
balance 对列进行协调。浏览器应对列长度的差异进行最小化处理。
auto 按顺序对列进行填充，列长度会各有不同。
13.0 -moz- 支持

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

浏览器支持

在这里插入图片描述

起伏羊

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3多列布局

CSS3多列布局columns属性的使用方法及浏览器兼容多利布局的相关属性的使用方法一、CSS3多列布局1、CSS3相关属性属性描述columns规定设置 column-width 和 column-count 的简写属性column-width规定列的宽度column-count规定元素应该被分隔的列数column-gap规定列之间的间...
复制链接

扫一扫