一文搞定各类前端常见布局方式
原创
一文搞定各类前端常见布局方式
1. 水平居中布局
1.1 inline-block + text-align
优点：css2兼容性好
缺点：text-align 属性具有继承性，影响子元素文本对齐方式
1.2 table/block + margin
优点：只对子元素设置即可
缺点：若子元素脱离文档流，会导致 margin 失效，如 float、absolute、fixed
1.3 absolute + transform
优点：父元素是否脱离文档流不影响子元素水平居中效果
缺点：transform是css3属性，可能有兼容性问题
2. 垂直居中布局
2.1 table-cell + vertical-align
优点：浏览器兼容性好
缺点：vertical-align 属性具有继承性，导致父元素内的文本也居中，因此若父元素内包含除该元素外的文本将不适用
display: table 设置当前元素为 <table>
display: table-cell 设置当前元素为 <td>，此时子元素将作为单元格内容，支持 vertical-align
vertical-align 用于设置内联元素的垂直居中，top / middle / bottom
2.2 absolute + transform
优点：父元素是否脱离文档流不影响子元素垂直居中效果
缺点：transform是css3属性，可能有兼容性问题
3. 两列布局
定义：一列定宽，一列自适应
3.1 float + margin
优点：简单
缺点：
- left-width 和 right-width 必须同时设置为相同值
- 浮动与不浮动元素混用可能存在兼容问题
- right 中若存在 clear 清除浮动，会出现布局问题
clear 属性用于指定左侧或右侧不允许浮动的元素，可选值 left / right / both / none / inherit，前三个表示左侧/右侧/两侧不允许浮动元素，默认 none 允许两侧有浮动元素
3.1 优化上面的 float + margin (复杂不推荐)
可以为右列自适应元素增加父级容器 right-fix，解决上面的浮动与不浮动元素混用可能存在的兼容问题，和右列存在 clear 清除浮动出现的错误。
right-fix 元素设置浮动后，默认宽度为 0，需要设置宽度为 100%，如下图1所示，通过设置容器 margin-left: -300px; 实现图2效果，此时 right-fix 层级高于 left，可以为 #left 添加 position: relative; 来提高层级，因为 position 定位的层级高于浮动！如图3所示。此时在 #right 中添加元素，即使包含 clear 清除浮动也没有影响。
3.3 float + overflow
左列同样使用 float，右侧不用 margin-left，而用 overflow: hidden; 开启 BFC 模式，将元素内部环境与外界完全隔离。
开启BFC，不仅可以通过 overflow 实现
优点：简单
缺点：BFC存在副作用，overflow 属性同时设置了内容溢出处理，导致一些场景下出现问题无法解决
3.4 display (table)
利用 table 的特性，默认宽度平分，当设置了左列宽度，右列自动占满剩余宽度
优点：兼容性好
缺点：将所有元素设置为 table 相关值，会受到一定制约(一些表格特性)
4. 三列布局&圣杯布局&双飞翼布局
圣杯布局和双飞翼布局是指三行三列的布局，其中中间行中间列的元素自适应，重点在于第二行的实现。
4.1 三列布局：float + margin (不推荐)
圣杯布局中间行的一种实现方式如下：
采用的方式是左右两列浮动，中间使用 margin 左右自适应，但 DOM 若按照 left、center、right 的顺序，center 会占据 right 的位置导致不在一行，如下图所示：
所以只能按照 left、right、center 的顺序，核心区 center 必须放最后，这么做降低了 center 核心内容的搜索引擎抓取优先级且对开发者阅读起来不友好。
4.2 圣杯布局：添加父节点+开启定位处理覆盖
【step1】全部浮动
将 left、center、right 全部浮动，并使用 margin 将 parent 左右预留出左右列的宽度，效果如下图所示
【step2】处理left
设置 left 的 margin-left 为 -100%，实现 left 从当前行移动到上一行，如下图所示：
此时只能借助 position 定位来将 left 继续向左移动自身宽度
【step3】处理right
处理方式与 left 相似，通过设置 right 的 margin-left 为自身宽度，实现 right 从当前行上移到上行行尾，如图所示：
再借助 position 定位移动到目标位置
【step4】添加header/footer
最后添加 header、footer，完成的圣杯布局如下图所示：
4.3 双飞翼布局：添加子节点处理左右覆盖
双飞翼布局最早由淘宝团队提出，是针对圣杯布局的优化方案，主要优化了圣杯布局开启定位的问题。
4.4 对比
圣杯布局和双飞翼布局的差异点在于左右两列重叠部分的处理方式，圣杯布局通过增加父结点并开启左右两列定位的方式实现，而双飞翼通过在 center 添加子节点实现，更加简洁。
6. 等分布局(栅格布局)
等分布局指一行被分成若干宽度相等的列。比如 bootstrap 会将一行分为 12 列。
6.1 float
6.2 display(table)
借助表格特性实现等分，需要注意，div 变 table 后，默认宽度从 100% 变为 0，需要设置父节点宽度为 100%
6.3 float 列间空白间距的实现
空白间距可以使用 padding-left 实现，为了能看出间距存在，需要给每列添加 inner 子节点，为子节点设置背景色。还需要设置 box-sizing: border-box; 否则默认的 content-box 计算方式会导致折行。针对第一列左侧多余的空白间距，可以在容器 parent 上设置 margin-left。最后，由于 #parent 的宽度会比最外层的 #parent-fix 多出一个间距 10px，因此推荐设置 overflow 避免内容溢出。
6.4 display(table) 列间空白间距的实现
方法与 float 相似，不同的是，由于 table 的特性，默认 #parent 宽度和 #parent-fix 相同，在 #parent 设置了 margin-left 后，整体 #parent 向左便宜，导致右侧行尾多出一个间距的空白，所以要设置 #parent 宽度为 #parent-fix + 一个间距。
7. 等高布局
等高布局是指一行中每列高度相同的布局。
7.1 display(table)
利用表格单元格默认等高的特性，轻松实现等高布局。
7.2 padding + margin
伪等高布局，仅视觉上效果为等高布局。通过设置 padding-bottom 为极大值，设置 margin-bottom 为极小值进行对冲，最后通过 parent 上的 overflow: hidden; 解决容器高度塌陷问题并遮挡多余部分实现等高布局。
8. 全屏布局
页面铺满整个页面，没有滚动条，会随浏览器大小变化，使用 fixed 定位可以轻松实现。
9. 响应式布局
9.1 flex弹性盒模型布局
flex 布局是 css3中最好用的布局方式。通过在父元素上设置 flex-direction、flex-wrap、justify-content、align-items、align-content 属性实现主轴方向、换行、主轴和交叉轴对齐方式等，在子元素上设置 order、align-self 、flex-grow、flex-shrink、flex-basis 属性实现排序、重写子元素align-items交叉轴对齐方式、空间分配等。
更多flex布局的内容将会单独写一篇进行讲解。
9.2 vw/vh
css3 新单位 vw/vh，对应视图宽高的百分比，如 1vw = 视图宽度1% 比百分比布局更好用
9.3 rem
rem 值表示相对<html>根元素的比例，默认 html 元素 font-size 为 16px，即 1rem=16px，一般会动态设置 1rem = 100px，方便按照设计稿尺寸计算。如设计稿宽度为 750px，一个设计稿宽 25px 的 div，设置 width: 0.25rem; 即可
10.3 @media 媒体查询
针对不同屏幕分辨率定义不同样式，从而达到自适应效果，例如移动端和PC端通过媒体查询设置不同背景图片，但开发繁琐
10.4 %百分比
css属性通过设置百分比值替代固定值，从而实现响应式效果。不推荐，因为计算麻烦，如在css中：
- width、height 属性的百分比值依赖父标签的数据；
- padding、margin 设置百分比值，无论垂直还是水平方向，都相对于父元素的
width，与父元素的height无关； - border-radius 设置百分比值，则是相对于元素自身宽度
10. CSS3多列布局 — column
css3 提供了设置多列布局的属性，column-count 定义列的数量，column-width 定义列的宽度，columns 为简写，并支持设置列间距、列边框、横跨多列、列填充。
11. 网格布局 — grid
网格布局是强大的 css 布局方案。grid 布局 api 比较多，会单独写一篇进行讲解。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
