视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
CSS3教程-多列
2020-11-27 18:53:35 责编:小采
文档
Hello!小伙伴们,我们上一篇文章的CSS3教程-动画知识大家有没有消化完呢?CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB前端开发人员轻松的让文本呈现多列显示。

CSS3 多列:

通过 CSS3,您能够创建多个列来对文本进行布局 – 就像报纸那样!

在本章中,您将学习如下多列属性:

1、column-count;

2、column-gap;

3、column-rule。

浏览器支持:

Internet Explorer 10 和 Opera 支持多列属性。

Firefox 需要前缀 -moz-。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9 以及更早的版本不支持多列属性。

CSS3 创建多列:

column-count 属性规定元素应该被分隔的列数:

实例:

把 div 元素中的文本分隔为三列:

div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}

CSS3 规定列之间的间隔:

column-gap 属性规定列之间的间隔:

实例:

规定列之间 40 像素的间隔:

div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}

CSS3 列规则:

column-rule 属性设置列之间的宽度、样式和颜色规则。

实例:

规定列之间的宽度、样式和颜色规则:

div
{
-moz-column-rule:3px outset #ff0000; /* Firefox */
-webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */
column-rule:3px outset #ff0000;
}

新的多列属性:

下面的表格列出了所有的转换属性:

下载本文
显示全文
专题