细品三栏布局中的弹性flex、grid、table等布局弹性布局对于弹性布局，也是一样的需要做好提前的结构以及样式准备

弹性布局

对于弹性布局，也是一样的需要做好提前的结构以及样式准备：
由于弹性布局是设置在父元素上的，其内部元素生效,所以我们给page加上display:flex;属性, 很明显主要内容的盒子没有设置宽度，但是在弹性布局内，我们只要给主要内容的盒子加上flex:1;的属性

为什么说弹性布局很好用呢？主要是它太灵活了！！在flex中有一个专门的属性，order 属性是专门用于flex布局（flexbox）和网格布局（grid layout）中的一个重要属性，order 属性定义了flex项目在flex容器中的排序顺序。默认情况下，所有flex项目的order值为0，所以：

.content{
     flex: 1;   /*flex:1 的作用就是 除了定宽元素，该元素占满整行*/
     order: 1;  /*默认为0,指的是其放置的顺序*/
} 
.right{
     order: 2;
}

加入这样的代码就可以实现左广告位在前侧，内容在中间，右广告位在最右侧。

Grid网格布局

对于网格布局那就更简单了;

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            height: 200px;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background-color: aqua;
        }
        .content{
            height: 200px;
            background-color: pink;
        }
        .page{
            display: grid;
            grid-template-columns: 200px auto 200px; /*划分三列，第一列200px 第三列200px 中间列占全部*/
        }
    </style>

这里最主要是了解网格布局的grid-template-columns属性的使用方法：grid-template-columns 是CSS Grid布局中一个非常重要的属性，用于定义网格容器（grid container）中列（columns）的大小和数量。这个属性让你能够精确控制网格布局的列宽，支持各种单位，包括百分比、像素、fr单位（代表可用空间的一个分数）以及其他长度单位。

举个简单的例子：

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 定义三列，第一列和第三列各占可用空间的1/4，第二列占1/2 */
}

在这个例子中，网格容器被划分为三列，第一列和第三列宽度相等，各占总宽度的1/4，而第二列宽度是它们的两倍，即占总宽度的1/2。

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

最终也可以实现三栏布局。

table布局

table布局和网格布局差不多，body部分与网格布局一致。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            height: 200px;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background-color: aqua;
        }
        .content{
            height: 200px;
            background-color: pink;
        }
        /*主要还是下面的样式区别*/
        .page{
            display: table;
            table-layout: fixed;  /*当设置为 `fixed` 时，表格列宽由表格宽度和列宽度设定确定，忽略单元格的内容*/
            width: 100vw; /*让这个表格类型占满整行*/
        }
         .page > div{
            display: table-cell;  
        }
    </style>

这里也是需要对display:table;属性需要有一定的了解。

display: table;：这一行将元素的显示模式设为 table。这意味着该元素及其符合条件的子元素会像HTML表格一样布局，其中子元素可以像表格单元格那样排列。但请注意，这里并没有使用 <table>, <tr>, <td> 等实际的表格标签，而是通过CSS模拟了表格布局。
display: table-cell; 是让这个display: table-cell; 的元素会与其他同类元素（即同在一个使用了 display: table-row; 的父元素内的元素）水平排列，形成一行，并且会自动适应其内容的宽度（如果未明确设置宽度）。这样就可以让这三个盒子都在同一行显示了。

对于这后面两个布局方式（网格布局和表格table布局）他们都有缺点，目前不是很常用，他们都不是先加载内容，而是先加载广告位，所以请谨慎使用哦！