css3中新增属性：css3多列布局属性的总结（附实例）
css3中增加了多列布局的属性，什么是多列布局呢？所谓多列布局，就是创建多个列来对文本进行布局，像是报纸的排版差不多，那么，在本文中我们就来看一看多列布局中的一些相关属性及代码实例。
css3多列布局容器的属性：
column-width: auto | < length > ：给列定义一个最小宽度（min-width）。
auto: 列宽由其他元素决定。
length: 显式设置最小宽度。
column-count: auto | < integer >：定义列的数量。
auto: 元素只有一列。就像没有设置一样。
< integer >: 正整数值。取值是大于0的整数，负值无效。
columns: < column-width > || < column-count >：是column-width和column-count的简写。次序随意。
列宽 = （ 父元素宽度 - （列数-1） 列间隙 ） / 列数*
比如：父元素40em，分为4列，列间隙为2em。那么列宽为（ 40 - （4-1） * 2） / 4 = 8.5em。
如果显式设置的列宽小于这个宽度，它会以这个宽度展示。
如果显式设置的列宽大于这个宽度，它会按照合适的尺寸重新排列列宽和列数。当前设置的列宽和列数并不准确。
column-gap: normal | < length >：定义列间距。值过大时会撑破布局。
normal: 默认值，由浏览器解析，一般是lem。
< length >: 有浮点数字和单位标识符组成的长度值。如：2.1em。
column-rule: < column-rule-width > | < column-rule-style > | < column-rule-color >：定义列边框。
它的中心线始终和列间距的中心线一样。换言之，它总处于两列的中间。和border类似。如果列边框大于列间距，并不会自动消失。列边框超出列间距的部分就像是沉在文字的下方一样（背景效果）。
column-fill: auto | balance：定义多列中每一列的高度是否统一。
这个属性很奇怪。并且在浏览器中不统一。它有两个值：auto | balance。在 ie10/ie11/opera40/chrome52中测试的结果都是一样的，发现这两个属性并没有区别。在firefox49中测试，这两个属性是有区别的，其中balance是每列高度差不多（对齐），auto就自动合并成一列了，无论自己设置的是多少列。
css3多列布局项目（元素）属性：
column-span: none | all：定义一个元素横跨多少列。
如果我们常将标题横跨所有列。那么，column-span: all。其默认值是，column-span: none；表示不跨列。
css3多列布局代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>多列布局｜column-span</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrapper {
width: 40em;
margin:0 auto;
border: 1px solid #ccc;
/*多列布局*/
-moz-column-count: 4;
-webkit-column-count: 4;
column-count: 4;
-moz-column-gap: 2em;
-webkit-column-gap: 2em;
column-gap: 2em;
-moz-column-rule: .1em dashed #ccc;
-webkit-column-rule: .1em dashed #ccc;
column-rule: .1em dashed #ccc;
-webkig-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;
}
h1 {
font-size: 1.5em;
margin-bottom: 1em;
-moz-column-span: all;
-webkit-column-span: all;
column-span: all;
padding-bottom: 5px;
text-align: center;
border-bottom: 2px solid #ccc;
}
p {
margin-bottom: 1em;
text-indent: 2em;
line-height: 1.625;
font-size: .7em;
}
</style>
</head>
<body>
<div>
<h1>为什么您宁愿吃生活的苦，也不愿吃学习的苦？</h1>
<h3>一. 为什么大多数人宁愿吃生活的苦，也不愿吃学习的苦？</h3>
<p>记得小时候上学，学校每次放月假，爷爷就去车站接我回家。
那时家里离车站远，需要骑着车子来回。
一路上我们彼此相对无语，等到爷爷骑不动了，我们就这么一前一后推着车子走着，记得爷爷常常和我说：
“吃得苦中苦，方为人上人，你日后要好生读书。”
那时的我未解其意，只是默默记在心里，望着不远处稻田里的乡亲们弯腰割麦俯首插秧，我觉着他们太辛苦了。
几年过去了，我考入了省城上大学，学了这个城市最热门也最富前景的工程造价专业。
后来，我走进实习单位， 工地的环境有多么糟糕自不必多说，晴天尘土飞扬骄阳似火，雨天泥泞不堪污水四溢。
物质世界的贫瘠尚可以忍受，然而精神世界的荒芜会随着时间慢慢消磨你的梦想和纯真。
后来，我选择去了深圳，在那里我终于找到了自己热爱的行业，眼前陌生的一切都让我感到兴奋和欢愉。
人工智能、自动驾驶、虚拟现实、风投、天使轮这些名词让我看到了世界的另一面。
越是不断地拓宽知识面，越是觉得自己知识储备量的贫瘠与荒凉。</p>
<h3>二. 生活的痛苦使人麻痹，学习的痛苦让人清醒 ；过去不按思维而生活，终将有一天要按照生活而思维</h3>
<p>痛苦之所以不被人喜欢，大多数是因为人们从不会思考自己为何痛苦。
然而，这世上还有另一种痛苦是，对这个世界产生了失望的情绪，然后把自己对这个世界的失望，当作是自己本该如此，甚至误以为这就是吃苦的好处。
我总觉得苦难的意义，在于我们更好地去思考人生为何如此苦难，就像有人曾说：未经省察的人生，从不值得一过。
如果没有经过思索和自省，苦难终究只是苦难而已，没有任何意义。
有些人，年轻时总觉得学不学习无关紧要，反正自己体力好得很，只要自己身体好就能混口饭吃。
他们终将会明白，那些为了讨生活不得已而吃的苦，就是当年不吃学习苦的代价。
学习的苦，是枯燥的苦，是短期没有回报的苦，这种苦看得见，摸得着，谁都不愿吃。
生活的苦，是绝望的苦，是长期没有出路的苦，这种苦看不见，摸不着，谁都不想吃。
我从不喜欢自讨苦吃，如果我能通过学习和自我提升避免遇见这些痛苦的经历，我有什么理由不去学习？
生活其实并不苦，苦的是那个不知苦也不知如何避免吃苦的人生。
学习其实并不苦，苦的是早已被生活消磨掉的好奇心和敢于对未来报有期望的勇气。</p>
</div>
</body>
</html>运行效果：
相关文章推荐：
css3-columns多列布局_html/css_WEB-ITnose
以上是css3中新增属性：css3多列布局属性的总结（附实例）的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
HTML和React：标记与组件之间的关系
Apr 12, 2025 am 12:03 AM
HTML和React的关系是前端开发的核心，它们共同构建现代Web应用的用户界面。1)HTML定义内容结构和语义，React通过组件化构建动态界面。2)React组件使用JSX语法嵌入HTML，实现智能渲染。3)组件生命周期管理HTML渲染，根据状态和属性动态更新。4)使用组件优化HTML结构，提高可维护性。5)性能优化包括避免不必要渲染，使用key属性，保持组件单一职责。
H5和HTML5：网络开发中常用的术语
Apr 13, 2025 am 12:01 AM
H5与HTML5指的是同一个东西，即HTML5。HTML5是HTML的第五个版本，带来了语义化标签、多媒体支持、画布与图形、离线存储与本地存储等新功能，提升了网页的表现力和交互性。
如何在Debian上监控Nginx SSL性能
Apr 12, 2025 pm 10:18 PM
本文介绍如何在Debian系统上有效监控Nginx服务器的SSL性能。我们将使用NginxExporter将Nginx状态数据导出到Prometheus，再通过Grafana进行可视化展示。第一步：配置Nginx首先，我们需要在Nginx配置文件中启用stub_status模块来获取Nginx的状态信息。在你的Nginx配置文件（通常位于/etc/nginx/nginx.conf或其包含文件中）中添加以下代码段：location/nginx_status{stub_status
如何在Debian上升级Zookeeper版本
Apr 13, 2025 am 10:42 AM
在Debian系统上升级Zookeeper版本，可以按照以下步骤进行：1.备份现有配置和数据在进行任何升级之前，强烈建议备份现有的Zookeeper配置文件和数据目录。sudocp-r/var/lib/zookeeper/var/lib/zookeeper_backupsudocp/etc/zookeeper/conf/zoo.cfg/etc/zookeeper/conf/z
从文本到网站：HTML的力量
Apr 13, 2025 am 12:07 AM
HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。
运维工作中mac常用的软件推荐
Apr 12, 2025 pm 04:33 PM
Mac 运维工具推荐，打造高效工作环境：终端模拟器：iTerm2，增强效率和美观远程连接工具：Termius，安全管理多台服务器代码编辑器：VS Code，支持多种语言和丰富的扩展文件管理器：增强 Finder 技巧，提高效率监控工具：Datadog 或 Prometheus，及时发现服务器异常日志管理工具：ELK stack，收集、分析和可视化日志数据数据库管理工具：Sequel Pro 或 Postico，图形化管理数据库性能优化：定期清理系统垃圾、合理分配资源和及时更新软件
HTML：是编程语言还是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。
Debian上GitLab的插件开发指南
Apr 13, 2025 am 08:24 AM
在Debian上开发GitLab插件需要一些特定的步骤和知识。以下是一个基本的指南，帮助你开始这个过程。安装GitLab首先，你需要在Debian系统上安装GitLab。可以参考GitLab的官方安装手册。获取API访问令牌在进行API集成之前，首先需要获取GitLab的API访问令牌。打开GitLab仪表盘，在用户设置中找到“AccessTokens”选项，生成一个新的访问令牌。将生成的
