第 28 章 CSS3 多列布局
学习要点:
1.早期多列问题
2.属性及版本
3.属性解释
主讲教师:李炎恢
本章主要探讨 HTML5 中 CSS3 提供的多列布局,通过多列布局我们方便的创建流体的多列布局。
一.早期多列问题
我们有时想布局成报纸、杂志那样的多列方式(至少两列,一般三列以上),但早期 CSS 提供的布局方式都有着极大的限制。如果是固体布局,那么使用浮动或定位布局都可以完成。但对于流体的多列,比如三列以上,那只能使用浮动布局进行,而它又有极大的限制。因为它是区块性的,对于动态的内容无法伸缩自适应,基本无能力。
//五段内容,分为三列
<div>
<p>
我是第一段内容....省略的部分复制大量文本
</p>
<p>
我是第二段内容....省略的部分复制大量文本
</p>
<p>
我是第三段内容....省略的部分复制大量文本
</p>
<p>
我是第四段内容....省略的部分复制大量文本
</p>
<p>
我是第五段内容....省略的部分复制大量文本
</p>
</div>
//带标题的五段内容,分为三列
<div>
<h4>第一段标题</h4>
<p>
我是第一段内容....省略的部分复制大量文本
</p>
<h4>第二段标题</h4>
<p>
我是第二段内容....省略的部分复制大量文本
</p>
<h4>第三段标题</h4>
<p>
我是第三段内容....省略的部分复制大量文本
</p>
<h4>第四段标题</h4>
<p>
我是第四段内容....省略的部分复制大量文本
</p>
<h4>第五段标题</h4>
<p>
我是第五段内容....省略的部分复制大量文本
</p>
</div>
上门两组内容,如果想用浮动和定位实现流体三列,基本不可能。并且实际应用中,需求可能多变,要更改成四列或者五列呢?所以,CSS3 提供了多列布局属性 columns 来实现这个动态变换的功能。
二.属性及版本
CSS3 提供了 columns 多列布局属性等 7 个属性集合,具体如下:
属性 |
说明 |
columns |
集成 column-width 和 column-count 两个属性 |
column-width |
定义每列列宽度 |
column-count |
定义分分列列数 |
column-gap |
定义列间距 |
column-rule |
定义列边框 |
column-span |
定义多列布局中子元素跨列效果,firefox 不支持 |
column-fill |
控制每列的列高效果,主流浏览器不支持 |
由于 column 属性集尚未纳入标准,大多数浏览器必须使用厂商前缀才能访问,好在主流的浏览器都可以很好的支持了。下面是主流浏览器的支持和前缀情况。
Opera |
Firefox |
Chrome |
Safari |
IE |
|
支持需带前缀 |
11.5 ~ 29 |
2 ~ 40 |
4 ~ 45 |
3.1 ~ 8 |
无 |
支持不带前缀 |
无 |
无 |
无 |
无 |
10.0+ |
通过上面的表格,我们可以了解到,要想让最新的浏览器全部实现效果,都必须使用前缀。
//完整形式
-webkit-columns: 150px 4;
-moz-columns: 150px 4;
columns: border-box;
三.属性解释
为了方便演示,我们在 Firefox 火狐浏览器测试,只用-moz-前缀演示。
1.columns
columns 是一个复合属性,包含 columns-width 和 columns-count 这两种简写。意为同时设置分列列数和分列宽度。//分成四列,每列宽度自适应
-moz-columns: auto 4;
2.column-width
column-width 属性,用于设置每列的宽度。
//设置列宽
-moz-column-width: 200px;
这里设置了 200px,有点最小宽度的意思。当浏览器缩放到小于 200 大小时,将变成 1 列显示。而如果是 auto,则一直保持四列。
属性 |
说明 |
auto |
默认值,自适应。 |
长度值 |
设置列宽。 |
3.column-count
column-count 属性,用于设置多少列。
//设置列数
-moz-column-count: 4;
属性值 |
说明 |
auto |
默认值,表示就 1 列。 |
数值 |
设置列数。 |
4.column-gap
column-gap 属性,用于设置列间距
//设置列间距
-moz-column-gap: 100px;
属性值 |
说明 |
auto |
默认值,表示就 1 列。 |
数值 |
设置列数。 |
5.column-rule
column-rule 属性,设置每列中间的分割线//设置列边线
-moz-column-rule: 2px dashed gray;
属性 |
说明 |
column-rule |
<宽度> <样式> <颜色>的边框简写形式。 |
column-rule-width |
单独设置边框宽度。 |
column-rule-style |
单独设置边框的样式。 |
column-rule-color |
单独设置边框的颜色。 |
列边线不会影响到布局,它会根据布局的缩放自我调整是否显示。如果我们把页面缩放到只能显示一列时,它自动消失了。
6.column-span
column-span 属性,设置跨列大标题。
//跨列标题,由于火狐尚未支持,固使用 webkit
-webkit-column-span: all;
属性 |
说明 |
none |
默认值,表示不跨列。 |
all |
表示跨列。 |
第 28 章 CSS3 多列布局的更多相关文章
- css3 多列布局记
css3 多列布局 多列布局属性: columns:column-widht和column-count的缩写. column-width:定义每列列宽度. column-count:定义分列列数. c ...
- CSS3 多列布局——Columns
CSS3 多列布局——Columns 语法: columns:<column-width> || <column-count> 多列布局columns属性参数主要就两个属性参数 ...
- CSS3多列布局
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样! 在本章中,您将学习如下多列属性: column-count column-gap column-rule 浏览器支持 属性 浏览器 ...
- css3 多列布局使用
css3的出现,解决了不少前端的问题,比如动画,圆角等: 这里总结一下css3 的多列布局: w3c上给出了很多属性: 我们一般用到column-count.column-gap.column-wid ...
- css3多列布局瀑布流加载样式
看了一些网站的瀑布流加载,正好看到css3的多列属性,尝试着写了一个css做布局的瀑布流. 直接上代码: <!DOCTYPE html> <html lang="en&qu ...
- 第 29 章 CSS3 弹性伸缩布局[下]
学习要点: 1.新版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.新版本 新版本的 Flexbox 模型是 201 ...
- 第 29 章 CSS3 弹性伸缩布局[中]
学习要点: 1.混合过度版 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.混合过渡版 混合版本的 Flexbox 模型 ...
- 第 29 章 CSS3 弹性伸缩布局[上]
学习要点: 1.布局简介 2.旧版本 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 提供的用来实现未来响应式弹性伸缩布局方案,这里做一个初步的了解. 一.布局简介 CSS3 提供一种崭新的 ...
- CSS自学笔记(15):CSS3多列布局
在CSS3中,也新增了一些关于文本布局的几个比较简单的属性.通过这些新增的属性,我们可以对文本进行简单的排版,就想报纸和杂志那样. 新增的部分属性,以及浏览器支持情况: 属性 浏览器支持 column ...
随机推荐
- Atitit ocr识别原理 与概论 attilax总结
Atitit ocr识别原理 与概论 attilax总结 1.1. Ocr的过程与流程1 1.2. OCR不同技术细分略有不同,但大概原理是一样的. 即主要技术过程是:二值化(又叫归一化)----- ...
- C#设计模式-单例模式
单例模式三种写法: 第一种最简单,但没有考虑线程安全,在多线程时可能会出问题…… public class Singleton { private static Singleton _instance ...
- Spring MVC 学习总结(五)——校验与文件上传
Spring MVC不仅是在架构上改变了项目,使代码变得可复用.可维护与可扩展,其实在功能上也加强了不少. 验证与文件上传是许多项目中不可缺少的一部分.在项目中验证非常重要,首先是安全性考虑,如防止注 ...
- Linux演示 dd测试IO
dd测试IO,经常会用到,用来简单测试某个目录的读写性能. 本次测试环境:自己电脑的ubuntu系统-其他Unix/Linux系统也可以用dd. Tips:dd操作需要三思而行,搞清楚确认没问题再进行 ...
- 【转】FastCgi与PHP-fpm关系
刚开始对这个问题我也挺纠结的,看了<HTTP权威指南>后,感觉清晰了不少. 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. ...
- java设计模式(四)--单例模式
Singleton最熟悉不过了,下面学习单例模式.转载:http://zz563143188.iteye.com/blog/1847029 单例对象(Singleton)是一种常用的设计模式.在Jav ...
- html/css基础篇——关于浏览器window、document、html、body高度的探究
首先说明本人所理解的这几个元素的计算 window高度应当是文档所在窗口的可视高度(没有包括浏览器的滚动条),计算方法document.documentElement.clientHeight doc ...
- JS读书心得:《JavaScript框架设计》——第12章 异步处理
一.何为异步 执行任务的过程可以被分为发起和执行两个部分. 同步执行模式:任务发起后必须等待直到任务执行完成并返回结果后,才会执行下一个任务. 异步执行模式:任务发起后不等待任务执行完成,而是马上 ...
- Elasticsearch 教程--入门
1.1 初识 Elasticsearch 是一个建立在全文搜索引擎 Apache Lucene(TM) 基础上的搜索引擎,可以说 Lucene 是当今最先进,最高效的全功能开源搜索引擎框架. 但是 L ...
- java继承的对象中构造函数的调用顺序
建立两个继承关系的对象 public class Machine { public String machieNameString; public Machine() { System.out.pri ...