为了实现类似报纸，杂志的多列排版的布局，CSS3新增了一个多列布局模块（css multi column layout module）。主要应用在文本的多列布局方面。

语法：

colums:<column-width> || <column-count>

譬如三栏布局，每栏内容宽度为150px

columns: 150px 3;

column-width属性

column-width属性在定义元素列宽的时候，既可以单独使用，也可以和多列属性中其他属性配合使用。

column-width: auto | <length>

如果设置为auto或者没有显式的设置值时，元素多列的列宽将由其他属性来决定
也可以设置固定值来设置列宽，只能为正值

考虑浏览器兼容性：

-webkit-column-width
-moz-column-width
-o-column-width
-ms-column-width

column-count属性

column-count属性主要用来给元素指定想要的列数和容许的最大列数

column-count:auto || <integer>

auto就是默认值，表示元素只有一列
<integer>为正整数值

column-gap属性

column-gap属性用来设置列与列之间的间距：

column-gap:normal || <length>

normal就是默认值 1em，单位是px的也就是font-size的值
<length>设置列与列之间的距离，可以是任何正数的px或em的值

column-rule属性

column-rule属性主要用来定义列与列之间的边框宽度、边框样式和边框颜色。类似border，但它不占据任何空间位置。

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>

column-rule-width：定义列边框的宽度，默认值medium，说明是可以接受关键词的值：medium、thick、thin。接受任何浮点数但就不能是负数
column-rule-style：定义列边框样式，默认none，可接受的值有关键词none，hidden，dotted，dashed，solid，double，groove，ridge，inset，outset
column-rule-color：定义列边框颜色

column-span属性

column-span属性定义一个分列元素中的子元素能跨列多少。该属性用于当需要一段内容或标题不进行分列，也就是横跨所有列。

column-span:none | all

关注我吧

关注「前端一起学」公众号，看着项目进阶学习，让我们一起学前端，一起进步。

CSS3新特性-多栏布局相关推荐

web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
Html5、CSS3新特性
h5的新特性? 1.新增一些语义化标签 <article> <section> <aside><header> <footer><n ...
CSS3新特性——新增选择器，2D/3D转换，动画
CSS3新特性--新增选择器,2D/3D转换,动画欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页 ...
CSS学习笔记(一) CSS基础+CSS3新特性
思维导图文章目录思维导图 1. CSS 简介 2. CSS 引入方式 2.1 行内样式表 2.2 内部样式表 2.3 外部样式表 2.4 CSS 引入方式总结 3. CSS 选择器 3.1 CSS ...
h5新标签和css3新特性
h5新标签和css3新特性一.h5布局元素二.css3新增样式 1.边框圆角 2.阴影 3.形变:旋转.缩放.位移 4.transform-origin 属性三.过渡效果四.动画效果 1. k ...
CSS3新特性总结及CSS组件、特效汇总
本文分2部分: 之前写的CSS3新特性详解篇,共6篇博文总结: 常见的一些CSS组件.效果汇总(不包括BootStrap等前端框架已实现的CSS组件): 一.CSS3新特性总结 1.CSS3选择器.边 ...
（前端知识点）CSS3 新特性与html5 新特性
1. CSS3 新特性有哪些? 答: 1.颜色: 新增 RGBA ,HSLA 模式 2. 文字阴影(text-shadow.) 3.边框: 圆角(border-radius)边框阴影: box-sha ...
H5和CSS3新特性总结
说到H5C3会不会觉得东西好多啊,今天就整理了一份总结性的内容: CSS3选择器有哪些? 答:属性选择器.伪类选择器.伪元素选择器. CSS3新特性有哪些? 答:1.颜色:新增RGBA,HSLA模式 ...
01-移动端开发教程-CSS3新特性（上）
1. 移动端开发课程概述移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

CSS3新特性-多栏布局

关注我吧

CSS3新特性-多栏布局相关推荐

最新文章

热门文章