乐趣区

关于前端:前端经典网页布局的实现方案你了解多少

jiezi

前端开发，离不开日常的网页构造布局，现下有很多第三方的组件库，也自带着很多布局的计划，例如 Ant Design 中就领有一套本人的 Grid 24 栅格零碎 和Layout 布局，不便咱们进行网页排版。

接下来，咱们从前端技术角度上，去剖析一下 3 种经典布局的实现计划。

首先，咱们列出一些比拟惯例的布局：

  • 圣杯布局
  • 双飞翼布局
  • 多列等分布局

1. 圣杯布局

圣杯布局： 左右两栏的宽度固定不变，两头那一栏宽度自适应，且两头盒子的内容优先渲染。

最早的圣杯布局的实现计划是：利用 浮动和负边距 来实现。

父级元素设置左右的 padding，三列均设置向左浮动，两头一列放在最后面 ，宽度设置为父级元素的宽度，因而前面两列都被挤到了下一行，通过 设置 margin 负值 将其挪动到上一行，再利用绝对定位，定位到两边。

圣杯布局的优缺点：

  • 长处：不须要额定的 DOM 构造，两头栏放在文档流后面是优先渲染
  • 毛病：非凡状况下，当两头盒子宽度小于左盒子的时候 就会产生布局凌乱

咱们能够通过 3 种技术计划来实现圣杯布局的布局成果，别离是float、float 优化、Flex

实现代码：

HTML 构造：

<div class="main">
    <!--   如果是圣杯布局的原始计划，此处的 center 盒子要放在最后面 -->
  <div class="center"></div>
   <div class="left"></div>
  <div class="right"></div>
</div>
  • 实现计划 1：float+position+负边距
.main {
    height: 200px;
    /* 外层大盒子设置左右的 padding，给两侧小盒子预留出地位 */
    padding: 0 200px;
}
.center, .left, .right {
    /* 三个盒子对立左浮动 */
    float: left;
}

/* 留神，在 HTML 构造中，center 盒子肯定要位于 left 和 right 盒子之前 */
.center {
    /* 两头盒子占据父盒子宽度的 100% */
    width: 100%;
    height: 100%;
    background: lightgreen;           
}

.left {
    width: 200px;
    height: 100%;
    background: lightseagreen;

    /* left 被 center 盒子挤到了下方，设置 margin 负值会让三个盒子在一行上显示 */
    margin-left: -100%;

    /* 通过定位负值让 left 盒子位于 main 盒子预留出的 padding 的地位 */
    position: relative;
    left: -200px;
}

.right {
    width: 200px;
    height: 100%;
    background: lightskyblue;
    /* right 被 center 盒子挤到了下方，设置 margin 负值会让三个盒子在一行上显示 */
    margin-left: -200px;

    /* 通过定位负值让 right 盒子位于 main 盒子预留出的 padding 的地位 */
    position: relative;
    right: -200px; 
}
  • 实现计划 2：float优化
.main {
    width: 100%;
    height: 100px;
}

.left {
    width: 200px;
    height: 100%;
    background: lightcoral;
    /*  左盒子左浮动  */
    float: left;
}

.right {
    width: 200px;
    height: 100%;
    background: lightgreen;
    /* 右盒子右浮动 */
    float: right;
}

.center {
    height: 100%;
    background: lightsalmon;
    /* 两头盒子左浮动 */
    float: left;
    /* 两头盒子应用 css 的 calc()去主动计算宽度，思维为：父盒子宽度 100% - (左盒子 + 右盒子) */
    /* 留神：如果网页中在意极致加载速度等优化效率时，尽量不要大量应用 calc()函数  */
    width: calc(100% - 400px);
}
  • 实现计划 3：Flex
.main {
    width: 100%;
    height: 100px;
    /*  父盒子转为 flex 弹性盒子  */
    display: flex;
    /*  子元素居中  */
    justify-content: center;
    align-items: center;
}

.left {
    width: 200px;
    height: 100%;
    background: lightcoral;
}

.right {
    width: 200px;
    height: 100%;
    background: lightgreen;
}

.center {
    height: 100%;
      background: lightsalmon;
    /*  两头盒子占据剩下的全副空间  */
    flex: 1;
}

当然，实现圣杯布局的成果，还能够应用其它的计划，比方 Grid 布局形式，只有可能实现其圣杯布局的成果，用什么形式均能够。

2. 双飞翼布局

概念：双飞翼布局最早是淘宝团队提出的，是 针对圣杯局部优化的 解决方案。次要是优化了圣杯布局中开启定位的问题

双飞翼布局的实现，实质上也是 利用了浮动和外边距负值的思维。

双飞翼布局与圣杯布局的不同之处在于，圣杯布局的左中右三列容器，两头 center 盒子多了一个子容器，通过 管制 center 中子容器的 margin 空出左右两列的宽度。

<body>
  <div class="main">
    <div class="center">
      <div class="inner"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</body>
.main {height: 200px;}

.center,
.left,
.right {
    /* 三个盒子对立左浮动 */
    float: left;
}

.center {
    /* 两头大盒子占据父盒子宽度的 100% */
    width: 100%;
    height: 100%;
    background: lightgreen;
}

.center .inner {
    height: 100%;
    /* 预留出左右两个盒子的空间 */
    margin: 0 200px;
    background: lightcoral;
}

.left {
    width: 200px;
    height: 100%;
    background: lightseagreen;

    /* left 被 center 盒子挤到了下方，设置 margin 负值会让三个盒子在一行上显示 */
    margin-left: -100%;
}

.right {
    width: 200px;
    height: 100%;
    background: lightskyblue;
    /* right 被 center 盒子挤到了下方，设置 margin 负值会让三个盒子在一行上显示 */
    margin-left: -200px;
}

3. Flex 实现多列等分布局

关键点：列数可自在管制（无固定宽度）

 <div class="main">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
.main {
    width: 100%;
    display: flex;
    /* 设置换行 */
    flex-wrap: wrap;
    /* 用来设置网格行与列之间的间隙, 是 row-gap(行间隙)和 column-gap(列间隙)的简写模式 */
    gap: 20px;
}
.main .item {
    height: 200px;
    /* 关键点在于子盒子宽度的计算上 */
    /* flex: 0 0 calc((父元素宽度 - 列之间的宽度 *(列数 -1)) / 列数); */
    flex: 0 0 calc((100% - 20px * 3) / 4);
    background: lightskyblue;
}

以上 3 中布局，是咱们开发中常常见到的布局形式，每种布局形式，都不仅限于一种技术来实现，能够是 Float 和Position，也能够是 Flex，还能够是Grid，甚至有的开发者对Boostrap 很相熟，也是一种实现形式。

集体认为，每种技术计划的应用，都有其优缺点，或思考兼容性，或思考性能，抉择适宜当下我的项目的内容，适当做取舍，才是最要害的。

关注我，下期咱们一起探讨 Grid 和Flex的不同之处。

退出移动版