CSS学习笔记:columns

原创 2017年01月02日 21:41:37

概述

太长的文本行十分不容易阅读,CSS多列布局就是允许简单地定义多列文本。

使用多列布局

列计数器和宽度

有两个CSS属性控制是否实现多列布局和显示多少列: column-count 和column-width。
这两个属性可以同时使用,也可以只使用其中一个。

  • column-count 设置特定数量的列数,宽度会自动计算。
  • column-width 设置期望的最小列宽。如果 column-count 没有设置,那么浏览器就会以合适的宽度尽量显示更多的列。

如果同时设置了以上二者,那么column-count值就被当做栏目的最大值。
比如,对于250px的容器,如果设置column-width为100px,column-count为3,那么浏览器会生成2栏而不是3栏。

在多列块中,内容会自动从一列换到另一列中。

columns 属性简写

columns属性是以上两个属性的简写属性。

columns: 1em;/*column-width列的长度值*/
columns: 1;/*column-count列数*/
columns: auto;
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

高度平衡

CSS3多列规范需要列高平衡:即,浏览器自动设置最大列高,因此每列中的内容高度大致相同。

然而,一些情况下,明确设置最大列高也是有用的,这样内容从第一列开始,尽可能多的生成列,甚至会溢出右边沿。
因此,如果通过设置height 或 max-height 属性来限制列高,在生成新的一列之前每一列都会仅允许增加到这个高度。该模型对布局来说也更高效。

column-gap

列之间有缝隙。该值可通过设置多列模块的 column-gap 属性来修改。
如果没有设置column-gap值,则每个浏览器分别为其指定默认值。
一般最好使用em单位的长度,这样空隙能够随着文字大小的变化而变化。

column-rule

用于给间隔增加竖线样式实现视觉分隔。
也是一个简写属性,包含以下三个属性:

  • column-rule-width :线的宽度
  • column-rule-style:线的样式,和border-style取值相同。
  • column-rule-color:颜色

渐进增强与优雅降级

其实多栏布局是一项典型的渐进增强技术,多列属性会被不支持多列模型的浏览器忽略。因此,为这些浏览器创建单列结构而为支持多列的浏览器创建多列结构相对来说比较简单。

版权声明:本文为博主原创文章,未经博主允许不得转载。

css学习笔记

  • 2013年10月21日 16:26
  • 3KB
  • 下载

css学习笔记

  • 2012年02月13日 14:35
  • 556KB
  • 下载

CSS3----Columns:比table更好用的分列式布局方法

CSS3里的column系列属性提供了各种不同的功能,通过组合使用它们,你能得到相应的任何分栏式布局: column-count: 列数目 column-gap: 各列之间间隙宽度 column-wi...
  • damys
  • damys
  • 2014年05月04日 09:29
  • 9812

CSS学习笔记

  • 2011年12月12日 22:31
  • 2KB
  • 下载

CSS学习笔记

  • 2013年04月11日 09:16
  • 202KB
  • 下载

CSS之Multi-columns的跨列

css

html+javascript+css学习笔记

  • 2014年07月03日 22:16
  • 36KB
  • 下载

CSS3布局 —— Columns

一、多列布局 1.1 多列布局——Columns 为了能在Web页面中方便实现类似报纸、杂志那种多列排版的布局,W3C特意给CSS3增加了一个多列布局模块(CSS Multi Colu...

css3.0学习笔记

  • 2012年12月03日 16:36
  • 11.08MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS学习笔记:columns
举报原因:
原因补充:

(最多只允许输入30个字)