三栏布局的方法你又会几种？

用户6256742

发布于 2024-08-01 09:20:06

940

发布于 2024-08-01 09:20:06

文章被收录于专栏：网络日志

在前端页面中，三栏布局是网页设计中的常见布局，通常包括一个主要内容区域和两个侧边栏，不过有些网页的侧边栏是用来放广告的，也有些是用来做导航的或者放点其他的东西，但是他们都不能阻碍主要内容区域的展示。当然在前端面试中，三栏布局也是有很多面试官会提问的，但是实现三栏布局的方法有很多种，包括圣杯布局、双飞翼布局等等，本文将展示一系列的方法，包括其核心思想和操作方式。如果大佬们还有其他的方法，也可以在评论区中告诉大家。感谢分享

所谓三栏布局，简单来说就是主要内容优先加载并存放在中间，左右固定，中间自适应

基础样式和代码

先设置好基础的样式，然后在使用不同的方法的时候，直接在后面加上相关的样式

<head>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .page{
      height: 200px;
    }
    .left, .right{
      height: 200px;
      width: 200px;
      background: #1adc20;
    }
    .content{
      height: 200px;
      background-color: #e0c230;
    }
  </style>
</head>
<body>
  <div class="page">
    <div class="content">主要内容</div>
    <div class="left">广告位</div>
    <div class="right">广告位</div>
  </div>
</body>

得到的网页效果：

之后，我就就需要动用一系列的方法去将这个页面变成三栏布局的样子--主要内容在中间，广告位在旁边。

圣杯布局

至于为什么叫圣杯布局，可能也是一种形容吧，想想看‘圣杯’🏆--中间大两边小，主要是突出中间的主体内容，而两边则是附带。

圣杯布局的核心思想是通过浮动和边距技巧，将中间的主要内容区域放在文档流的前面，左右侧边栏紧随其后。这样可以确保中间内容区域的优先加载。主要通过以下几步实现：

浮动：使用浮动技术将左右侧边栏和中间内容区域横向排列。
内边距padiding：通过设置内边距使中间内容区域不能够覆盖左右侧边栏，留出空位。
相对定位：使用相对定位调整左右侧边栏的位置，使其正确显示。

相关代码操作：

    .page div{
      float: left;
    }
    .page{
      padding: 0 200px;
    }
    .content{
      width: 100%;
    }
    .left{
      margin-left: -200px;
      position: relative;
      left: -100%;
    }
    .right{
      margin-left: -200px;
      position: relative;
      right: -200px;
    }

通过浮动，将容器.page内的所有div元素浮动，横向排列。
设置左右内边距，以留出左右侧边栏的位置。
让主要内容部分占满容器的空间，这样俩个广告位就会被挤到下面去。
在通过相对定位和负边距，将左右两边的广告位移放到对应的位置上

双飞翼布局

别问，我都差点以为是双飞燕了。双飞翼布局和圣杯布局很相似，不过他们使用的方法不一样，圣杯布局是用padding，而双飞翼布局是用margin。

双飞翼布局的核心思想是通过浮动和边距技术将中间内容区域放在最前面，左右侧边栏紧随其后，同时在中间内容区域内部嵌套一个.inner元素，以确保主要内容不被左右侧边栏覆盖。

浮动：使用浮动技术将左右侧边栏和中间内容区域横向排列。
外边距margin：通过设置外边距使中间内容区域能够占据中间部分，而留出空白给广告位。
内嵌容器：在中间内容区域内部再嵌套一个容器，以确保主要内容不被左右侧边栏覆盖。

    .inner{
      margin: 0 200px;
      height: 100%;
    }
    .content{
      width: 100%;
    }
    .page > div{
      float: left;
    }
    .left{
      margin-left: -100%;
    }
    .right{
      margin-left: -200px;
    }

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

在中间内容区域内部嵌套一个.inner容器，并设置其左右边距为200px，以确保主要内容不被左右侧边栏覆盖。
一样的，将容器内的所有div元素浮动，横向排列
通过负边距，将两边的广告位移到相对的位置

弹性布局

弹性布局的核心思想是通过设置容器为弹性容器，并为其子元素指定弹性属性，轻松实现复杂的布局。弹性布局的优点在于其简单易用，能自动调整元素的大小和位置，以适应不同的屏幕尺寸和内容量。

弹性容器：设置display: flex使容器成为弹性容器。
弹性子元素：使用flex属性使子元素在弹性容器中调整其占用空间。
顺序控制：使用order属性让子元素在弹性容器中调整其位置。

    .page{
      display: flex;
    }
    .content{
      flex: 1;
      order: 1;
    }
    .right{
      order: 2;
    }

将容器.page设为弹性容器
使用flex: 1使中间内容区域根据需要伸缩，占据弹性容器的剩余空间
使用order属性将三个板块按顺序排序，order的初始值为0 ，所以我们只需要设置中间部分和右边的广告位

以上三种方式，主打一个优先加载中间内容，两边的广告位不急的。我们可以看到在html的设计时我们会将主要内容放在前面，根据html从上到下解析的顺序，会优先加载主要内容，更加服务于用户的体验。而以下的则不是特别注重优先加载，但是也能做出三栏布局的样式

这是下面用到的html，css的基础样式还是不变

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

直接定位

直接定位就不用多说了，直接设置定好他们的位置就好了

表格布局

表格布局的核心思想是通过将容器设为表格，并将子元素设为表格单元格，以实现多列布局。这样可以轻松地将中间内容区域和左右侧边栏按表格的方式排列，使其具有相同的高度，并且可以通过设置固定宽度来控制侧边栏的宽度。

表格容器：使用display: table将容器设为表格布局。
表格单元格：使用display: table-cell将子元素设为表格单元格，使其按表格的方式排列。
固定宽度：为左右侧边栏设置固定宽度，为中间内容区域设置自适应宽度。

      .page{
        display: table;
        table-layout: fixed;
      }
      .page > div{
        display: table-cell;
      }
      .content{
        width: 100%;
      }

将容器.page设为表格布局，并设置table-layout: fixed以确保表格单元格具有固定宽度
将容器内的所有div元素设为表格单元格
将中间内容区域.content的宽度设置为100%，使其占满容器的剩余空间

网格布局

网格布局的核心思想是通过将容器设为网格容器，并为其定义网格列和行，使子元素按网格方式排列。网格布局的优点在于其强大的布局能力，可以轻松实现复杂的布局，并能精确控制每个元素的位置和大小。

网格容器：使用display: grid将容器设为网格容器。
网格模板：使用grid-template-columns定义网格列的大小和数量。
自动布局：自动将子元素按网格排列。

    .page{
      display: grid;
      grid-template-columns: 200px auto 200px;
    }

来创建一个三列、三行的网格布局，里面包含9个列表项。每个列表项具有相同的宽度和高度，并且通过网格间隙来设置列间距和行间距。

网格容器：使用display: grid将容器设为网格布局。
网格模板：使用grid-template-columns和grid-template-rows定义网格的列和行。
网格间隙：使用column-gap和row-gap设置列和行之间的间隙。

<head>
  <style>
    ul li {
      list-style: none;
      width: 200px;
      height: 200px;
    }
    ul {
      width: 600px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: 20px;
      grid-template-rows: 1fr 1fr 1fr;
      row-gap: 20px;
    }
  </style>
</head>
<body>
  <div class="page">
    <ul>
      <li style="background: red;">1</li>
      <li style="background: rgb(217, 148, 46);">2</li>
      <li style="background: rgb(226, 223, 21);">3</li>
      <li style="background: rgb(171, 238, 14);">4</li>
      <li style="background: rgb(4, 221, 170);">5</li>
      <li style="background: rgb(15, 190, 238);">6</li>
      <li style="background: rgb(28, 45, 226);">7</li>
      <li style="background: rgb(217, 54, 239);">8</li>
      <li style="background: rgb(223, 29, 97);">9</li>
    </ul>
  </div>
</body>