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新特性之多列布局模块的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609789.html
微信扫一扫 
支付宝扫一扫 
