三栏布局--如何实现主体内容先加载

什么是三栏布局

三栏布局 是一种常见的网页布局方式，它通常包括三个主要部分：左侧栏、中间栏和右侧栏。在这种布局中，左右两侧的栏目通常具有固定的宽度，而中间的栏目则会自动适应剩余的空间，实现自适应宽度的效果。

需要解决的问题

如果html结构是这样的：

我们有很多种方式可以实现三栏布局！

  <div class="page">
    <div class="left">广告位</div>
    <div class="content">主体内容</div>
    <div class="right">广告位</div>
  </div>

关键是在网页加载时，想要中间的主体内容（也就是中间栏）会被先加载和显示，以提供给用户更快的内容展示。（因为浏览器会按照HTML文件的顺序下载和解析内容）

那么，html结构应该被写成这样：

  <div class="page">
    <div class="content">主体内容</div>
    <div class="left">广告位</div>
    <div class="right">广告位</div>
  </div>

这时候该如何实现三栏布局呢？下面有以下几种方式！小编通过一个简单示例来讲解

基础css样式

<style>
    * {
      padding: 0;
      margin: 0;
    }

    .page {
      height: 200px;
    }

    .left,
    .right {
      height: 200px;
      width: 200px;
      background-color: #64c9fc;
    }

    .content {
      height: 200px;
      width: 100%;
      background-color: #f873b5;
    }
  </style>

基础效果图

圣杯布局

首先让page里的div元素浮动，left和right会因为content宽度为100%而被挤到下面去

.page div {
   float: left;
 }

然后设置page的内边距：padding: 0 200px;预留出左右广告位的宽度

接着，通过设置.left和.right的position为relative，并使用负margin和left/right属性进行调整来实现左右两侧栏的固定宽度效果。

    .left {
      margin-left: -200px;
      position: relative;
      left: -100%;
    }

    .right {
      margin-left: -200px;
      position: relative;
      right: -200px;
    }

这就是圣杯布局,通过预留出left和right广告位的宽度,实现了我们想要的效果！

双飞翼布局

首先在content容器里加一个inner容器

    <div class="content">
      <div class="inner">主体内容</div>
    </div>

然后，使用浮动（float）将 left 和 right 两个容器向左浮动，并将 inner 容器设置左右外边距（margin）为左右两个容器的宽度。

    .page>div {
      float: left;
    }

    .inner {
      margin: 0 200px;
      height: 100%;
      background-color: #52c28c;
    }

接着，使用负边距（margin-left）将 left 和 right 两个容器分别向左移动距离

    .left {
      margin-left: -100%;
    }

    .right {
      margin-left: -200px;
    }

这就是双飞翼布局，通过将left 和 right覆盖在content上实现了我们想要的效果！

flex布局(最优雅）

在还没有flex之前，都是通过上述两种方式来实现三栏布局（主体内容优先加载,左右固定宽度，中间自适应）的，在有了flex之后，想要实现这个效果变得易如反掌！

如果不了解flex请看这篇文章：前端不能没有flex

首先将page设为弹性容器：display: flex;将中间元素content的 flex-grow 属性设置为 1，表示自动分配剩余空间。

然后，使用 order 属性改变元素的顺序。默认情况下，元素的顺序是按照 HTML 中的顺序排列的。可以通过修改 order 属性来改变元素的顺序。

    .content {
      flex: 1;
      order: 1; 
      background: #53d5ae;
    }

    .left {
      order: 0;
    }

    .right {
      order: 2;
    }

这就是flex布局，通过设置order 属性改变元素的顺序实现了我们想要的效果，而且实现原理简单，代码十分优雅！

最后

小伙伴还有什么方法可以实现三栏布局（主体内容优先加载,左右固定宽度，中间自适应），欢迎评论区留言告诉我哦！