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

最新推荐文章于 2024-10-11 11:29:55 发布

「已注销」

最新推荐文章于 2024-10-11 11:29:55 发布

阅读量9.2k

点赞数 1

分类专栏： Web开发文章标签： css3 布局

本文链接：https://blog.csdn.net/Lovejulyer/article/details/51276803

版权

本文是《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-width和column-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-span：1 | all

取值简单说明：

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

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

column-fill ： auto | balance

简单取值说明：

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

分列打印（略）

参考文章：

实战体验：

HTML代码：

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