css3新增多列布局属性,columns属性的用法笔记

原创 国哥笔记  2018-11-14 20:14  阅读 855 views 次

css3新增了很多新属性,这些新属性大多数都是为了简化复杂的问题而出现的,多了解一些往往可以提高我们的工作效率。今天就分享一下css3中新增的一些多列布局属性的用法,希望对大家有用。

什么是多列布局?

多列布局就是让容器(元素)中的内容呈现多列显示,css3之所以出现多列布局(multi-column)就是对现有块状布局模式的有力扩充。当然使用css3中的多列布局能实现的,使用现有的布局模式也能实现,但使用这种多列布局能够让我们简单的实现内容的多列显示,能大大提高我们的开发速率。

多列布局最经典的应用就是实现文本的多列显示。通常情况下,如果文本太长,我们阅读的时候从一行的末尾到另一行的开头,这样眼睛移动浮动过大,容易读错行。通过多列布局让文本多列显示,减少文本的长度,就像报纸的排版一样,即美观又有利于阅读。

css3多列布局

columns属性

columns属性是用来同时设置列宽和列数,它可以取代column-width属性和column-count属性,详情见:css3多列布局之columns属性设置列宽和列数

css3多列布局之columns属性设置列宽和列数

1、column-width属性是用来设置多列布局中列的宽度,可以单独使用,单独使用时会根据定义的宽度来确定分成几列;css3多列布局之column-width属性设置列的宽度

2、column-count属性是用来设置多列布局中列的列数,可以单独使用;css3 column-count属性将文本拆分成几列笔记

column-rule属性

column-rule属性是用来同时设置多列布局中列与列之间的分隔线的样式、宽度和颜色,它可以取代column-rule-style属性、column-rule-width属性和column-rule-color属性。详情见:css3 column-rule属性设置列之间的样式、宽度、颜色笔记

css3 column-rule属性设置列之间的样式、宽度、颜色笔记

1、column-rule-style属性是用来设置多列布局中列与列之间分隔线的样式(双线、虚线等),单独使用没有效果,详情见:css3 column-rule-style属性设置列之间的样式笔记

2、column-rule-width属性是用来设置多列布局中列与列之间分隔线的宽度,详情见:css3 column-rule-width属性设置列之间分割线的宽度笔记

3、column-rule-color属性是用来设置多列布局中列与列之间分隔线的颜色,单独使用没有效果,详情见:css3 column-rule-color属性设置列之间分隔线的颜色笔记

column-gap属性和column-span属性

css3 column-span属性设置元素跨多少列笔记

column-gap属性是用来设置分列布局中列与列之间的距离,需要与columns或column-count等属性一起使用,单独使用没有效果,详情见:css3 column-gap属性设置列之间的距离笔记

column-span属性用来设置多列布局中的元素跨所有列,也是需要与columns或column-count等属性一起使用,单独使用没有效果,详情见:css3 column-span属性设置元素跨多少列笔记

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/css3-columns.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情