首页 >web前端 >css教程 >浅谈CSS3新特性之多列布局模块

浅谈CSS3新特性之多列布局模块

零到壹度
零到壹度原创
2018-03-24 09:42:121993浏览

CSS3新增了一个多列布局模块(Multi-column Layout Module),主要应用在文本的多列布局方面。

Multi-column可分为:

① 列数和列宽:column-count、column-width、columns

column-count:值为正整数,不带单位,表示Multi-column分列的列数,默认为auto(列数根据column-width等其他参数来定)。IE不支持该属性,在Firefox和Webkit下需要加上前缀-moz和-webkit。

column-width:表示Multi-column的列宽,其单位是px或em,但不能是负数,默认为auto(列数根据column-count等其他参数来定,但column-count此时不能为auto)。IE不支持该属性,Opera11+支持,在Firefox和Webkit下需要加上前缀-moz和-webkit。

columns:把column-width和column-count两个属性合并在一起使用。这种简写模式只在Webkit和Opera下支持,Firefox不支持。

若同时设置了column-width和column-gap,则实际列宽会根据column-gap调整,不一定等于设置的column-width值。

当设置的列宽大于元素容器的宽度时,并不会让元素内容按列宽进行布局而撑破容器,只会把列宽降到与容器宽度相等。

为了分列能适应各种屏幕大小,最好设置一个确切的列宽或列数,并相应指定相关属性,如元素的width、column-gap、column-rule-width等,如果column-gap、column-rule-width使用默认值,在多列设计中最好明确写定好、column-width和column-count的值。


② 列的间距和分列样式:column-gap、column-rule-color、column-rule-style、column-rule-width、column-rule

跨列布局中,column-gap相当于两列之间的空白,类似于margin;而column-rule相当于一条分隔线,类似于border。column-gap和olumn-rule是有高度的,其高度和列等高,最大区别是column-gap没有任何样式,且在列与列之间占有一定的空间,而column-rule有一定的样式,类似于border有样式。

column-gap单位是px或em,但不能是负数,默认值为normal(1em)。IE不支持该属性,Opera11+支持,在Firefox和Webkit下需要加上前缀-moz和-webkit。

虽然column-gap可以用来改变相邻列之间的距离,但在多列元素同时设置了column-width时,column-gap与column-width之和大于多列元素总宽度时,会导至列被撑破,并以第一列显示,此时的列宽自动调节到元素的总宽度。

column-rule同样具有border类似的属性:宽度column-rule-width(默认值为medium),样式column-rule-style(默认值为none),颜色column-rule-color,不同的是border占有一定的空间位置,而column-rule不占有任何的空间位置,column-rule-width增大并不会影响列的布局,只会将其往元素两边扩展,直到元素边缘为止。


③ 列的分栏符:break-before、break-after、break-inside

目前支持的浏览器很少,暂不介绍。


④ 填充列:column-fill

目前支持的浏览器很少,暂不介绍。


⑤ 跨越列:column-span

column-span主要用来定义一个分列元素中的子元素能跨列多少列。有时需要某个内容或某个标题不进行任何分列,需要其横跨所有列,此时就需要用到column-span属性。默认值为none,表示不跨越任何列;all表示跨越所有列。目前支持的浏览器只有Safari、Chrome、Opera11+,在Webkit下需要加上前缀-webkit。


.multiColumns {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}
.multiColumns h1 {
	background: red;
	-webkit-column-span: all;
	column-span: all;
}

  相关推荐:

布局方案之-多列布局

HTML- css多列布局

关于多列布局

以上是浅谈CSS3新特性之多列布局模块的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn