CSS3 知识量：11 - 43 - 138
columns是CSS3多列布局的基本属性，同时是一个复合属性，可以同时定义多列的列数和每列的列宽。其语法为：
columns : column-width | column-count
参数简要说明如下：
column-width：定义多列中每列的宽度。
column-count：定义多列中的列数。
下面是一个使用columns属性的示例：
<!DOCTYPE html>
<html>
<head>
<title>多列布局</title>
<meta charset="UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
padding: 5px;
margin: 10px;
width: 50em;
border: 1px solid #ccc;
/*设置多列布局*/
columns: 9em 4;
}
h1{
font-size: 1.5em;
margin-bottom: 1em;
}
p{
line-height: 2;
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Python发展历程</h1>
<p>自从20世纪90年代初Python语言诞生至2022年，它已被逐渐广泛应用于系统管理任务
的处理和Web编程。</p>
<p>1995 年，Guido van Rossum 在弗吉尼亚州的国家创新研究公司（CNRI）继续他在
Python 上的工作，并在那里发布了该软件的多个版本。</p>
<p>2000 年五月，Guido van Rossum和 Python 核心开发团队转到 BeOpen.com 并组
建了 BeOpen PythonLabs 团队。 同年十月，BeOpen PythonLabs 团队转到
Digital Creations (现为 Zope Corporation)。 </p>
<p>2001 年，Python 软件基金会 (PSF) 成立，这是一个专为拥有 Python 相关
知识产权而创建的非营利组织。 Zope Corporation 现在是 PSF 的赞助成员。</p>
<p>Python的创始人为荷兰人吉多·范罗苏姆 （Guido van Rossum）。1989年圣诞节
期间，在阿姆斯特丹，Guido为了打发圣诞节的无趣，决心开发一个新的脚本解释程序，
作为ABC语言的一种继承。之所以选中Python（大蟒蛇的意思）作为该编程语言的名字，
是取自英国20世纪70年代首播的电视喜剧《蒙提·派森的飞行马戏团》
（Monty Python's Flying Circus）。ABC是由Guido参加设计的一种教学语言。
就Guido本人看来，ABC这种语言非常优美和强大，是专门为非专业程序员设计的。
但是ABC语言并没有成功，究其原因，Guido认为是其非开放造成的。Guido决心在
Python中避免这一错误。同时，他还想实现在ABC中闪现过但未曾实现的东西。</p>
<p>就这样，Python在Guido手中诞生了。可以说，Python是从ABC发展起来，主要受到了
Modula-3（另一种相当优美且强大的语言，为小型团体所设计的）的影响。并且结合
了Unix shell和C的习惯。</p>
<p>Python 已经成为最受欢迎的程序设计语言之一。自从2004年以后，python的使用率
呈线性增长。Python 2于2000年10月16日发布，稳定版本是Python 2.7。
Python 3于2008年12月3日发布，不完全兼容Python 2。2011年1月，它被TIOBE
编程语言排行榜评为2010年度语言。</p>
<p>由于Python语言的简洁性、易读性以及可扩展性，在国外用Python做科学计算的
研究机构日益增多，一些知名大学已经采用Python来教授程序设计课程。例如
卡耐基梅隆大学的编程基础、麻省理工学院的计算机科学及编程导论就使用Python
语言讲授。众多开源的科学计算软件包都提供了Python的调用接口，例如著名的
计算机视觉库OpenCV、三维可视化库VTK、医学图像处理库ITK。而Python专用的
科学计算扩展库就更多了，例如如下3个十分经典的科学计算扩展库：NumPy、SciPy
和matplotlib，它们分别为Python提供了快速数组处理、数值运算以及绘图功能。
因此Python语言及其众多的扩展库所构成的开发环境十分适合工程技术、科研人员
处理实验数据、制作图表，甚至开发科学计算应用程序。2018年3月，该语言作者在
邮件列表上宣布Python 2.7将于2020年1月1日终止支持。用户如果想要在这个日期
之后继续得到与Python 2.7有关的支持，则需要付费给商业供应商。</p>
</div>
</body>
</html>显示的效果为：
列宽属性column-width类似于给列定义一个最小宽度（min-width）。其可以单独使用，也可以和多列布局的其他属性配合使用。其语法为：
column-width : auto | length
参数简要说明如下：
auto：默认值，元素多列的列宽由其他属性决定，例如配合使用column-count属性决定列宽。
length：使用固定值设置列宽，由数值和长度单位组成，但数值只能是正值。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>多列布局</title>
<meta charset="UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
padding: 5px;
margin: 10px;
width: 60%;
border: 1px solid #ccc;
/*设置多列布局*/
column-width: 9em;
}
h1{
font-size: 1.5em;
margin-bottom: 1em;
}
p{
line-height: 2;
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Python发展历程</h1>
<p>自从20世纪90年代初Python语言诞生至2022年，它已被逐渐广泛应用于系统管理任务
的处理和Web编程。（后续内容略...）</p>
</div>
</body>
</html>显示的效果为：
如上所示，随着浏览器窗口大小的变化，wrapper容器宽度也在变化，当容器太小时，无法容纳指定宽度的一列时，将由一列填满整个容器。当容器宽度大于指定宽度时，就会根据可容纳的列数进行自动多列布局，此时列数由容器大小决定。
列数的计算公式：列数=（容器宽度-列间距）/列宽。如果结果是小数，则舍弃小数部分。
column-count属性用于给元素设置列数和允许的最大列数。其语法为：
column-count : auto | integer
参数简要说明如下：
auto：默认值，表示只有一列。
integer：正整数值，用于定义列数。
指定列数后，不管容器大小，总是显示固定的列数。
column-gap属性用于设置列与列之间的间距。其语法为：
column-gap : normal | length
参数简要说明如下：
normal：默认值，表示由浏览器决定列间距，一般为1em。
length：由浮点数字和单位标识符组成的长度值来指定列间距。单位可用px、em等，值不能是负值。
column-rule属性用于定义列与列之间的边框宽度、边框样式和边框颜色，类似于常用的border属性。注意：column-rule不占用任何空间位置，不影响元素宽度的计算。其语法为：
column-rule : column-rule-width | column-rule-style | column-rule-color
column-rule-width、column-rule-style和column-rule-color既可以做column-rule的值，又是column-rule属性派生出的3个列边框属性。
column-rule-width：用于定义列边框的宽度，默认值为medium，可以使用任意浮点数，但不能是负值，也可以使用关键字medium、thick和thin。
column-rule-style：用于定义列边框的样式，默认值为none。可使用关键字none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset。
column-rule-color：用于定义列边框的颜色，默认值为前景色的值，除了设置各种颜色，也可以设为透明色（transparent）。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>多列布局</title>
<meta charset="UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
padding: 5px;
margin: 10px;
width: 50em;
border: 3px solid #5fa134;
/*设置多列布局*/
columns: 9em 4;
/*设置列边框*/
column-rule: 3px dashed #5fa134;
}
h1{
font-size: 1.5em;
margin-bottom: 1em;
}
p{
line-height: 2;
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Python发展历程</h1>
<p>自从20世纪90年代初Python语言诞生至2022年，它已被逐渐广泛应用于系统管理任务
的处理和Web编程。（后续内容略...）</p>
</div>
</body>
</html>显示的效果为：
column-span用于定义一个分列元素中的子元素能否跨列。其语法为：
column-span : none | all
参数简要说明如下：
none：默认值，表示不跨越任何列。
all：表示跨越所有列。
下面是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>多列布局</title>
<meta charset="UTF-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper{
padding: 5px;
margin: 10px;
width: 50em;
border: 3px solid #5fa134;
/*设置多列布局*/
columns: 9em 4;
/*设置列边框*/
column-rule: 3px dashed #5fa134;
}
h1{
font-size: 1.5em;
margin-bottom: 1em;
text-align: center;
/*设置跨列属性*/
column-span: all;
}
p{
line-height: 2;
font-size: 0.8em;
}
</style>
</head>
<body>
<div class="wrapper">
<h1>Python发展历程</h1>
<p>自从20世纪90年代初Python语言诞生至2022年，它已被逐渐广泛应用于系统管理任务
的处理和Web编程。（后续内容略...）</p>
</div>
</body>
</html>显示的效果为：
column-fill属性用于定义多列中每一列的高度是否统一，可以实现让所有列具有相同的高度效果。其语法为：
column-fill : auto | balance
参数简要说明如下：
auto：默认值，各列的高度根据内容的变化自动变化。
balance：各列的高度根据内容最多的一列的高度进行统一。
Copyright © 2017-Now pnotes.cn. All Rights Reserved.
编程学习笔记 保留所有权利
MARK:3.0.0.20240214.P35
From 2017.2.6