前端必须熟悉的几种布局方式

海军 等级 418 0 0

前端必须熟悉的几种布局方式

前言

最近在准备整理基础,准备跳槽,找个好一点的东家。😎 记录学习整理的过程,希望能帮到年后跳槽的你,让我们一起来巩固基础吧。
目前在一家国企单位,朝九晚五的生活让我感到舒适,有大量的时间,做自己喜欢的事。时间久了,我感到了焦虑,由于公司是非互联网,开发也是根据自己已知技术去开发,技术成长很慢,技术氛围没那么强,想突破一下自己, 是该逃离舒适区了。

本章主要是回顾Flex使用 和 一些常用布局的写法。

熟悉HTML页面架构和常用布局

Flex

Flex 概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。

注意:

  • 任何一个容器都可以指定为 Flex
  • 行内元素也可以指定为 Flex 布局, display: inline-flex;
  • Webkit 内核的浏览器,必须加上-webkit前缀。 display: -webkit-flex; / Safari /
前端必须熟悉的几种布局方式

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size

容器属性

作用于父容器的属性

属性 功能描述
flex-direction 属性决定主轴的方向(即项目的排列方向)。
flex-wrap 默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行
justify-content 决定了子元素在主轴的对齐方式。
align-items 决定了子元素在交叉轴(竖轴)的对齐方式
align-content 决定了多条轴线的对齐方式。

flex-direction

该属性决定了主轴以什么方向排列

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。
flex-direction: column;
前端必须熟悉的几种布局方式
flex-direction:row-reverse
前端必须熟悉的几种布局方式
flex-direction: row-reverse;
前端必须熟悉的几种布局方式

flex-wrap

该属性决定了元素是否在一条轴线上,通过指定它的属性可以子元素换行。

  • nowrap :默认,不换行。
  • wrap: 让子元素在一条线上有序的排列着,当一条线排不下的时候,会换行。
  • wrap-reverse: wrap 的反转。
flex-wrap: wrap;
前端必须熟悉的几种布局方式
flex-wrap: wrap-reverse;
前端必须熟悉的几种布局方式

justify-content

该属性决定了 子元素 在主轴上的对齐方式

属性:

  • flex-start(默认值):左对齐
  • flex-end:右对齐
  • center: 居中
  • space-between:均匀排列每个元素,首个元素放置于起点末尾元素放置于终点. 间隔: 元素个数n - 1
  • space-evenly :均匀排列每个元素,每个元素之间的间隔相等。 间隔:元素个数n + 1
  • space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
justify-content: center;
前端必须熟悉的几种布局方式
justify-content: flex-end;
前端必须熟悉的几种布局方式
justify-content: space-between;
前端必须熟悉的几种布局方式
justify-content: space-around;
前端必须熟悉的几种布局方式
 justify-content: space-evenly;
前端必须熟悉的几种布局方式

align-items

该属性是让子元素如何在交叉抽(竖轴)方向上对齐。

属性:

  • flex-start:交叉轴的起点对齐。
  • flex-end:交叉轴的终点对齐。
  • center:交叉轴的中点对齐。
  • baseline: 项目的第一行文字的基线对齐。
  • stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-items: flex-end;
前端必须熟悉的几种布局方式
align-items: center;
前端必须熟悉的几种布局方式
align-items: baseline;
前端必须熟悉的几种布局方式
align-items: stretch;
前端必须熟悉的几种布局方式

align-content

该元素定义了多条轴的对齐方式,当只有一根轴时,不起作用。

属性:

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

align-content: flex-start;
前端必须熟悉的几种布局方式
align-content: flex-end;
前端必须熟悉的几种布局方式
align-content: center;
前端必须熟悉的几种布局方式
align-content: space-between;
前端必须熟悉的几种布局方式
align-content: space-around;
前端必须熟悉的几种布局方式

作用于子元素的属性

属性 属性描述
order 可以将子元素按大小排序,值越小,排名越靠前。
flex-grow 可以将子元素按一定比例排列,如果子元素值都一样,那么子元素会等比例排列。
flex-shrink 如果空间不足时,可以使用它将子元素按比例缩小
flex-basis 它决定在主轴分配空间之前,项目占主轴的大小。浏览器会根据剩余的空间来,计算它的大小。
flex-self 它可以指定某个元素和其它元素的排列方式不同。

order

父容器为flex. 时, 子元素可以通过 order 达到排序的功能,数值越小,排列最前面。

    <div class="main">
        <div class="son1">

        </div>
        <div class="son2">

        </div>
        <div class="son3">

        </div>
    </div>


<style>
.main{
    width: 400px;
    height: 300px;
    border-radius: 15px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: lightseagreen;
    margin: auto;
    margin-top: 200px;
}
.son1{
    width: 80px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    order: 1;
    background: coral;
}
.son2{
    width: 80px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    order: 0.2;
    background: darkcyan;
}
.son3{
    width: 80px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    order: 3;
    background: gold;
}
</style>
前端必须熟悉的几种布局方式

flex-grow

该属性用来指定子元素在父容器中按比例指定大小,如果每一项都指定比例相同的话,那么元素会平分排列布局。

    <div class="main">
        <div class="son1">

        </div>
        <div class="son2">

        </div>
        <div class="son3">

        </div>
    </div>
<style>
    .main{
    width: 400px;
    height: 300px;
    border-radius: 15px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: lightseagreen;
    margin: auto;
    margin-top: 200px;
}
.son1{
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-grow: 2;
    background: coral;
}
.son2{
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-grow: 2;
    background: darkcyan;
}
.son3{
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-grow: 2;
    background: gold;
}

</style>
前端必须熟悉的几种布局方式

flex-shrink

该属性是按比例缩小子元素, 默认为1, 当主轴空间不足时,它会按比例缩小。

<style>
.main{
    width: 400px;
    height: 300px;
    border-radius: 15px;
    display: flex;
    justify-items: center;
    align-items: center;
    background: lightseagreen;
    margin: auto;
    margin-top: 200px;
}
.son1{
    width: 200px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    /* 缩小5 的比例 */
    flex-shrink: 5; 
    background: coral;
}
.son2{
    width: 160px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    background: darkcyan;
}
.son3{
    width: 160px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    background: gold;
}
</style>
前端必须熟悉的几种布局方式

flex-basis

该属性定义了在分配多余空间之前,项目占据的主轴空间。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.son1{
    /* 指定了宽度没有作用, flex-basis 决定了占据主轴多少宽度,
    浏览器会根据剩余宽度来计算主轴还有多少宽度 */
    width: 300px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-basis: 100px;
    background: coral;
}
.son2{
    width: 160px;
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    background: darkcyan;
}
.son3{
    height: 100px;
    border-radius: 15px;
    margin: 10px;
    flex-basis: 100px;
    background: gold;
}
前端必须熟悉的几种布局方式

flex-self

该属性允许单个 元素 和 其它 元素不同的排列方式,覆盖父元素的 aligin-items

值:

  • flex-start 左对齐
  • flex-end 右对齐
  • center 居中
  • baseline 项目的第一行文字的基线对齐。
  • stretch 如果项目未设置高度或设为auto,将占满整个容器的高度。
.son3{
    border-radius: 15px;
    margin: 10px;
    flex-basis: 100px;
    background: gold;
    align-self: stretch;
}
前端必须熟悉的几种布局方式

常用布局

全屏布局

全局布局由 顶部,主体,底部 构成。通常一般固定 顶部 和 底部高度, 主体自适应 这样就实现了全屏布局。

可以使用语义化标签,header , main footer.

下面通过 Flex 布局来达到全屏布局的效果。

  • 在最外层套一个容器,给容器 指定 display: flex;
  • 在容器中指定子元素的排列方式, flex-direction: column;
  • 顶部和底部高度,主体使用 flex : 1 比例来达到自适应。

flexflex-growflex-shrinkflex-basis的缩写

  • flex-grow 属性:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
  • flex-shrink 属性:定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
  • flex-basis 属性:定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
    <div class="full">
        <header>导航</header>
        <main>主体内容</main>
        <footer>底部</footer>
    </div>
*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
}
header{
    height: 60px;
    font-weight: 900;
    color: white;
    text-align: center;
    background: darkcyan;
}
main{
    flex: 1;
    align-items: center;
    font-weight: 900;
    color: white;
    text-align: center;
    background:orange;
}
footer{
    height: 60px;
    font-weight: 900;
    color: white;
    text-align: center;
    background: rgb(48, 40, 163);
}
前端必须熟悉的几种布局方式

两列布局

最经典的系统管理布局 两列布局 . 它主要由是 两列都固定高度左端指定宽度,右端通过flex:1 来达到自适应宽度

    <div class="full">
        <div class="left">

        </div>
        <div class="right">

        </div>
    </div>
*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-wrap: wrap;
}
.left{
    width: 200px;
    height: 100vh;
    background: rgb(0, 140, 255);
}
.right{
    flex:1;
    height: 100vh;
    background: rgb(158, 159, 160); 
}
前端必须熟悉的几种布局方式

后台系统布局

我在写后台时,布局页面除了像 两列布局 这种的,也会有这种布局,我叫它 后台系统布局 🤣。

它的特点: 它其实也是两列布局,只是它在右端 分为 顶部 和 主体 两部分, 顶部会放置一些点击左侧菜单关联的菜单,主体放置点击菜单显示的内容

如何进行布局

  • 它和两列布局基本相同,不同点就是它在右端显示不一样
  • 右端分为主体和顶部, 顶部 固定高度 , 主体 通过 flex:1 来达到自适应
  • 右端容器通过 flex-direction: column; 指定子元素 按交叉轴(竖轴) 排列布局。
    <div class="full">
        <div class="left">

        </div>
        <div class="right">
            <div class="right-head">

            </div>
            <div class="right-main">

            </div>
        </div>
    </div>
*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    display: flex;
    /* flex-wrap: wrap; */
}
.left{
    width: 200px;
    height: 100vh;
    background: rgb(0, 140, 255);
}
.right{
    height: 100vh;
    display: flex;
    flex:1;
    flex-direction: column;
    background: rgb(158, 159, 160); 
}
.right-head{
    height: 80px;
    background: cornflowerblue;
}
.right-main{
    flex: 1;
    background: orange;
}
前端必须熟悉的几种布局方式

居中布局

居中布局在我们日常写页面时经常用到,场景也比较多,eg: 登陆 , 弹窗Dialog .

这里我使用 flex 来实现 居中布局,flex 实现起来更简洁,这里就不讨论其它实现方法了。

如何进行布局

  • 通过给父容器 的 宽度 和 高度 都 100% , 铺满整个屏幕,
  • 父容器 displayflex, 使用justify-content: center; 决定 子元素在主轴的方向上怎么显示,在通过 align-items: center; 来决定子元素在交叉轴(竖轴)如何显示。
  • 子容器只要指定width 和 ·height 即可。
    <div class="full">
        <div class="login">
            登陆
        </div>
    </div>
*{
    margin: 0;
    padding: 0;
}
.full{
    width: 100%;
    height: 100vh;
    background: rgb(0, 110, 255);
    display: flex;
    justify-content: center;
    align-items: center;
}
.login{
    width: 500px;
    height: 400px;
    line-height: 400px;
    text-align: center;
    border-radius: 15px;
    background: rgb(70, 25, 129);
    color: white;
    font-size: 33px;
    font-weight: 900;
}
前端必须熟悉的几种布局方式

瀑布流布局

瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对于整个页面不需要太多的操作,只需要下拉就可以浏览用户需要看到的数据;并且,在当前这个APP至上的时代,瀑布流可以提供很好的用户体验,通过结合下拉刷新,上拉加载进行数据的懒加载等操作,对于用户的体验感来说是接近于满分的!

瀑布流的特点:

  • 等宽不等高,高度是动态识别图像的高度来显示的。
  • 它会当计算当前屏幕的宽度,来显示对应的个数,一行排满的话,它会找到第一行高度最低的继续排列第二行,依次类推排列。

实现方法

  • CSS 实现方法: column-count + column-gap 来达到分栏排放和每项之间的间距,但使用它有缺点,固定死了 列,不能动态随着浏览器的宽度动态变化而变化分栏。
  • JS实现方法: 固定死图片的宽度, 图片放置到一个数组中, 浏览器根据动态识别宽度来判断当前显示多少项,然后遍历数组,将url 放置 src 中, 下拉刷新数据,重新调取请求数据接口,push到数组中,实现下拉请求数据。

本文采用CSS 实现,开发中为了节省时间,可以使用库来实现。

<div class="container">
    <div class="waterFall">
      <div class="item">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1737312773,3182446833&fm=26&gp=0.jpg"
          alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1875486819,805819368&fm=26&gp=0.jpg" alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=35353288,1650949252&fm=26&gp=0.jpg" alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1474216128,3433531408&fm=26&gp=0.jpg"
          alt="">
        <p>First</p>
      </div>

      <div class="item">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=143483417,2871731501&fm=26&gp=0.jpg" alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1098989386,3642257866&fm=26&gp=0.jpg"
          alt="">
        <p>First</p>
      </div>
      <div class="item">
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1040129980,3013621150&fm=26&gp=0.jpg"
          alt="">
        <p>First</p>
      </div>
    </div>
  </div>
 .container {
      width: 80%;
      margin: 0 auto;
    }

    .waterFall {
      /* 页面分几列显示 */
      column-count: 4;
      -webkit-column-count: 4;
      /* Firfox */
      -moz-column-count: 4;
      /*  */
      /* 列之间的间距 */
      column-gap: 1em;
      -webkit-column-gap: 1em;
      -moz-column-gap: 1em;
    }

    .item {
      padding: 1em;
      margin: 0 0 1em 0;
      border: 1px solid orange;
    }

    .item img {
      width: 100%;
      margin-bottom: 10px;
    }
前端必须熟悉的几种布局方式

总结

本文主要是HTML布局进行查缺补漏复习,下一章将进行BOM的补充。祝愿大家都能找到一份好的工作!

结语

✨觉得不错的点赞,帮忙转发分享以下,原创不易!

✨关注微信公众号'前端自学社区' 获取更多资料 前端必须熟悉的几种布局方式

💥回复加群 可以加入 自学前端群💥

收藏
评论区

相关推荐

Python解析库lxml与xpath用法总结
本文主要围绕以xpath和lxml库进行展开: 一、xpath 概念、xpath节点、xpath语法、xpath轴、xpath运算符 二、lxml的安装、lxml的使用、lxml案例 一、xpath 1.xpath概念 XPath 是一门在 XML 文档中查找信息的语言。XPath 使用路径表达式在 XML 文档中进行导航 。XPath 包含一个标
Python matplotlab库使用方法及注意事项
1.Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法 python import matplotlib.pyplot as plt t arange(4pi, 4pi, 0.01) y sin(t)/t plt.plot(t, y) plt.title('www.jb51.net test') plt.xlabe
阿里二面,面试官居然把 TCP 三次握手问的这么细致
TCP 的三次握手和四次挥手,可以说是老生常谈的经典问题了,通常也作为各大公司常见的面试考题,具有一定的水平区分度。看似是简单的面试问题,如果你的回答不符合面试官期待的水准,有可能就直接凉凉了。本文会围绕,三次握手和四次挥手相关的一些列核心问题,分享如何更准确的回答和应对常见的面试问题,以后面对再刁钻的面试官,你都可以随意地跟他扯皮了。 面试TCP的意义
【Flutter实战】线性布局(Row、Column)
4.2 线性布局(Row和Column)所谓线性布局,即指沿水平或垂直方向排布子组件。Flutter中通过Row和Column来实现线性布局,类似于Android中的LinearLayout控件。Row和Column都继承自Flex,我们将在弹性布局一节中详细介绍Flex。 主轴和纵轴对于线性布局,有主轴和纵轴之分,如果
前端必须熟悉的几种布局方式
前言 最近在准备整理基础,准备跳槽,找个好一点的东家。😎 记录学习整理的过程,希望能帮到年后跳槽的你,让我们一起来巩固基础吧。<br/目前在一家国企单位,朝九晚五的生活让我感到舒适,有大量的时间,做自己喜欢的事。时间久了,我感到了焦虑,由于公司是非互联网,开发也是根据自己已知技术去开发,技术成长很慢,技术氛围没那么强,想突破一下自己, 是该逃离舒
Vue进阶(幺柒幺):前端用户体验提升(五)Flex实现弹性布局
需求背景在实现组件拖拽设计过程中,发现组件样式中设置了 display: flex属性信息,导致组件生成后无法实现拖拽效果,网上查阅资料后发现Flex布局大有天地。Flex来源
散点图的 点 能不能换成 头像 啊?​
作者:朱小五 大家好,我是小五昨天晚上有位群友提出了这样一个问题:散点图里的点被替换成了每个运动员的头像,这种可视化图形如何制作?大图讨论一波,发现powerbi、Tableau、Excel都能做,那么今天小五就用Excel简单处理一下。先生成几条数据,并点击插入图表生成散点图。| x轴 | y轴 || | || 0.5 | 12 || 1 | 30
人工智能数学基础-线性代数1:向量的定义及向量加减法
一、向量 1.1、向量定义向量也称为欧几里得向量、几何向量、矢量,指具有大小(magnitude)和方向的量。它可以形象化地表示为带箭头的线段。箭头所指:代表向量的方向;线段长度:代表向量的大小。与向量对应的量叫做数量(物理学中称标量),数量(或标量)只有大小,没有方向。1. 在物理学和工程学中,几何向量更常被称为矢量。 2. 一般印刷用黑体的小写
人工智能数学基础-线性代数4:矩阵及矩阵运算
一、矩阵定义矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合,定义如下: 由 m × n 个数aij排成的m行n列的数表称为m行n列的矩阵,简称m × n矩阵。记作: 这m×n 个数称为矩阵A的元素,简称为元,数aij位于矩阵A的第i行第j列,称为矩阵A的(i,j)元,以数 aij为(i,j)元的矩阵可记为(aij)或(aij)m × n,m×
从0到1搭建一款页面自适应组件(Vue.js)
组件将根据屏幕比例及当前浏览器窗口大小,自动进行缩放处理。 建议在组件内使用百分比搭配flex进行布局,以便于在不同的分辨率下得到较为一致的展示效果。 使用前请注意将body的margin设为0,否则会引起计算误差。 fullScreenContainer.vue<template <div id"fullscreencontainer" :ref"ref
你肯定会用到的CSS多行多列布局
前言:因为项目中使用flex过程中,如果采用spacebetween两端对齐,会遇到最后一行难以对齐的问题。本文主要对多行多列这种常见的布局,列出解决方案,方便大家日常开发使用。 话不多说,直接进入正题: 方案一:标签补位我们都知道,之所以对不齐是因为最后一行的子项目没有达到4个,spacebetween的对齐方式,自然会把中间空出来。既然如此,何不直接补
凉凉!面试阿里我被Redis技术专题给搞的昏倒在地~
凉凉!面试阿里我被Redis技术专题给弄死了📚我本以为我可以像是别的博主一样去阿里面试随随便便,因为Redis,我直接被阿里大佬淦翻在地上好了不装了 没过没关系 我总结了一些这些最难的知识点!!!!然后自己总结归类再去百度查询了一些 最终得出这份Redis技术专题 题目开淦 Redis集群的主从复制模型是怎样的?为了是在部分节点失败或者大部分节点无法通信的情
c++类和继承面试点25连问
本篇文章连问面试时经常会遇到的类和继承相关25个问题,看看你能回答出几道题呀。还是先看一下思维导图,如下: 1. c++的三大特性是什么c++的三大特性,说白了其实就是面向对象的三大特性,是指:封装、继承、多态,简单说明如下: 封装是一种技术,它使类的定义和实现分离,也就是隐藏了实现细节,只留下接口给他人调用,另外封装还有一层意义是它把某种事物具现出属性和方
Python解析库lxml与xpath用法总结
本文主要围绕以xpath和lxml库进行展开:一、xpath 概念、xpath节点、xpath语法、xpath轴、xpath运算符二、lxml的安装、lxml的使用、lxml案例 一、xpath1.xpath概念XPath 是一门在 XML 文档中查找信息的语言。XPath 使用路径表达式在 XML 文档中进行导航 。XPath 包含一个标准函数库 。XP
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按