0x00 前言简述
描述: 由于篇幅过长的原因，作者将CSS布局文章分为两个小节，前面相信大家已经跟着【WeiyiGeek】作者一起学习了CSS Flexbox以及网格布局的基础知识了，现在我们在此基础上继续深入学习CSS 多列布局、浮动布局以及了解表格布局及其他传统布局，它是学习CSS之路上一个重点，是在进行前端开发时常常使用到的，所以说我们需要认真学习，若有不懂的地方可以在文章末尾，以及作者交流群【在公众号回复微信交流群】进行留言交流。
同时，欢迎各位看友支持《#前端学习之路》专栏的更新。
复习：CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置，本章将主要针对正常布局流, FlexBox(弹性盒子), Grid(网格), Column (多列布局), 以及最后再了解一下CSS 表格布局（它是传统的布局方式，在当前开发中不建议使用，我们简单了解即可）等技术进行讲解。
CSS 布局相关属性一览
代码语言：javascript复制# 传统布局
display (前已学习): 此章节主要的几个布局属性，即 flex、grid
position (前已学习)：此章节主要的几个布局属性, 即 静态定位（默认）、相对定位、绝对定位、固定定位(类似于绝对)、粘性定位。
# 常规流布局,即在你没有改变默认布局规则情况下的页面元素布局方式。
# FlexBox 流布局
display: flex; 指定元素的布局为 flexible。
display: inline-flex; 元素的子元素作为 flex 项但是该元素的行为类似于行内元素。
flex: 设置 flex 项的动态尺寸，表示每个 flex 项沿主轴的可用空间大小, 实际上它可以指定最多三个不同值的缩写属性。
flex-grow : 指定 flex 元素的flex 增长系数。
flex-shrink ： 指定了从每个 flex 项中取出多少溢出量，以阻止它们溢出它们的容器，同样是无单位比例。
flex-basis : 指定 flex 元素在主轴方向上的初始大小。
flex-direction : 指定主轴的方向（弹性盒子子类放置的地方），其默认值为 row (`行布局`)，当然你可以设置 column (`列布局`) ，以及 row-reverse (`行元素排列的方向相反`) ， column-reverse (`列元素排列的方向相反`)
flex-wrap : 当弹性盒子子类元素宽度超过父元素宽度时，使用其 wrap 值可以自动换行。
flex-flow : 它是 flex-direction 和 flex-wrap 两个属性的缩写，其属性值设置, 值为 row wrap 或者 row 单用。
# Grid 布局
grid-template-columns 属性: 定义网格列的数量及宽度大小，建议使用 fr 单位来设置灵活网格，此单位代表网格容器中可用空间的一份(`1fr 1fr 1fr` = `repeat(3, 1fr);`=>表明了后续列宽的配置要重复多少次)
grid-template-rows 属性: 定义网格行的数量及行高大小。
grid-auto-columns 属性: 默认是 auto 大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。
grid-auto-rows 属性: 默认是 auto大小会根据放入的内容自动调整，手动设定隐式网格轨道的大小。
grid-gap 属性：同时定义网格的列、行间隙，若想单独定义请看下面两个属性。
grid-column-gap 属性：定义列间隙。
grid-row-gap 属性 ：定义行间隙。
grid-column 属性 ：用于指定网格项目`列`的大小和位置，开始与结束的线的序号要使用/符号分开。
grid-column-start 属性 ：指定网格项在网格`列`中的起始位置。
grid-column-end 属性 ：指定网格项在网格`列`中的起始位置。
grid-row 属性 ：用于指定网格项目`行`的大小和位置，开始与结束的线的序号要使用/符号分开。
grid-row-start 属性 ：指定网格项在网格`行`中的起始位置
grid-row-end 属性 ：指定网格项在网格`行`中的起始位置
grid-template-areas 属性 ：定义放置元素的区域，是网格区域 grid areas 在 CSS 中的特定命名。
# 多列布局 multicol
column-count: 创建指定数量的列
column-width: 创建列具有弹性的宽度（尽可能按照宽度创建列，若容器与宽度成比例的数量）
column-fill：此属性控制在分解为列时如何平衡元素的内容。
column-span：属性使元素在其值设置为all时可以跨所有列。
column-gap：设置列间间隙
column-rule：在列间加入一条分割线(颜色、样式、宽度)
column-rule-color：设置分割线颜色
column-rule-style：设置分割线样式
column-rule-width：设置分割线宽度
# Table 布局 display: table (不建议，简单了解)
display: table-row-group ：该元素的行为类似于 HTML 的 <tbody> 元素。
display: table-header-group：该元素的行为类似于 HTML 的 <thead> 元素。
display: table-footer-group： 该元素的行为类似于 HTML 的 <tfoot> 元素。
display: table-row: 该元素的行为类似于 HTML 的 <tr> 元素。
display: table-cell: 该元素的行为类似于 HTML 的 <td> 元素。
display: table-column-group: 该元素的行为类似于 HTML 的 <colgroup> 元素。
display: table-column: 该元素的行为类似于 HTML <col> 元素。
display: table-caption: 该元素的行为类似于 HTML 的 <caption> 元素。
display: ruby-base 实验性 : 该元素的行为类似于 HTML 的 <rb> 元素。
display: ruby-text 实验性 : 该元素的行为类似于 HTML 的 <rt> 元素。
display: ruby-base-container 实验性 : 该元素是作为匿名盒子生成的。
display: ruby-text-container 实验性 : 该元素的行为类似于 HTML 的 <rtc> 元素。
0x01 CSS 页面布局
4.多列布局（Multicol）
描述: 多列布局(multicol)实际上是一种把内容按列排序的方式，由于在 web 内容里让你的用户在一个列上通过上下滚动来阅读两篇相关的文本是一种非常低效的方式，那么把内容排列成多列可能是一种有用的技术；就像文本在报纸文章上排列的方式。
网格布局的相关属性
代码语言：javascript复制column-count: 创建指定数量的列
column-width: 创建列具有弹性的宽度（尽可能按照宽度创建列，若容器与宽度成比例的数量）
column-fill：此属性控制在分解为列时如何平衡元素的内容。
column-span：属性使元素在其值设置为all时可以跨所有列。
column-gap：设置列间间隙
column-rule：在列间加入一条分割线(颜色、样式、宽度)
column-rule-color：设置分割线颜色
column-rule-style：设置分割线样式
column-rule-width：设置分割线宽度
break-inside: 控制 multicol 和多页媒体中的内容拆分、折断.
column-count - 列数设置
描述: 此属性是描述元素的列数。
语法参数:
代码语言：javascript复制column-count: auto | <number>
/* 参数 */
auto ：用来表示列的数量由 column-width 属性指定。
<number> ：正数 <integer> ，用来描述元素内容被划分的理想列数。
/* 格式 */
column-count: 3;
column-count: auto;
column-width - 列宽设置
描述: 此属性设置多列布局中的理想列宽，容器将创建尽可能多的列，其中任何列的宽度都不小于列宽值，如果容器的宽度小于指定值，则单列的宽度将小于声明的列宽。
语法参数:
代码语言：javascript复制column-width =
auto |
<length [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage> )
/* 格式 */
/* Keyword value */
column-width: auto;
/* <length> values */
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;
示例演示:
- 示例1.三列布局与列宽设置。我们先来看看一个最简单的
多列布局的示例, 要把一个块转变成多列容器(multicol container)，我们可以使用column-count属性来告诉浏览器我们需要多少列，也可以使用column-width来告诉浏览器以至少某个宽度的尽可能多的列来填充容器。
<style>
body {
max-width: 800px;
margin: 0 auto;
}
.container {
/* 实际上 column-count、 column-width 设置一个即可，显示与父容器宽度有关*/
column-count: 3;
column-width: 200px;
border: 1px solid black;
margin: 10px;
}
</style>
<div class="container">
<h1>Multi-column layout 示例1</h1>
<p>Paragraph 1.网名 & 历史网名: WeiyiGeek 、唯一、 Weiy_、Weiy-Buf</p>
<p>Paragraph 2.兴趣爱好: 计算机互联网技术、网络安全技术、学|看|写代码、搬砖|找轮子、单人运动</p>
</div>
<div class="container">
<h1>Multi-column Layout 示例2</h1>
<p>
作者【WeiyiGeek】现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。
</p>
<p>从上面的技术栈中, 切实的体会到自己的知识匮乏, 我朝着技术狂热者前进，在漏洞挖掘、系统安全运维以及开发方面不断学习实践, 其中有血与泪同时也从中收获满满，并找到人生的价值方向，我坚信编程会改变世界、改变我的一生;</p>
</div>
执行结果:
上述演示中，我们指定了该容器的 column-width 为 200 像素，这让浏览器创建了尽可能多的 200 像素的列来填充这一容器，接着他们共同使用剩余的空间来伸展自己的宽度。
column-fill - 列平衡元素内容
描述: 该CSS属性控制在分解为列时如何平衡元素的内容。
语法参数:
代码语言：javascript复制/* 语法: */
column-fill = auto | balance | balance-all
/* 参数: */
balance: 列按顺序填充, 内容只占用所需的空间，可能会导致某些列保持为空。
均衡: 内容在列之间平均分配。
/* 格式: */
column-fill: auto;
column-fill: balance;
column-fill: balance-all;
column-gap - 列间隙设置
描述: 该CSS属性设置元素的列之间的间隙（檐沟）的大小。
代码语言：javascript复制/* 语法 */
column-gap = normal | <length-percentage [0,∞]>
/* # 格式 */
/* Keyword value */
column-gap: normal;
/* <length> values */
column-gap: 3px;
column-gap: 2.5em;
/* <percentage> value */
column-gap: 3%;
column-gap - 绘制线的宽度、样式和颜色
描述: 此 CSS 属性设置多列布局中在列之间绘制的线的宽度、样式和颜色。
语法参数:
代码语言：javascript复制# 语法
column-rule =
<'column-rule-width'> ||
<'column-rule-style'> ||
<'column-rule-color'>
# 参数与 border 属性参数一致。
示例演示:示例1.列间隙与线条的宽度、样式和颜色设置。
代码语言：javascript复制<style>
.content-box {
padding: 0.3em;
background: #ff7;
column-count: 3;
column-gap: 3em;
column-rule: 4px dotted rgb(79, 185, 227);
}
</style>
<p class="content-box">
作者【WeiyiGeek】现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。
</p>
示例演示:
代码语言：javascript复制<style>
div{
columns: 3;
}
h2 {
background: #ff1;
}
p.fill-auto {
column-fill: auto;
background: #ffb;
}
p.fill-balance {
background: #ff7;
column-count: 2;
column-gap: 3em;
column-rule: 4px dotted rgb(79, 185, 227);
}
</style>
<div>
<h2>作者介绍</h2>
<p class="fill-auto">
作者WeiyiGeek现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。
</p>
<p class="fill-balance">
作者【WeiyiGeek】现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。
</p>
</div>
执行结果:
示例2.多列布局的内容被拆成碎块，但是这种折断内容会降低阅读体验，遇到此种情况时，我们应该使用 break-inside 与 page-break-inside 属性来控制多页媒体中的内容拆分、折断（以获得更好的浏览器支持）。
<style>
body {
width: 90%;
max-width: 900px;
margin: 2em auto;
font:
0.9em/1.2 Arial,
Helvetica,
sans-serif;
}
.container {
column-width: 250px;
column-gap: 20px;
}
.card {
/* 控制 multicol 和多页媒体中的内容拆分、折断 */
break-inside: avoid;
/* 获得更好的浏览器支持。 */
page-break-inside: avoid;
background-color: rgb(207, 232, 220);
border: 2px solid rgb(79, 185, 227);
padding: 10px;
margin: 0 0 1em 0;
}
</style>
<div class="container">
<div class="card">
<h2>I am the heading</h2>
<p>
> I am the article.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
> I am the article.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
> I am the article.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
> I am the article.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
> I am the article.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
> I am the article.
</p>
</div>
<div class="card">
<h2>I am the heading</h2>
<p>
> I am the article.
</p>
</div>
</div>
执行效果: 刷新页面，你的盒子就会呆在一起了.
column-span - 跨列显示
描述: 该属性使元素在其值设置为all时可以跨所有列。
语法参数:
代码语言：javascript复制/* 语法 */
column-span: none;
column-span: all;
/* 参数 */
none: 该元素不跨越多列
all: 该元素横跨所有列, 出现在元素之前的正常流中的内容会在元素出现之前在所有列中自动平衡; 该元素将建立一个新的块格式上下文。
示例演示:示例1.在上一个示例的基础之上，在h2元素上加h2 { column-span: all;background: #ff1; } ,结果如下所示:
weiyigeek.top-列布局跨列显示图
总结: 现在我们知道多列布局的基本用法了，构建页面时又多了一种布局选择。
5.浮动布局（Float）
描述: 在网格布局出现前开发者通常由浮动和其他的布局例如表格功能实现。
即通过display: float的样式属性，可以把一个元素“浮动”(float) 起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为；此时元素会浮动到左侧或右侧, 并且其他的周围内容就会在这个被设置浮动 (float) 的元素周围环绕。
示例演示:
示例1.下面，我们来看一个最简单的 float 布局的示例:
代码语言：javascript复制<style>
body {
width: 90%;
max-width: 900px;
margin: 0 auto;
}
p {
line-height: 2;
word-spacing: 0.1rem;
}
.box {
background-color: rgb(207, 232, 220);
border: 2px solid rgb(79, 185, 227);
padding: 10px;
border-radius: 5px;
}
/* 浮动到左边，长宽150px，右边距30px */
.box {
float: left;
width: 150px;
height: 150px;
margin-right: 30px;
}
</style>
<h1>作者介绍</h1>
<div class="box">Float</div>
<p>
作者【WeiyiGeek】现从事系统网络安全运维等工作, 毕业实习前做过等保安全服务等相关工作，从上面兴趣爱好可以看出, 我是一名计算机技术、信息安全爱好者以及物联网技术开发相关。对于计算机相关的技术以及网络安全技术知识有着浓厚的学习兴趣，喜欢认识、结交各位大佬进行网络安全攻防和漏洞挖掘等相关疑惑的讨论学习，想做一名正义的白帽子维护网络安全。
</p>
<p>博客地址: <a href="https://blog.weiyigeek.top">https://blog.weiyigeek.top</a></p>
执行结果:
示例2.使用浮动进行实现一个两列布局
代码语言：javascript复制<style>
body {
/* 占据 90% 的视口宽度，直到达到 900 像素 */
width: 90%;
max-width: 900px;
margin: 0 auto;
}
/* 使用伪类元素选择器, 父元素宽度的 48%—总共是 96%，在两栏之间留 4% 的空隙 */
div:nth-of-type(1) {
width: 48%;
float: left;
}
div:nth-of-type(2) {
width: 48%;
float: right;
}
</style>
执行结果:
6.表格布局（Table）
描述: 在 HTML 中table 标签元素常用于显示表格数据，在CSS发展历史中 web 开发人员过去也常常使用表格来完成整个网页布局——将它们的页眉、页脚、不同的列等等放在不同的表行和列中，现在它通常会被用于兼容一些不支持Flexbox 和 Grid的浏览器。。
温馨提示: 虽然我们可以使用table进行布局，但是并不建议在当下使用，因为表布局是不灵活的，繁重的标记，难以调试和语义上的错误（比如，屏幕阅读器用户在导航表布局方面有问题），所以此处我们简单了解一下即可。
我们来看一个最简单的 table 布局的示例, 设置 CSS 样式将 <form>, <div>, <label>和<input> 设置分别显示表、表行和表单元:
<style>
form {
display: table;
margin: 0 autopx;
}
form div {
display: table-row;
}
form label,
form input {
display: table-cell;
margin-bottom: 10px;
}
form label {
width: 200px;
padding-right: 5%;
text-align: right;
}
form input {
width: 300px;
}
.top {
display: table-header-group;
caption-side: bottom;
width: 300px;
color: #666;
font-style: italic;
}
.bottom {
/** 设置为表格尾部。
display: table-footer-group; **/
/** 设置为表格标题，然后再设置caption-side为底部 **/
display: table-caption;
caption-side: bottom;
width: 300px;
color: #999;
font-style: italic;
}
</style>
<form>
<p class="top">首先，告诉我们你的名字和年龄。</p>
<p class="bottom">然后，完毕后请再次确定信息是否有误。</p>
<div>
<label for="fname">First name:</label> <input type="text" id="fname" />
</div>
<div>
<label for="lname">Last name:</label> <input type="text" id="lname" />
</div>
<div>
<label for="age">Age:</label> <input type="text" id="age" />
</div>
</form>
执行结果:
温馨提示: 在table布局中display属性支持的相关value值,如下所示:
display: table-row-group ：该元素的行为类似于 HTML 的 <tbody> 元素。
display: table-header-group：该元素的行为类似于 HTML 的 <thead> 元素。
display: table-footer-group： 该元素的行为类似于 HTML 的 <tfoot> 元素。
display: table-row: 该元素的行为类似于 HTML 的 <tr> 元素。
display: table-cell: 该元素的行为类似于 HTML 的 <td> 元素。
display: table-column-group: 该元素的行为类似于 HTML 的 <colgroup> 元素。
display: table-column: 该元素的行为类似于 HTML <col> 元素。
display: table-caption: 该元素的行为类似于 HTML 的 <caption> 元素。
display: ruby-base 实验性 : 该元素的行为类似于 HTML 的 <rb> 元素。
display: ruby-text 实验性 : 该元素的行为类似于 HTML 的 <rt> 元素。
display: ruby-base-container 实验性 : 该元素是作为匿名盒子生成的。
display: ruby-text-container 实验性 : 该元素的行为类似于 HTML 的 <rtc> 元素。
7.其他传统布局（Other traditions）
传统布局之固定宽度网格
描述: 让我们先来创建一个固定列宽度的网格系统吧，目标是把它变成一个有两行十二列的演示网格，第一行均匀分布12元素的大小，第二行显示网格上不同大小的区域。
示例演示:
代码语言：javascript复制<style>
/* 改变盒模型 */
* {
box-sizing: border-box;
}
/* 宽度: 720 240 20 */
body {
width: 980px;
margin: 0 auto;
}
.wrapper {
padding-right: 20px;
}
/* 清除网格中每行的浮动 */
.row {
clear: both;
}
/* 列与列之间保持 20 像素的间隔 */
.col {
float: left;
margin-left: 20px;
width: 60px;
background: rgb(255, 150, 150);
}
/* 宽 60px，间隔 20px */
.col.span1 {
width: 140px;
}
.col.span2 {
width: 220px;
}
.col.span3 {
width: 300px;
}
</style>
<div class="wrapper">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
<div class="col">6</div>
<div class="col">7</div>
<div class="col">8</div>
<div class="col">9</div>
<div class="col">10</div>
<div class="col">11</div>
<div class="col">12</div>
</div>
<div class="row">
<div class="col span1">13</div>
<div class="col span2">14</div>
<div class="col span3">15</div>
<div class="col span2">16</div>
</div>
</div>
执行结果:
传统布局之液态网格
描述: 通常我们可能需要一个弹性（流体）的网格，它可以随着浏览器的 viewport 大小的变化自动伸缩。
方式1.固定公式为了达成这个目标，我们需要把相应的像素的长度变为百分比长度, 例如，我们把固定宽度转为伸缩的基于百分比宽度的算式在下面：target / context = result
# 目标列长度是 60 像素，上下文是 960 像素的包装, 百分比计算：
60 / 960 = 0.0625
# 间隔百分比计算(同上)：
20 / 960 = 0.02083333333
方式2.比例调整方式我们使用需要用 2.08333333% 代替 .col 里margin-left的 20 像素，和 .wrapper 里padding-right的 20 像素。所以此处还是以上一例的HTML为例，更新CSS规则的底部块。
<style>
/* 改变盒模型 */
* {
box-sizing: border-box;
}
/* 宽度: 720 240 20 */
body {
/* 固定 */
width: 90%;
max-width: 980px;
margin: 0 auto;
}
.wrapper {
/* 固定 */
padding-right: 2.08333333%;
}
/* 清除网格中每行的浮动 */
.row {
clear: both;
}
/* 列与列之间保持 20 像素的间隔 */
.col {
float: left;
margin-left: 2.08333333%;
width: 6.25%; /* 2.08333333 * 3 ~ 6.25 */
background: rgb(255, 150, 150);
}
/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
.col.span1 {
width: 14.58333333%;
}
.col.span2 {
width: 22.91666666%;
}
.col.span3 {
width: 31.24999999%;
}
</style>
执行结果: 列将会按照窗口的比例进行收缩。
除此，之外我们还可使用 calc() 函数 在 CSS 里面做数学方面的计算, 例如跨越 4 列的列计算如下: .col.span4 {width: calc((6.25% * 4) (2.08333333% * 3));}
亲，文章就要看完了，不关注一下【全栈工程师修炼指南】吗？
传统布局之弹性盒网格
描述: 实际上弹性布局是个写网格布局，弹性盒相比浮动能提供附加的对齐和空间分布能力，其可以极大的介绍上述所讲问题，但是，弹性布局不是为网格布局而设的，把它当网格布局来用也有新的挑战。
温馨提示: 弹性盒设计上是一维, 它处理单个维度，行的或者列的; 我们不能创建一个对行列严格要求的网格，意即如果我们要在我们的网格上使用弹性盒的话，我们仍然需要计算浮动布局的百分比。
示例演示
代码语言：javascript复制<style>
* { box-sizing: border-box; }
body {
width: 90%;
max-width: 980px;
margin: 0 auto;
}
.wrapper {
padding-right: 2.08333333%;
}
.row {
display: flex;
}
.col {
margin-left: 2.08333333%;
margin-bottom: 1em;
width: 6.25%;
flex: 1 1 auto;
background: rgb(255,150,150);
}
.col.span2 { width: calc((6.25%*2) 2.08333333%); }
.col.span3 { width: calc((6.25%*3) (2.08333333%*2)); }
.col.span4 { width: calc((6.25%*4) (2.08333333%*3)); }
.col.span5 { width: calc((6.25%*5) (2.08333333%*4)); }
.col.span6 { width: calc((6.25%*6) (2.08333333%*5)); }
.col.span7 { width: calc((6.25%*7) (2.08333333%*6)); }
.col.span8 { width: calc((6.25%*8) (2.08333333%*7)); }
.col.span9 { width: calc((6.25%*9) (2.08333333%*8)); }
.col.span10 { width: calc((6.25%*10) (2.08333333%*9)); }
.col.span11 { width: calc((6.25%*11) (2.08333333%*10)); }
.col.span12 { width: calc((6.25%*12) (2.08333333%*11)); }
</style>
执行结果:
总结，现在理解了多种网格系统是如何建立的，这将会在处理老网站的时候，以及理解 CSS 网格布局的原生网格和那些老系统的不同的时候帮到你。
本文至此完毕，更多技术文章，尽情等待下篇好文！
原文地址: https://blog.weiyigeek.top/2023/9-10-777.html
