《CSS3实战》笔记--多列布局

本文是《CSS3实战》笔记,详细介绍了如何使用columns、column-width、column-count等属性实现多列布局,包括列宽度、列数、列间距、边框样式以及跨列显示等效果。内容涵盖多种实战场景,如文章多栏显示、固定宽度栏目、固定列数版面、疏朗文档版面、边框效果和标题跨列显示等。
摘要由CSDN通过智能技术生成

通过阅读和学习书籍《CSS3实战》总结
《CSS3实战》/成林著.—北京机械工业出版社2011.5

  多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布局。灵活使用多列布局特性,可以实现在多列中显示文字和图片,从而节省大量的网页空间。如果网页上的文字很长,多列布局特性就能够发挥它的用武之地。
兼容性参考:http://www.w3.org/TR/css3-multicol/

columns属性–定义多列布局

  columns是多列布局特性的基本属性,类似边框特性中的border属性,该属性可以同时定义多列的数目和每列的宽度。基本语法如下:

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

取值简单说明:

<column-width>:定义每列的宽度。
<column-count>:定义列数。

column-width属性:定义列宽度

column-count属性:定义列数

column-width:<length> | auto 
column-count:<integer> | auto

取值简单说明:

<length>:由浮点数字和单位标识符组成的长度值。不可为负值。
auto:根据浏览器计算值自动设置。
<integer>:定义栏目的列数,取值为大于0的整数。如果column-widthcolumn-count属性没有明确值,即该值为最大列数。

column-gap属性–定义列间距

column-gap:normal | <length>

取值简单说明:

normal:根据浏览器默认设置进行解析,一般为1em。
<length>:由浮点数字和单位标识符组成的长度值,不可为负值。

column-rule属性–定义列边框样式

column-rule:<length> | <style> | <color> | <transparent>

取值简单说明:
<length>:由浮点数字和单位标识符组成的长度值,不可为负值。功能与column-rule-width属性相同。
<style>:定义列边框样式。功能与column-rule-style属性相同。
<color>:定义列边框的颜色。功能与column-rule-color属性相同。
<transparent>:设置边框透明显示。

column-span属性–定义跨列显示

column-span1 | all

取值简单说明:

1:只在本栏中显示。
all:将横跨所有列,并定位在列的Z轴之上。

column-fill属性–定义栏目高度

column-fill : auto | balance

简单取值说明:

auto:各列的高度随其内容的变化而自动变化。
balance:各列的高度将会根据内容最多的那一列的高度进行统一。

分列打印(略)

参考文章

实战体验:

HTML代码:

<body>
<h1>故都的秋(选段)</h1>
<h2>郁达夫</h2>
<p> 秋天,无论在什么地方的秋天,总是好的;可是啊,北国的秋,却特别    地来得清,来得静,来得悲凉。我的不远千里,要从杭州赶上青岛,更要从青岛赶上北平来的理由,也不过想饱尝一尝这"秋",这故都的秋味。 </p>
<p>江南,秋当然也是有的;但草木雕得慢,空气来得润,天的颜色显得淡,并且又时常多雨而少风;一个人夹在苏州上海杭州,或厦门香港广州的市民中间,浑沌沌地过去,只能感到一点点清凉,秋的味,秋的色,秋的意境与姿态,总看不饱,尝不透,赏玩不到十足。秋并不是名花,也并不是美酒,那一种半开,半醉的状态,在领略秋的过程上,是不合适的。 </p>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值