web前端布局方式总结

缺乏、安全感 2022-11-27 15:55 264阅读 0赞

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

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

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

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

## 流体布局 ##

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

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

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

**margin合并类型：**

1.  相邻元素
2.  父子元素
3.  空元素

相邻元素示意图：  
![在这里插入图片描述][20200816141804451.png_pic_center]  
理想是两个div高度为 200px  
父子元素示意图：  
![在这里插入图片描述][20200816141846215.png_pic_center]  
黑线是上一个元素，灰色是父元素，橘红色是子元素。理想的是子元素与父元素之间margin-top为50px，结果是父元素和上一元素高度为 50px。

空元素示意图：  
![在这里插入图片描述][20200816142034522.png_pic_center]  
本来是上下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的原理吗？看看下面的清除浮动和你想想中的清除浮动后效果一样吗？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 8]  
官方对clear属性的解释：“**元素盒子**的边不能和**前面的**浮动元素相邻。”所以，清除浮动并不是真的把浮动元素给清除了，只是让自身元素不受前面元素的影响（己所不欲，勿施于人的精神）。  
\------------float布局完----------------

## table布局 ##

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

**table布局（HTML实现）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 9]  
从图中我们可以看到，展示出来的布局很好看，因此这种布局方式从提出后变风靡一时，97之后到零几年基本上都是这种布局方式，甚至现在我们也可以在某些网页找到它是身影。  
但是如果看右边的源码可以发现，结构非常混乱，维护起来代价非常大，连David自己也说：*有人说我毁掉了Web，我回答他们，的确如此。我毁掉了Web是因为我把巧克力和花生酱混合在一起却再也不能把它们分开。我犯下了把结构跟表现混合在一起的错误。*  
因此，不到万不得已，不建议使用此方式进行布局。  
后来的后来，CSS出来说，用HTML实现的table方法糟糕透了，用我的属性同样可以实现table布局，且效果极佳。  
**table布局（CSS实现）**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 10]  
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同时存在，应该听谁的？如果你不知道答案，请看图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 11]  
从图中我们可以得出以下结论：当不指定高度时，top和bottom同时存在，听top的。（同理，当不指定宽度时，left和right同时存在，听left的）  
\------------定位布局完----------------

## flex布局 ##

Flex 是 Flexible Box 的缩写，意为"弹性布局"，我个人觉得弹性布局有点像算盘：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 12]  
容器对应算盘框架，item对应里面的算珠。当你应用flex布局时，其实就是在拨动算珠。不过想了解细节的同学请[点击][Link 1]  
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;
    }

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

## 响应式布局 ##

响应式布局其实就是同一个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）][media]  
    只要按照以上方式写HTML和CSS代码，那写出来的网页就是响应式的，我写了个简单的[响应式 demo][demo]，可以参考一下。  
    \------------响应式布局完----------------

## Grid布局 ##

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

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

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

## 总结 ##

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

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

## 完 ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/8a6bc5a2fd0f499990b7c475ffad30c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/43c8ae60fc8f45968da8612de058f8ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/1845a62ddc764c15a3a0e55ed3f6dab6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/7f49bc7f3e2f4dd9844f510bfd6b89c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/ce2bd9675f5e4aff84b4a90884ed2cff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/40050a2490904a41b540869ecf94a6e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/05453042624942bf896951b339d6eaf1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221124/56e4b60fb70740deac8df43989a2d870.png
[20200816141804451.png_pic_center]: /images/20221124/3dcef0f8690349ccb572d5b371990654.png
[20200816141846215.png_pic_center]: /images/20221124/6df0b1bad8e44608ab768e0d0112260f.png
[20200816142034522.png_pic_center]: /images/20221124/43630e3903204cd7a12d01fb576f83ce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221124/5f1e4b2270064146a03aff3bf32b6d9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221124/2814cb9ed936465896353c4447750f3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221124/c619ea2a0ba545aabd7c95bc2c378eef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221124/55301d2a5883423e9be52692ffe6829d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221124/c3cada00ac3042259ac5a4d2ca93f475.png
[Link 1]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[20200816223337405.png_pic_center]: /images/20221124/ab31c00be6e04e8a8d70f5135a195dd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221124/a3eeb267537c46229699226e1a5894de.png
[media]: https://blog.csdn.net/weixin_42989576/article/details/87923111
[demo]: https://dingkexue.github.io/Web-Demo-5/index.html
[Link 2]: http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
[20200816230239362.png_pic_center]: /images/20221124/3b00e523926f43bb9356fb1e56e26607.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221124/765e15ed64e04192a665390b39a674a2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221124/110b3a0832a24e158ea8010e614dd0bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjk4OTU3Ng_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221124/70e6b80f9fc04bc6892298826d0e966a.png