CSS多列布局
前面的话
CSS新增了多列布局特性,可以让浏览器确定何时结束一列和开始下一列,无需任何额外的标记。简单来说,就是CSS3多列布局可以自动将内容按指定的列数排列,这种特性实现的布局效果和报纸、杂志类排版非常相似。本文将详细介绍CSS多列布局的基本属性和用法
列宽
column-width主要用于给元素指定最优的列宽度,实际列宽可能会更宽或更窄。如果不设置高度,文字将自动撑满整列,且最后一列的标点会溢出到容器外
[注意]IE10+和chrome浏览器支持标准写法,而firefox、safari浏览器及移动端android、IOS需要添加前缀
column-width
值: auto | <length>
初始值: auto
应用于: block、inline-block、table-cell(firefox不支持为table-cell设置该属性)
继承性: 无
[注意]column-width不可为0和负值;当column-width的值为auto或column-width的值大于元素宽度width一半时,没有分列效果(更准确地,由其他属性来决定)
列数
column-count主要用于给元素指定允许的最大列数
[注意]IE10+和chrome浏览器支持标准写法,而firefox、safari浏览器及移动端android、IOS需要添加前缀
column-count
值: auto | <length>
初始值: auto
应用于: block、inline-block、table-cell(firefox不支持为table-cell设置该属性)
继承性: 无
[注意]column-count不可为0和负值;当column-count的值为auto时,默认没有分列效果(更准确地,由其他属性来决定)
列间距
列间距column-gap用于定义相邻两列之间的空白间距
[注意]IE10+和chrome浏览器支持标准写法,而firefox、safari浏览器及移动端android、IOS需要添加前缀
column-gap
值: normal | <length>
初始值: normal
应用于: block、inline-block、table-cell
继承性: 无
[注意]column-gap的normal值默认情况下相当于1em。column-gap值不可为负值
列rule
该属性用于绘制位于列间距水平中心的线条。该样式由column-rule-width、column-rule-style、column-rule-color这三条样式组成
[注意]IE10+和chrome浏览器支持标准写法,而firefox、safari浏览器及移动端android、IOS需要添加前缀
column-rule
值: <column-rule-width> || <column-rule-style> || <column-rule-color>
标准中说column-rule类似于border,但实际更类似于outline,因为该样式并不占据实际的物理尺寸。outline详细情况移步至此
[注意]如果column-rule-width的宽度大于column-gap的宽度,则可能会显示在列框内容中
跨列
column-span属性用来定义子元素是否跨列
[注意]firefox不支持该属性,IE10+和chrome浏览器支持标准写法,而safari浏览器及移动端android、IOS需要添加前缀
column-span
值: none | all
初始值: none
应用于: block元素、table-cell元素(只有safari支持为table-cell设置该属性)
继承性: 无
none: 默认不跨列
all: 跨越所有列
[注意]当跨列元素被绝对定位(包括固定定位)或浮动后,跨列将不生效
[注意]当跨列元素与column-rule的修饰线重叠时,在IE和safari中,跨列元素将覆盖修饰线,而chrome浏览器存在bug,跨列元素的文本覆盖修饰线,但跨列元素的背景可能会消失。
列填充
在列布局中,有时由于内容不足,多列中的最后列往往没有足够内容填充,这时要实现所有列都具有相同高度的效果,需要使用列填充属性column-fill
column-fill
值: auto | balance
初始值: auto
应用于: block、inline-block
继承性: 无
auto: 默认各列高度随内容变化而变化
balance: 各列高度根据内容最多的一列进行统一
[注意]目前只有firefox支持带前缀的column-fill属性
多列
一般地,我们只关心是否分列以及列宽多少,对列间距并不考虑。于是,column这个column-width和column-count的复合属性就得到了比较广泛的使用
columns: column-width || column-count
[注意]由于column-width和column-count这两个值的单位不同,所以顺序无关
要知道,多列布局主要由列宽、列间距、列数及元素宽度影响,其布局等式是
元素宽度 = 列数 * 列宽 + (列数-1)*列间距 <=> 列数*(列宽+列间距) - 列间距 = 元素宽度
或者, 列数 = (元素宽度+列间距)/(列宽+列间距)
或者, 列宽 = (元素宽度+列间距)/列数 - 列间距
此等式中,列间距为定值,其他三个值为可变值,以下是各个值推算情况,其中N为实际列数,W为实际列宽
【1】如果元素宽度为auto,且列宽和列数都不是auto
则 N = column-count W = column-width;
【2】如果列宽为auto,但列数不是auto,元素宽度不为auto
则 N = column-count W = max(0,(元素宽度 - ((N-1)*列间距))/N)
【3】如果列宽不为auto,但列数是auto,元素宽度不为auto
则 N = max(1,floor((元素宽度 + 列间距) / (列宽 + 列间距 )) W = ((元素宽度 + 列间距) / N) - 列间距
【4】如果列宽和列数都不是auto,元素宽度不为auto
则 N = min(列宽 , floor((元素宽度 + 列间距) / (列宽 + 列间距))) W = ((元素宽度 + 列间距) / N) - 列间距
[注意]若列数为小数,只保留整数部分
[注意]所有的情况都是先推算出实际列数,再由实际列数推算实际列宽
CSS多列布局的更多相关文章
- css两列布局,一边固定宽度,另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
- html5 css多列布局
p{ text-indent: 2em; line-height: 2em;}h4{ -webkit-column-span:all; background: green; ...
- css三列布局之双飞翼pk圣杯
三列布局:两边定宽,中间自适应! 看到这个问题,我第一眼想的就是两边定宽float左右,中间加一个margin宽度自适应或者直接设一个overflow:hidden触发bfc机制,这样也可以,看上去也 ...
- CSS多列布局Multi-column、伸缩布局Flexbox、网格布局Grid详解
新css属性为我们提供了更加便捷的网页布局方式.来自微软的thomas lewis将带你认识去Grid Alignment,Flexibox Box以及Multi-column Layout这三大领域 ...
- CSS多列布局(实例)
前言 一列布局 二列布局 三列布局 1 一列布局 一列布局: HTML部分 <!DOCTYPE html> <html> <head> <meta chars ...
- day32—CSS多列布局学习
转行学开发,代码100天——2018-04-17 关于多列布局,前期已经梳理过,今天的培训课程学习中再次提及,趁此也做个总结和检验. 多列布局的介绍参考: day08—css布局解决方案之多列布局 ...
- [CSS布局]简单的CSS三列布局
前言 公司终于可以上外网了,近期在搞RN的东西,暂时脑子有点晕,等过段时间再来写点总结.倒是最近有个新学前端的同学经常会问一些基础知识,工作空闲写了小Demo给他看,全是很基础的知识,纯粹是顺便记录在 ...
随机推荐
- 个人博客作业week3——案例分析
1.调研 & 评测 1.我的用户体验 win10应用版: Bug1:例句经过翻译与其给出的译文相差太多 上图是应用给出的每日一句及其译文. 将其复制入翻译,就可以看出翻译过后的句子一点也不通顺 ...
- java设计模式--简单工厂模式
简单工厂设计模式 工厂模式就是专门负责将大量有共同接口的类实例化,而且不必事先知道每次是要实例化哪一个类的模式.它定义一个用于创建对象的接口,由子类决定实例化哪一个类. 核心知识点如下: (1) 大 ...
- Java中的一个类怎么调用另一个类中的方法
如果另一个类中的那个方法是私有的话,就不能直接调用到,如果是其他类型的话看情况,如果是静态的(static)话,直接用类名可以调用到,如果是非静态的,就需要利用另一个类的实例(也就是用那个类生成的对象 ...
- jq判断 复选框是否被选中 亲测可用
var shortName = $('#shortName').is(':checked')?1:0;
- botbrew下写glib2程序
作者 He YiJun – storysnail<at>gmail.com 团队 ls 版权 转载请保留本声明! 本文档包含的原创代码根据General Public License,v3 ...
- RCP中如何使用代码安装、运行plugins
其实在google或者http://www.eclipse.org/forums/就能够找到这个问题的答案. 搜索关键字:rcp install plugins\bundles programmati ...
- ENode 1.0 - 整体架构介绍
前言 今天是个开心的日子,又是周末,可以安心轻松的写写文章了.经过了大概3年的DDD理论积累,以及去年年初的第一个版本的event sourcing框架的开发以及项目实践经验,再通过今年上半年利用业余 ...
- 冲刺阶段 day 14
项目进展 经过这几个星期的努力,我们已经完成了我们的软件工程项目,经过多次测试,项目已经可以准确无误地运行. 存在问题 测试期间,未发现问题. 心得体会 在这几个星期的努力下,我们终于完成了我们预期的 ...
- [.net 面向对象编程基础] (3) 基础中的基础——数据类型
[.net 面向对象编程基础] (3) 基础中的基础——数据类型 关于数据类型,这是基础中的基础. 基础..基础..基础.基本功必须要扎实. 首先,从使用电脑开始,再到编程,电脑要存储数据,就要按类型 ...
- 程序员必须知道的几个Git代码托管平台
上一篇博客中2015继续任性——不会Git命令,照样玩转Git我们简单的介绍了在VS2013中使用Git,和GitHub客户端的使用.那么使用Git到底有什么好处呢?最为明显的是支持Git代码托管的平 ...