web前端布局方式总结

最新推荐文章于 2023-02-03 15:34:53 发布

前端搬运工

最新推荐文章于 2023-02-03 15:34:53 发布

阅读量2k

点赞数 5

分类专栏： Web开发文章标签： html5 css3 html javascript css

本文链接：https://blog.csdn.net/weixin_42989576/article/details/108034625

版权

Web开发专栏收录该内容

70 篇文章 3 订阅

订阅专栏

本文主要介绍了前端布局方案的实现以及存在的问题，涉及到的布局方案包括：

流体布局
float布局
table布局
定位布局
flex布局
响应式布局
grid布局

前端布局从最开始的：Table布局 => DIV+CSS布局 => Flex布局 => Grid布局经历了以上一系列变化，这些变化伴随着前端技术的发展和程序猿对布局方案便利性的追求，最终的结果就是让我们的网页设计变得越来越方便、快捷、高效，我们看到的网页也越来越多样化和人性化。互联网从诞生到至今也就二十年的时光，因此，让我们从互联网的发展来看看前端布局是如何一步步成长的。
首先，让我们看看web的发展：
1991年web
在这里插入图片描述
1996雅虎

1999年Google

2020年

1990年，伯纳斯·李（Tim Berners-Lee）等人发明了互联网（web）技术，最初的互联网技术其实更像是一个大型文件访问系统，当时网页也只是展示纯文本，但是随着时间的发展，人们认为纯文本太丑了，于是准备用其它语言装扮诞生没几年的web。最终被大家采纳的语言是由Hakon Wium 在 1994年 10月提出的样式语法。它被称为样式层叠表，简称CSS。当时的CSS更多只是用来修饰web页面，基本没用来布局。
此时的布局方案主要是：流体布局

流体布局

流体布局其实就是正常的布局流，那么什么又是正常的布局流呢？可以把我们的布局页面看成是一个倒着放的方形鱼缸（HTML），当你往里面加水时（DIV），水会铺满整个水平面，当你再次加水时，加入的水会在之前的基础上铺满整个水平面，如果这个鱼缸变宽、变窄（假设鱼缸是柔性的），里面的水也会随着变宽、变窄并且铺满整个鱼缸的宽度。这就是流体布局。
上面提到的DIV就是HTML里面的块标签，它其实是一个盒子模型，组成方式如下：

在这里插入图片描述
在这种布局下我们其实能操作的布局样式很少，我这里主要提一下margin属性，我们可以通过 margin: auto；对子元素进行水平居中。通过它可以让元素水平居中的原因在于 auto 的计算原理：auto会让盒子模型填充父元素剩下的宽度。让我们看图说话
在这里插入图片描述

图中，父元素剩余宽度为200px，左右margin为 auto，这样左右就平分父元素剩余宽度为100px，这样元素就实现了水平居中。
我们也可以利用margin实现垂直水平居中，方法如下：
在这里插入图片描述
该布局存在的问题：margin合并（外边距塌陷）
margin合并：块级元素的上、下边距（margin）有时候会合并（只发生在垂直方向上）成单个外边距，合并后的外边距等于合并前两个外边距中的较大值，这种现象也被称为外边距塌陷（margin合并）。

margin合并类型：

相邻元素
父子元素
空元素

相邻元素示意图：
在这里插入图片描述
理想是两个div高度为 200px
父子元素示意图：

黑线是上一个元素，灰色是父元素，橘红色是子元素。理想的是子元素与父元素之间margin-top为50px，结果是父元素和上一元素高度为 50px。

空元素示意图：
在这里插入图片描述
本来是上下margin分别10px，元素高度应该是20px。

解决办法：父元素触发BFC（块级格式化上下文）
不用太去纠结BFC的词语解释，只需要知道BFC个作用是用来隔离元素的影响就行，触发BFC后，容器内的元素随便怎么翻江倒海都不会影响到外面元素，外面元素随便怎么变化都不会影响到容器内元素。相当于加了层隔板。
触发BFC方式：

body元素
float不为none
display：flex/inline-flex
position：absolute、fixed、table-cells
overflow除了visible以外的值

------------流体布局完----------------

float布局

浮动布局设计的初衷只是为了实现文字环绕图片的样式，没想到float布局会用在结构布局上，并且会这么火。。。
实现代码：

float：right/left

浮动的元素会脱离文档流（浮在正常文档流上面），浮动元素后面的文字会环绕在图片周围，但是不会被覆盖。这种布局方式虽然很简单，但是缺点也很明显，就是会影响后面的元素，所以我们就需要清除浮动。
清除浮动：

clear：left/right/both（建议直接写both）

但是你真的了解clear的原理吗？看看下面的清除浮动和你想想中的清除浮动后效果一样吗？
在这里插入图片描述
官方对clear属性的解释：“元素盒子的边不能和前面的浮动元素相邻。”所以，清除浮动并不是真的把浮动元素给清除了，只是让自身元素不受前面元素的影响（己所不欲，勿施于人的精神）。
------------float布局完----------------

table布局

时间来到了1997年，有个叫David Siegel的人创造性的改变了web布局方式，但是同时又“毁了”web布局方式，这种布局技术就是：table布局。

table布局（HTML实现）
在这里插入图片描述
从图中我们可以看到，展示出来的布局很好看，因此这种布局方式从提出后变风靡一时，97之后到零几年基本上都是这种布局方式，甚至现在我们也可以在某些网页找到它是身影。
但是如果看右边的源码可以发现，结构非常混乱，维护起来代价非常大，连David自己也说：有人说我毁掉了Web，我回答他们，的确如此。我毁掉了Web是因为我把巧克力和花生酱混合在一起却再也不能把它们分开。我犯下了把结构跟表现混合在一起的错误。
因此，不到万不得已，不建议使用此方式进行布局。
后来的后来，CSS出来说，用HTML实现的table方法糟糕透了，用我的属性同样可以实现table布局，且效果极佳。
table布局（CSS实现）
在这里插入图片描述
CSS样式与HTML table属性一一对应，它俩一结合简直无敌，这就是大名鼎鼎的DIV+CSS布局方案。
------------table布局完----------------
定位布局
实现代码：

position: static/relative/absolute/fixed/sticky
static:元素默认值，正常布局
relative: 相对于自身在文档流的位置进行定位，left/right/top/bottom属性有效，不脱离文档流
absolute: 相对于第一个非 static 的祖先进行定位（如果没有祖先，相对于html），left/right/top/bottom属性有效，脱离文档流
fixed: 相对于窗口进行定位，left/right/top/bottom属性有效，脱离文档流
sticky: 是 relative 和 fixed 的结合体 [demo](https://www.runoob.com/try/try.php?filename=trycss_position_sticky)

有了定位布局，我们只要运用得当，就可以实现各种布局，但是这里我想提一个问题，当绝对定位时，left、right或者top、bottom同时存在，应该听谁的？如果你不知道答案，请看图：
在这里插入图片描述
从图中我们可以得出以下结论：当不指定高度时，top和bottom同时存在，听top的。（同理，当不指定宽度时，left和right同时存在，听left的）
------------定位布局完----------------

flex布局

Flex 是 Flexible Box 的缩写，意为"弹性布局"，我个人觉得弹性布局有点像算盘：
在这里插入图片描述
容器对应算盘框架，item对应里面的算珠。当你应用flex布局时，其实就是在拨动算珠。不过想了解细节的同学请点击
flex整体学习难度相对于前面布局较大，特别是flex-grow和flex-shrink的计算原理，我想简单的说一下。flex-grow和flex-shrink都是基于flex-basis进行计算，而flex-basis表示分配多余空间之前，项目占据的主轴空间（理解成width属性就好，但是，当flex-basis和width同时存在时，听flex-basis的）。

.father {
    height: 100px;
    width: 800px;
    display: flex;
    background: gainsboro;
}
.child1,
.child2,
.child3,
.child4 {
    height: 100px;
}
.child1 {
    width: 50px;
    background: tan;
}
.child2 {
    flex-basis: 100px;
    flex-grow: 1;
    background: teal;
}
.child3 {
    flex-basis: 150px;
    flex-grow: 3;
    background: thistle;
}
.child4 {
    flex-basis: 200px;
    flex-grow: 6;
    background: tomato;
}

在这里插入图片描述
请问每个child的宽度应该是多呢？（希望你自己算算再往下看…）

在这里插入图片描述
以上就是flex-grow的计算原理，同理，我知道聪明的你一定可以推导出flex-shrink的计算过程。
------------flex布局完----------------

响应式布局

响应式布局其实就是同一个web网页能够在不同设备（手机、平板、PC）上完美显示。为什么会出现响应式布局呢？原因是以前的web都是按电脑（那时还没有智能手机，Ethan Marcotte在2010年才提出的响应式布局）宽度定制的，每种类型电脑使用一个网页就能实现完美适配，但是智能手机发展起来后，每个手机的尺寸不一，如果为每个尺寸的手机制作一个web页，那代价简直了。如果一个页面能够适配所有的显示设备，那岂不是美滋滋。这就是响应式布局
实现：

html head 中加入以下 meta标签，目的是让网页宽度等于设备宽度，原始缩放比例为 1 
<meta name="viewport" content="width=device-width, initial-scale=1" />

在布局中，我们还需要注意以下问题：

使用相对单位（%，vh，vw，rem，em ）
图片响应式（max-width: 100%，srcset）
流动布局（float，flex）
媒体查询（@media）
只要按照以上方式写HTML和CSS代码，那写出来的网页就是响应式的，我写了个简单的响应式 demo，可以参考一下。
------------响应式布局完----------------

Grid布局

网格（Grid）布局是一种新的 CSS 布局模型，是目前唯一一种 CSS 二维布局，我个人认为这是CSS布局的未来（如果兼容性没问题的话）。如果细讲grid又可以写篇新的文章了，因为其内容实在太多，并且大神已经讲的很清楚了。我这里只想根据一个实例来看看grid布局的强大。
在这里插入图片描述
如果我们想实现图中的布局，你可能会想到使用定位布局亦或者浮动布局？今天，我们使用强大的grid布局。在使用之前我们需要了解一些基本的概念（不会太难）

display: grid;
grid-template-columns: 100px 100px 100px // 建立了三列，每列宽度为100px
grid-template-rows: 100px 100px;  // 建立了两行，每行宽度为 100px

以上代码建立了两行三列的二维布局，显示效果如下：
在这里插入图片描述
中间的代码实现了下面的布局结果，其实理解起来很简单，地主有六块二维矩阵的地准备分给几个名字不同的儿子（gird-area：名字），每块地上标记了儿子的名字（grid-template-areas），如果是点（.）表示自己留着。
有了以上知识后，我们就开始实现上面的布局：
在这里插入图片描述
短短几行，就实现了图片中的布局方式，grid是不是很强大？
------------grid布局完----------------

总结

这里从互联网的发展来介绍了web布局的几种常见方式，每种方式都有它的优缺点，每种方式也都有它存在的历史意义，可能有些布局我们已经不使用或者不推荐了，这是因为有了更好的布局方式（如语义化布局），也许我今天介绍的几种布局方式将来也会成为历史的产物，但是这些布局方式在存在的时间里实现了自己的价值，这就够了。我希望屏幕前的你看到这篇文章之后，能够对web布局方式有较清晰的理解，能够在布局的时候选出最合适的、并且知道坑在哪里，那我便会非常欣慰。

由于本人的水平有限，在写作的过程中难免有误，请细心的同学帮我指出，文章使用的部分图片是互联网上找的，如有侵权，请联系我。

完

前端搬运工

关注

5
点赞
踩
37

收藏

觉得还不错? 一键收藏
0
评论
web前端布局方式总结

本文主要介绍了前端布局方案的实现以及存在的问题，涉及到的布局方案包括：流体布局float布局table布局定位布局flex布局响应式布局grid布局前端布局从最开始的：Table布局 => DIV+CSS布局 => Flex布局 => Grid布局经历了以上一系列变化，这些变化伴随着前端技术的发展和程序猿对布局方案便利性的追求，最终的结果就是让我们的网页设计变得越来越方便、快捷、高效，我们看到的网页也越来越多样化和人性化。互联网从诞生到至今也就二十年的时光，因此，让我
复制链接

扫一扫