网站地图    收藏   

主页 > 专题教程 > css >

columns

来源:自学PHP网    时间:2018-02-08 10:48 作者: 阅读:

[导读] CSS columns属性用于在某个元素中制作多列布局,它可以同时设置column-width和column-count属性。...

CSS columns属性用于在某个元素中制作多列布局,它可以同时设置和属性。

通过CSS columns属性,你可以为多列布局同时设置列的宽度和列的数量。如果你只设置了一个值,那么没有指定的值会使用它的初始值。

如果多列布局元素使用绝对单位,而不是百分比单位的情况下,通常不建议同时设置和属性,这样会不利于制作响应式的多列布局。

如果设置的列宽度和数量不能适配容器的宽度,浏览器会根据实际情况减少列的数量,来适应指定的列宽度。如果列的数量减少到1,列的宽度仍然比容器宽度大,那么列的宽度页会被减小来适应容器的宽度。

如果列的宽度设置的过小,容器中放置了指定数量的列之后,还有剩余的空间,那么浏览器会将列的宽度拉伸,使列占据整个容器空间。

官方语法
columns: <'column-width'> ||  <'column-count'>       
                            

参数:

  • <'column-width'>:指定列的宽度,数据类型。详细信息参考属性。
  • <'column-count'>:指定列的数量。整数数据类型。详细信息参考属性。

column-span属性的初始值为 auto auto

应用范围

column-span属性可以应用在块级元素,表格单元格和内联块级元素上,不能应用在表格上。

示例代码

下面是columns属性的一些取值示例代码:

columns: 1em;
columns: 1;
columns: auto;
columns: 1 auto;
columns: auto 12em;
columns: auto auto;                           
                            
在线演示

下面是一个使用columns属性的在线示例:

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示。我们知道,当一行文字太长时,读者读起来就比较费劲,有可能读错行或读串行。

人们的视点从文本的一端移到另一端、然后换到下一行的行首,如果眼球移动浮动过大,他们的注意力就会减退,容易读不下去。所以,为了最大效率的使用大屏幕显示器,页面设计中需要限制文本的宽度,让文本按多列呈现,就像报纸上的新闻排版一样。

但是在CSS3的多列布局(columns)语法功能出现之前,人们如果想让文本呈多列显示,要么使用绝对定位,手动给文本分段落,或者使用JS脚本等,而新语法的出现,彻底改变了这样的局面。

对于一些不支持多列布局特征的浏览器,比如IE9/IE8,会把这些属性全部忽略,这样布局就呈现出传统的单块布局。

CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们,特别是需要自动平衡列高度的地方。

浏览器支持

columns属性的浏览器兼容性如下图所示:

IE10+和Edge浏览器以及Opera Mini浏览器支持columns属性。Firefox浏览器需要添加-webkit-前缀:-moz-columns,Safari 和 Chrome浏览器需要添加-webkit-前缀:-webkit-columns

最新评论

添加评论

更多文章推荐

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论