前言

前戏

我们先来一点小菜，把下面page容器中的left、content和right实现一个三栏布局。

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

先把page中的div设为行内块级元素，因为变为了行内块级元素，所以换行也会被识别为字符，所以div之间会有间隙，我们只要在page上设置fontsize: 0;即可，但是不能全部为0，所以我们得在div中设置fontsize: 20px;，再给content设置宽度width: calc(100vw - 400px);，calc()用于执行数学计算。

    <style>
       * {
           margin: 0;
           padding: 0;
       }
       .page {
           height: 200px;
           font-size: 0;
       }
       .left ,.right {
           height: 200px;
           width: 200px;
           background-color: #ee2424;
       }
       .content {
           height: 200px;
           background-color: #1a9e00;
           width: calc(100vw - 400px);
       }
       .page div {
           display: inline-block;
           font-size: 20px;
       }
   </style>

但是这样不能实现主要内容优先加载，在实际开发应用中并不合理，可能用户点开页面等好几秒都没加载出主要内容，然后就关闭了页面。我们想实现主要内容优先加载只需要把content放在页面的最前面优先加载。

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

<style>
     * {
         margin: 0;
         padding: 0;
     }
     .page {
         height: 200px;
     }
     .left ,.right {
         height: 200px;
         width: 200px;
         background-color: #ee2424;
     }
     .content {
         height: 200px;
         background-color: #1a9e00;
     }
</style>

接下来正片开始！！！

1.圣杯布局

圣杯布局是一种经典的三栏布局技术，它使用了浮动（float）和负边距（margin）来实现左右两边固定，中间内容自适应的布局。

<style>
   * {
       margin: 0;
       padding: 0;
   }
   .page {
       height: 200px;
   }
   .left ,.right {
       height: 200px;
       width: 200px;
       background-color: #ee2424;
   }
   .content {
       height: 200px;
       background-color: #1a9e00;
   }

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

具体修改：

• .page 容器左右内边距设为 200px，确保中间内容区域左右两侧各留出 200 像素的空间。
• .page 内的所有 div 元素设置浮动，使它们依次排列在一行。
• .content 宽度设为 100%，最初会占据父容器 .page 的全部宽度。
• margin-left: -200px; 将 .left 向左移动 200 像素，使其脱离正常文档流。
• position: relative; 和 left: -100%; 将 .left 再向左移动其自身宽度的 100%，最终使 .left 完全在 .content 左侧。
• margin-right: -200px; 将 .right 向右移动 200 像素，使其脱离正常文档流，覆盖 .content 的右侧部分。

2.双飞翼布局

双飞翼布局与圣杯布局类似，但有所不同。双飞翼布局将主要内容包裹在一个额外的容器中，利用margin-left和margin-right来实现左右两边固定，中间内容自适应。

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

<style>
    * {
      margin: 0;
      padding: 0;  
    }
    .page {
        height: 200px;
    }
    .left, .right {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
    .content {
        height: 200px;
        background-color: blue;
        width: 100%;
    }
    .inner {
        margin: 0 200px;
        height: 100%;
    }
    .page > div {
        float: left;
    }
    .left {
        margin-left: -100%;
    }
    .right {
        margin-left: -200px;
    }
</style>

具体修改：

• .page > div 为 .page 容器内的所有 div 元素设置浮动，使它们依次排列在一行。
• .left 的 margin-left: -100%; 将 .left 向左移动其父容器宽度的 100%。
• .right 的 margin-left: -200px; 将 .right 向左移动 200 像素，使其与 .content 同一水平位置。

3.弹性布局

弹性布局是CSS3的一种布局模式，特别适合于实现复杂的布局。使用Flexbox，可以轻松实现左右固定，中间自适应的三栏布局。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .page {
        height: 200px;
    }
    .left ,.right {
        height: 200px;
        width: 200px;
        background-color: #ee2424;
    }
    .content {
        height: 200px;
        background-color: #1a9e00;
    }


    .page {
        display: flex;
    }
    .content {
        flex: 1;
        order: 1;
    }
    .right {
        order: 2;
    }
</style>

具体修改：

• display: flex; 将 .page 容器设置为弹性盒子容器，使其子元素成为弹性盒子项目。
• flex: 1; 使 .content 元素可以自由扩展，填充剩余的空间，实现中间栏自适应宽度。
• order: 1; 设置 .content 的排列顺序为 1，确保其在布局中的顺序。
• order: 2; 设置 .right 的排列顺序为 2，确保其在布局中的顺序。

4.table布局

表格布局是一种传统的布局方法，使用HTML的<table>标签和相关的表格单元格属性来实现布局。尽管不如Flexbox和Grid布局灵活，但在某些情况下仍然有其用武之地。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .page {
        height: 200px;
        width: 100%;
    }
    .left ,.right {
        height: 200px;
        width: 200px;
        background-color: #ee2424;
    }
    .content {
        height: 200px;
        background-color: #1a9e00;
    }

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

具体修改：

• display: table; 将 .page 容器设置为表格容器，使其子元素成为表格单元格。
• table-layout: fixed; 确保表格布局固定，以便各单元格能够根据内容自动调整宽度。
• .page > div 设置 display: table-cell;，使 .page 容器内的所有 div 元素成为表格单元格。
• .content 设置 width: 100%;，确保其宽度占据剩余的可用空间。

5.网格布局

网格布局是CSS3中新增的一种强大的布局系统，能够以网格的形式精确控制页面布局。尽管它也可以实现三栏布局，但网格布局并不适合主要内容优先加载的需求，因为它的特性会导致各部分同时加载。

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .page {
        height: 200px;
    }
    .left ,.right {
        height: 200px;
        width: 200px;
        background-color: #ee2424;
    }
    .content {
        height: 200px;
        background-color: #1a9e00;
    }

    .page {
        display: grid;
        grid-template-columns: 200px auto 200px;
    }
</style>

具体修改：

• display: grid; 将 .page 容器设置为网格容器，使其子元素成为网格项目。
• grid-template-columns: 200px auto 200px; 定义了三列网格布局，其中第一列和第三列宽度为 200px，第二列宽度为 auto，即自动占据剩余空间。

总结

在实现三栏布局时，你可以根据具体的需求和项目情况选择合适的布局方法。

圣杯布局和双飞翼布局通过浮动和负边距实现传统的三栏布局，适合较为简单的布局需求；弹性布局提供了更加灵活和简；表格布局的优点是在一些特定场景下可以更直观地控制布局，但不推荐在一般页面布局中过度使用；网格布局非常适合复杂布局需求，但在主要内容优先加载的情况下，需要额外的优化措施。

希望你学到了有用的东西，一起加油！！！