一文搞定各类前端常见布局方式1. 水平居中布局1.1 inline-block + text-align优点：css2兼容性好
缺点：text-align 属性具有继承性，影响子元素文本对齐方式
代码语言：html复制
缺点：若子元素脱离文档流，会导致 margin 失效，如 float、absolute、fixed
代码语言：html复制
缺点：transform是css3属性，可能有兼容性问题
代码语言：html复制
缺点：vertical-align 属性具有继承性，导致父元素内的文本也居中，因此若父元素内包含除该元素外的文本将不适用
display: table 设置当前元素为
| ，此时子元素将作为单元格内容，支持 vertical-align
vertical-align 用于设置内联元素的垂直居中，top / middle / bottom 代码语言：html复制 测试
缺点：transform是css3属性，可能有兼容性问题 代码语言：html复制 测试
3.1 float + margin代码语言：html复制 left
right 优点：简单
缺点： left-width 和 right-width 必须同时设置为相同值浮动与不浮动元素混用可能存在兼容问题right 中若存在 clear 清除浮动，会出现布局问题clear 属性用于指定左侧或右侧不允许浮动的元素，可选值 left / right / both / none / inherit，前三个表示左侧/右侧/两侧不允许浮动元素，默认 none 允许两侧有浮动元素 代码语言：html复制 left
代码语言：html复制 left
inner
02.jpg3.3 float + overflow左列同样使用 float，右侧不用 margin-left，而用 overflow: hidden; 开启 BFC 模式，将元素内部环境与外界完全隔离。 开启BFC，不仅可以通过 overflow 实现 代码语言：html复制 left
right 优点：简单
缺点：BFC存在副作用，overflow 属性同时设置了内容溢出处理，导致一些场景下出现问题无法解决 3.4 display (table)利用 table 的特性，默认宽度平分，当设置了左列宽度，右列自动占满剩余宽度 代码语言：html复制 left
right
缺点：将所有元素设置为 table 相关值，会受到一定制约(一些表格特性) 4. 三列布局&圣杯布局&双飞翼布局03.jpg圣杯布局和双飞翼布局是指三行三列的布局，其中中间行中间列的元素自适应，重点在于第二行的实现。 代码语言：txt复制| header | | 定宽 | 自适应 | 定宽 | | footer |4.1 三列布局：float + margin (不推荐)圣杯布局中间行的一种实现方式如下： 代码语言：html复制 left
right
center 采用的方式是左右两列浮动，中间使用 margin 左右自适应，但 DOM 若按照 left、center、right 的顺序，center 会占据 right 的位置导致不在一行，如下图所示：
04.jpg所以只能按照 left、right、center 的顺序，核心区 center 必须放最后，这么做降低了 center 核心内容的搜索引擎抓取优先级且对开发者阅读起来不友好。 4.2 圣杯布局：添加父节点+开启定位处理覆盖【step1】全部浮动 将 left、center、right 全部浮动，并使用 margin 将 parent 左右预留出左右列的宽度，效果如下图所示 05.jpg代码语言：html复制 header
center
left
right
设置 left 的 margin-left 为 -100%，实现 left 从当前行移动到上一行，如下图所示： 代码语言：css复制#left { /* 从当前行上移一行 */ margin-left: -100%; }06.jpg此时只能借助 position 定位来将 left 继续向左移动自身宽度 代码语言：css复制#left { position: relative; left: -100px; }【step3】处理right 处理方式与 left 相似，通过设置 right 的 margin-left 为自身宽度，实现 right 从当前行上移到上行行尾，如图所示： 07.jpg再借助 position 定位移动到目标位置 【step4】添加header/footer 最后添加 header、footer，完成的圣杯布局如下图所示： 03.jpg4.3 双飞翼布局：添加子节点处理左右覆盖双飞翼布局最早由淘宝团队提出，是针对圣杯布局的优化方案，主要优化了圣杯布局开启定位的问题。 代码语言：html复制 inner
left
right 4.4 对比圣杯布局和双飞翼布局的差异点在于左右两列重叠部分的处理方式，圣杯布局通过增加父结点并开启左右两列定位的方式实现，而双飞翼通过在 center 添加子节点实现，更加简洁。
6. 等分布局(栅格布局)等分布局指一行被分成若干宽度相等的列。比如 bootstrap 会将一行分为 12 列。 6.1 float代码语言：html复制 代码语言：html复制 代码语言：html复制 代码语言：html复制 7.1 display(table)利用表格单元格默认等高的特性，轻松实现等高布局。 09.jpg代码语言：html复制 left
right
right right 10.jpg代码语言：html复制 left
right
right right 代码语言：html复制 left定宽，高度自适应
right宽高自适应
11.jpg9. 响应式布局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/vhcss3 新单位 vw/vh，对应视图宽高的百分比，如 1vw = 视图宽度1% 比百分比布局更好用 9.3 remrem 值表示相对根元素的比例，默认 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多列布局 — columncss3 提供了设置多列布局的属性，column-count 定义列的数量，column-width 定义列的宽度，columns 为简写，并支持设置列间距、列边框、横跨多列、列填充。 12.jpg代码语言：html复制 col1
col2
col3
col4
col5
col6
col6 col7
col7 col7 col8
col9
sign.jpeg 相关推荐合作伙伴 |