聊聊布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pUErNaId-1595768517862)(https://raw.githubusercontent.com/bxm0927/picture-link/master/markdown-note/2019-2-24005.png)]

布局方法

过时的布局方法

表格布局（table）

传统的布局方法

定位（position）
浮动（float）

前沿的布局方法

弹性盒子布局（Flexible Box Layout）
网格布局（Grid Layout）

经验之谈

布局可以从以下几个方面思考：

利用 float + margin 实现
利用 absolute 绝对定位实现
利用 BFC 实现
利用 Flexbox 实现
利用 Grid 实现

几个注意点：

移动端能用 Flex 就用 Flex，灵活方便并且功能强大，无愧为网页布局的一大利器！
使用 float 时，注意要清除浮动，避免高度塌陷
避免使用老旧的 table 布局（如 display: table;、display: table-row;、display: table-cell;）。表格布局会使 margin 失效，设置间隔比较麻烦。

居中布局

水平居中

行内元素水平居中：

// 利用 text-align: center 可以将块级元素内部的行内元素水平居中。
// 此方法对 inline、inline-block、inline-table 和 inline-flex 元素水平居中都有效。
// 也可以将 block 元素设置成 inline-block，再用这种方式实现块级元素的水平居中
.inline-x-center {text-align: center;
}

单个块级元素水平居中：

// 可通过将左和右外边距设置为 auto 来实现块级元素水平居中。
// 此时需要设置宽度，如果宽度是 100%，则对齐没有效果。
@mixin margin-auto-center($width: 80%) {width: $width;margin-left: auto;margin-right: auto;
}

多个块级元素水平居中：

注意多个 inline-block 元素间空白字符 font-size 不为 0 的问题

.parent {text-align: center;/* font-size: 0; */
}.child {display: inline-block;
}

垂直居中

行内元素垂直居中：

.inline-y-center {height: 40px;line-height: 40px;
}

垂直对齐一幅图像、字体图标：

// vertical-align 属性设置元素的垂直对齐方式，默认情况下，元素放置在父元素的基线(baseline)上。
.img-y-center {vertical-align: middle;
}

水平垂直居中

总结：一般情况下，水平垂直居中，我们最常用的就是绝对定位加负边距，缺点就是需要知道宽高，使用 transform 倒是可以不需要知道宽高，但是兼容性不好（IE9+）

高度宽度已知：

// Negative margin
@mixin margin-center($width, $height) {position: absolute;top: 50%;left: 50%;width: $width;height: $height;margin-left: -($width / 2);margin-top: -($height / 2);
}

高度宽度未知：

// Transform centering
// Horizontally and vertically centers a child element within a parent element using `position: absolute` and `transform: translate()`.
// Similar to `flexbox`, this method does not require you to know the height or width of your parent or child so it is ideal for responsive applications.
.transform-center {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

// Flexbox centering
// Horizontally and vertically centers a child element within a parent element using `flexbox`.
.flexbox-center {display: flex;           // enables flexbox.align-items: center;     // centers the child vertically.justify-content: center; // centers the child horizontally.
}

// Grid centering
// Horizontally and vertically centers a child element within a parent element using `grid`.
.grid-center {display: grid;           // enables grid.align-items: center;     // centers the child vertically.justify-content: center; // centers the child horizontally.
}

两列布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2pFm3AN3-1595768517865)(https://raw.githubusercontent.com/bxm0927/picture-link/master/markdown-note/2019-2-24001.png)]

左列定宽，右列自适应

利用 float + margin 实现：

.left {float: left;width: 100px;
}.right {margin-left: 120px; /* 大于等于 `.left` 的宽度 */
}

利用 BFC 实现：

.left {float: left;width: 100px;
}.right {overflow: hidden; /* 触发 BFC 达到自适应 */
}

利用 absolute 绝对定位实现：

.parent {position: relative;
}.left {position: absolute;top: 0;left: 0;width: 100px;
}.right {position: absolute;top: 0;left: 100px; /* 大于等于 `.left` 的宽度 */right: 0;
}

利用 Flexbox 实现：

.parent {display: flex;
}.left {width: 100px;flex: 0 0 100px;
}.right {flex: 1; /* 均分了父元素剩余空间 */
}

利用 Grid 实现：

.parent {display: grid;grid-template-columns: 100px auto; /* 设定 2 列就 ok 了, auto 换成 1fr 也行 */width: 100%;
}

左列自适应，右列定宽

利用 float + margin 实现：

.parent {height: 500px;padding-left: 100px; /* 抵消 left 的 margin-left 以达到 parent 水平居中 */
}.left {float: left;margin-left: -100px; /* 正值等于 right 的宽度 */width: 100%;
}.right {float: right;width: 100px;
}

利用 BFC 实现：

<style>.left {overflow: hidden; /* 触发 BFC 达到自适应 */}.right {float: right;margin-left: 10px; /* margin 需要定义在 right 上 */width: 100px;}
</style><!-- right 先渲染 -->
<div id="right">右列定宽</div>
<div id="left">左列自适应</div>

利用 absolute 绝对定位实现：

.parent {position: relative;
}.left {position: absolute;top: 0;left: 0;right: 100px; /* 大于等于 `.right` 的宽度 */
}.right {position: absolute;top: 0;right: 0;width: 100px;
}

利用 Flexbox 实现：

.parent {display: flex;
}.left {flex: 1; /* 均分了父元素剩余空间 */
}.right {width: 100px;flex: 0 0 100px;
}

利用 Grid 实现：

.parent {display: grid;grid-template-columns: auto 100px; /* 设定 2 列就 ok 了, auto 换成 1fr 也行 */width: 100%;
}

一列不定，一列自适应

盒子宽度随着内容增加或减少发生变化，另一个盒子自适应

这里演示左列不定宽，右列自适应。左列自适应，右列不定宽同理。

利用 BFC 实现：

.left {float: left; /* 只设置浮动，不设宽度 */margin-right: 10px;
}.right {overflow: hidden; /* 触发 BFC */
}

利用 Flexbox 实现：

.parent {display: flex;
}.left {/* 不设宽度 */margin-right: 10px;
}.right {flex: 1; /* 均分 parent 剩余的部分 */
}

利用 Grid 实现：

.parent {display: grid;grid-template-columns: auto 1fr; /* auto 和 1fr 换一下顺序就是“左列自适应，右列不定宽”了 */
}.left {margin-right: 10px;
}

三列布局

两列定宽，一列自适应

利用 float + margin 实现：

.parent {min-width: 310px; /* 100 + 10 + 200，防止宽度不够，子元素换行*/
}.left {float: left;margin-right: 10px; /* left 和 center 间隔 */width: 100px;
}.center {float: left;width: 200px;
}.right {margin-left: 320px; /* 等于 left 和 center 的宽度之和加上间隔，多出来的就是 right 和 center 的间隔 */
}

利用 BFC 实现：

.parent {min-width: 320px; /* 防止宽度不够，子元素换行 */
}.left {float: left;margin-right: 10px;width: 100px;
}.center {float: left;margin-right: 10px; /* 在此定义和 right 的间隔 */width: 200px;
}.right {overflow: hidden;
}

利用 Flexbox 实现：

.parent {display: flex;
}.left {margin-right: 10px;width: 100px;
}.center {margin-right: 10px;width: 200px;
}.right {flex: 1;
}

利用 Grid 实现：

.parent {display: grid;grid-template-columns: 100px 200px auto; /* 设置3列，固定第一第二列的宽度，第三列 auto 或者 1fr */
}

左右定宽，中间自适应

利用 Flexbox 实现

.parent {display: flex;
}.left {width: 100px;
}.center {flex: 1;
}.right {width: 200px;
}

利用 absolute 绝对定位实现

.parent {position: relative;
}.left {position: absolute;top: 0;left: 0;width: 100px;
}.center {margin-left: 100px; /* 大于等于 left 的宽度，或者给 parent 添加同样大小的 padding-left */margin-right: 200px; /* 大于等于 right 的宽度，或者给 parent 添加同样大小的 padding-right */
}.right {position: absolute;top: 0;right: 0;width: 200px;
}

圣杯布局

圣杯布局又叫做固比固布局，即两边固定宽度，中间自适应的三栏布局。

具体操作是三栏全部浮动，左右两栏负 margin 让其跟中间栏并排。

注意：中间栏要在放在文档流前面以优先渲染。

<div class="grail"><!-- 中间盒子优先渲染 --><div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, ut.</div><div class="left">left</div><div class="right">right</div>
</div><style>.grail {box-sizing: border-box;width: 100%;min-width: 1024px;height: 400px;/* 让中间自适应的盒子安全显示 */padding: 0 300px;background-color: darkseagreen;}.middle {float: left;width: 100%;height: 300px;background-color: deepskyblue;}.left {float: left;position: relative;left: -300px;width: 300px;height: 300px;/* 左侧盒子上浮; */margin-left: -100%;background-color: red;}.right {float: left;position: relative;right: -300px;width: 300px;height: 300px;/* 右侧盒子上浮 */margin-left: -300px;background-color: red;}
</style>

双飞翼布局

事实上，圣杯布局和双飞翼布局是一回事，它们实现的都是三栏布局，但是双飞翼布局可以更好地解决中栏内容超出的情景。

<div class="grail"><div class="middle-wrapper"><div class="middle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui, ut.</div></div><div class="left">left</div><div class="right">right</div>
</div><style>.grail {width: 100%;min-width: 1024px;height: 400px;background-color: darkseagreen;}.middle-wrapper {float: left;width: 100%;height: 300px;background-color: deepskyblue;}.middle {height: 300px;margin-left: 300px;margin-right: 300px;background-color: yellowgreen;}.left {float: left;width: 300px;height: 300px;margin-left: -100%;background-color: red;}.right {float: left;width: 300px;height: 300px;margin-left: -300px;background-color: red;}
</style>

多列布局

等宽布局

浮动等宽布局：

.column {float: left;width: 25%; /* 100 ÷ 列数，得出百分比 */
}

弹性盒子等宽布局：

.parent {display: flex;
}.column {flex: 1;
}

网格等宽布局：

.parent {display: grid;grid-template-columns: repeat(6, 1fr);  /* 6 就是列数 */
}

九宫格布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ddl5zQf-1595768517869)(https://raw.githubusercontent.com/bxm0927/picture-link/master/markdown-note/2019-2-24003.png)]

DOM结构：

<div class="parent"><div class="row"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div><div class="row"><div class="item">4</div><div class="item">5</div><div class="item">6</div></div><div class="row"><div class="item">7</div><div class="item">8</div><div class="item">9</div></div>
</div>

使用 table 表格布局实现：

display:table 相当于 table 标签

display:table-row 相当于 tr 标签

display:table-cell 相当于 td 标签

.parent {display: table;
}
.row {display: table-row;
}
.item {display: table-cell;
}

使用 Flex 弹性盒子布局实现：

.parent {display: flex;flex-direction: column;
}
.row {display: flex;flex: 1;
}
.item {flex: 1;
}

使用 Grid 网格布局实现：

.parent {display: grid;grid-template-columns: repeat(3, 1fr); /* 等同于 1fr 1fr 1fr，此为重复的合并写法 */grid-template-rows: repeat(3, 1fr);  /* 等同于 1fr 1fr 1fr，此为重复的合并写法 */
}

栅格系统

@media screen and (max-width: 768px) {.column-xs-1 {  width: 8.33333333%;  }.column-xs-2 {  width: 16.66666667%;  }.column-xs-3 {  width: 25%;  }.column-xs-4 {  width: 33.33333333%;  }.column-xs-5 {  width: 41.66666667%;  }.column-xs-6 {  width: 50%;  }.column-xs-7 {  width: 58.33333333%;  }.column-xs-8 {  width: 66.66666667%;  }.column-xs-9 {  width: 75%;  }.column-xs-10 {  width: 83.33333333%;  }.column-xs-11 {  width: 91.66666667%;  }.column-xs-12 {  width: 100%;  }
}
@media screen and (min-width: 768px) {.column-sm-1 {  width: 8.33333333%;  }.column-sm-2 {  width: 16.66666667%;  }.column-sm-3 {  width: 25%;  }.column-sm-4 {  width: 33.33333333%;  }.column-sm-5 {  width: 41.66666667%;  }.column-sm-6 {  width: 50%;  }.column-sm-7 {  width: 58.33333333%;  }.column-sm-8 {  width: 66.66666667%;  }.column-sm-9 {  width: 75%;  }.column-sm-10 {  width: 83.33333333%;  }.column-sm-11 {  width: 91.66666667%;  }.column-sm-12 {  width: 100%;  }
}
div[class^="column-xs-"]{float: left;
}
div[class^="column-sm-"]{float: left;
}

滚动场景

横向滚动：overflow-x: auto;

纵向滚动：overflow-y: auto;

横向、纵向滚动：overflow: auto;

更复杂的滚动场景可以借助第三方库实现，如 better-scroll

聊聊前端的Html布局相关推荐

element ui input视图没刷新_聊聊前端 UI 组件：组件体系
本文是文章系列「聊聊前端 UI 组件」的第三篇. 在本系列的上篇文章<聊聊前端 UI 组件:组件特征>中,通过从关注点分离的角度进行前端 UI 组件的构成分析,并以较为抽象的视角对 UI ...
聊聊 CSS 中的布局模式
本文来自作者大漠在 GitChat 上分享「聊聊 CSS 中的布局模式」,「阅读原文」查看交流实录. 「文末高能」编辑 | 哈比一.聊聊 CSS 中的布局模式在大家的印象中,CSS 非常的 ...
聊聊CSS中的布局模式
聊聊CSS中的布局模式在大家的印象中,CSS非常的简单,在此我想再强调一下,虽然CSS简单,但并不代表容易.随着Web技术的发展飞快,CSS经过二十多年的发展,其变化也是非常的大.CSS涵盖的技术点 ...
过来人经验！聊聊前端工程师的职业规划
过来人经验!聊聊前端工程师的职业规划编者按:今天腾讯的前端工程大牛从自己的5年的职业生涯中总结了一些思考,大致分为3个阶段,从毕业新手到前端大牛,都有小小心得与同学们分享,想走前端这路的同学,可以来 ...
web前端响应式布局,自适应全部分辨率
写phpd的我. 近期公司要弄个app关键是没有web开发,而我有比較闲,那就扛枪上阵吧. 响应式布局,web端的?php我一直都是用tp框架,对于web首先想到的是bootstrap框架.仅仅是简单 ...
封装html ui 控件,聊聊前端 UI 组件：组件设计
本文首发于欧雷流.由于我会时不时对文章进行补充.修正和润色,为了保证所看到的是最新版本,请阅读原文. 在本系列文章<聊聊前端 UI 组件:组件体系>中初步说明了 UI 组件的架构设计,本文 ...
Vue 项目前端响应式布局及框架搭建
Vue 项目前端响应式布局及框架搭建一.flexible 插件 1.引用 flexible 插件 2.修改 flexible 默认配置 3.展示效果二.cssrem 插件 (px -> re ...
前端css弹性布局各种属性
前端css弹性布局各种属性一.基本概念 Flexbox 是 flexible box 的简称(注:意思是"灵活的盒子容器")又叫弹性布局,是 CSS3 引入的新的布局模式.它决定 ...
C# CLR 聊聊对象的内存布局一个空对象占用多少内存
在 C# 中的对象大概可以分为三个不同的类型,包括值类型.引用类型和其他类型.本文主要讨论的是引用类型对内存空间的占用情况.在讨论开始之前我想问问大家,一个空的对象会占用多少内存空间?当然这个问题本身 ...

聊聊前端的Html布局