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:颜色

渐进增强与优雅降级

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

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

相关文章推荐

html+javascript+css学习笔记

  • 2014-07-03 22:16
  • 36KB
  • 下载

css学习笔记

  • 2012-02-13 14:35
  • 556KB
  • 下载

CSS之Multi-columns的列数和列宽

css

CSS学习笔记

CSS学习笔记

  • 2013-04-11 09:16
  • 202KB
  • 下载

【HTML5学习笔记】22:CSS盒模型 下

本节学习元素的可见性、盒子的各种类型、浮动问题。元素可见性 visibility的三种属性:①visible即默认可见。②hidden隐藏。③collapse隐藏表格的行与列(有的浏览器不支持)。*...

css学习笔记

CSS学习笔记:浮动

浮动float: left; float: right; float: none;CSS的float 属性可以使一个元素脱离正常的文档流,然后被安放到它所在容器的的左端或者右端,并且其他的文本和行内元...

css3.0学习笔记

  • 2012-12-03 16:36
  • 11.08MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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