前端开发，离不开日常的网页构造布局，现下有很多第三方的组件库，也自带着很多布局的计划，例如Ant Design中就领有一套本人的Grid 24栅格零碎和Layout布局，不便咱们进行网页排版。
接下来，咱们从前端技术角度上，去剖析一下3种经典布局的实现计划。
首先，咱们列出一些比拟惯例的布局：
- 圣杯布局
- 双飞翼布局
- 多列等分布局
1. 圣杯布局
圣杯布局： 左右两栏的宽度固定不变，两头那一栏宽度自适应，且两头盒子的内容优先渲染。
最早的圣杯布局的实现计划是：利用
浮动和负边距来实现。父级元素设置左右的 padding，三列均设置向左浮动，两头一列放在最后面，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过设置
margin 负值将其挪动到上一行，再利用绝对定位，定位到两边。
圣杯布局的优缺点：
- 长处：不须要额定的DOM构造，两头栏放在文档流后面是优先渲染
- 毛病：非凡状况下，当两头盒子宽度小于左盒子的时候 就会产生布局凌乱
咱们能够通过3种技术计划来实现圣杯布局的布局成果，别离是float、float优化、Flex
实现代码：
HTML构造：
<div class="main"> <!-- 如果是圣杯布局的原始计划，此处的center盒子要放在最后面 --> <div class="center"></div> <div class="left"></div> <div class="right"></div></div>- 实现计划1：
float+position+负边距
.main { height: 200px; /* 外层大盒子设置左右的padding，给两侧小盒子预留出地位 */ padding: 0 200px;}.center, .left, .right { /* 三个盒子对立左浮动 */ float: left;}/* 留神，在HTML构造中，center盒子肯定要位于left和right盒子之前 */.center { /* 两头盒子占据父盒子宽度的100% */ width: 100%; height: 100%; background: lightgreen; }.left { width: 200px; height: 100%; background: lightseagreen; /* left被center盒子挤到了下方，设置margin负值会让三个盒子在一行上显示 */ margin-left: -100%; /* 通过定位负值让left盒子位于main盒子预留出的padding的地位 */ position: relative; left: -200px;}.right { width: 200px; height: 100%; background: lightskyblue; /* right被center盒子挤到了下方，设置margin负值会让三个盒子在一行上显示 */ margin-left: -200px; /* 通过定位负值让right盒子位于main盒子预留出的padding的地位 */ position: relative; right: -200px; }- 实现计划2：
float优化
.main { width: 100%; height: 100px;}.left { width: 200px; height: 100%; background: lightcoral; /* 左盒子左浮动 */ float: left;}.right { width: 200px; height: 100%; background: lightgreen; /* 右盒子右浮动 */ float: right;}.center { height: 100%; background: lightsalmon; /* 两头盒子左浮动 */ float: left; /* 两头盒子应用css的calc()去主动计算宽度，思维为：父盒子宽度100% - (左盒子 + 右盒子) */ /* 留神：如果网页中在意极致加载速度等优化效率时，尽量不要大量应用calc()函数 */ width: calc(100% - 400px);}- 实现计划3：
Flex
.main { width: 100%; height: 100px; /* 父盒子转为flex弹性盒子 */ display: flex; /* 子元素居中 */ justify-content: center; align-items: center;}.left { width: 200px; height: 100%; background: lightcoral;}.right { width: 200px; height: 100%; background: lightgreen;}.center { height: 100%; background: lightsalmon; /* 两头盒子占据剩下的全副空间 */ flex: 1;}当然，实现圣杯布局的成果，还能够应用其它的计划，比方Grid布局形式，只有可能实现其圣杯布局的成果，用什么形式均能够。
2. 双飞翼布局
概念：双飞翼布局最早是淘宝团队提出的，是针对圣杯局部优化的解决方案。次要是优化了圣杯布局中开启定位的问题
双飞翼布局的实现，实质上也是利用了浮动和外边距负值的思维。
双飞翼布局与圣杯布局的不同之处在于，圣杯布局的左中右三列容器，两头center盒子多了一个子容器，通过管制center中子容器的margin空出左右两列的宽度。
<body> <div class="main"> <div class="center"> <div class="inner"></div> </div> <div class="left"></div> <div class="right"></div> </div></body>.main { height: 200px;}.center,.left,.right { /* 三个盒子对立左浮动 */ float: left;}.center { /* 两头大盒子占据父盒子宽度的100% */ width: 100%; height: 100%; background: lightgreen;}.center .inner { height: 100%; /* 预留出左右两个盒子的空间 */ margin: 0 200px; background: lightcoral;}.left { width: 200px; height: 100%; background: lightseagreen; /* left被center盒子挤到了下方，设置margin负值会让三个盒子在一行上显示 */ margin-left: -100%;}.right { width: 200px; height: 100%; background: lightskyblue; /* right被center盒子挤到了下方，设置margin负值会让三个盒子在一行上显示 */ margin-left: -200px;}3. Flex实现多列等分布局
关键点：列数可自在管制（无固定宽度）
<div class="main"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div></div>.main { width: 100%; display: flex; /* 设置换行 */ flex-wrap: wrap; /* 用来设置网格行与列之间的间隙,是row-gap(行间隙)和column-gap(列间隙)的简写模式 */ gap: 20px;}.main .item { height: 200px; /* 关键点在于子盒子宽度的计算上 */ /* flex: 0 0 calc((父元素宽度 - 列之间的宽度*(列数-1)) / 列数); */ flex: 0 0 calc((100% - 20px * 3) / 4); background: lightskyblue;}以上3中布局，是咱们开发中常常见到的布局形式，每种布局形式，都不仅限于一种技术来实现，能够是Float和Position，也能够是Flex，还能够是Grid，甚至有的开发者对Boostrap很相熟，也是一种实现形式。
集体认为，每种技术计划的应用，都有其优缺点，或思考兼容性，或思考性能，抉择适宜当下我的项目的内容，适当做取舍，才是最要害的。
关注我，下期咱们一起探讨Grid和Flex的不同之处。