面了十几年的"三栏布局"

今天来分享经典的三栏布局。📢)))

要实现三栏布局可能非常简单。以前通常一打开网站，就可以看到左右两边的广告，真正的内容则是放在中间。

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

 * {
       padding: 0;
       margin: 0;
   }
   .page {
       height: 200px;
   }
   .left, .right {
       height: 200px;
       width: 200px;
       background-color: pink;
   }
   .content {
       height: 200px;
        /* 中间的内容不能固定大小
        要保证广告位大小不变，中间随设备大小而改变 */
       background-color: yellow;
   }

使用最原始的方法来让三个盒子占据三列。

.page div {
    /* 变成行内块元素  */
    display: inline-block;
    font-size: 16px;
}
.page {
    height: 200px;
    font-size: 0;
}

会发现盒子之间出现了边距,但是我们并没有添加任何的边距。这是因为行内块元素之间有空格。也就是我们在写三个div时换行了，要解决很明显不能去不换行，可以在最外的page盒子上设置字体大小为零，使空格大小变为零。

.content {
    height: 200px;
    /* 中间的内容不能固定大小
    要保证广告位大小不变，中间随设备大小而改变 */
    background-color: yellow;
    
    width: calc(100vw - 400px);
}

使用calc方法来计算中间内容的大小，百分百的一屏宽度减去左右的广告位大小就行了，注意减号两边要打上空格，不然识别不出来。

这样就实现了三列显示，但事实上这并不是三栏布局。我们会发现在写布局的时候是左广告位，到主要内容，再到右广告位，但是当左广告位的内容需要加载挺久的时候，中间的主要内容就会迟迟不能显示，这样明显不合理。

三栏布局

三栏布局是一种网页设计中常用的布局方式，指的是页面内容被划分为三个垂直并排的部分，通常包括一个左侧栏、一个右侧栏和一个中间栏。这种布局的特点是，左右两侧的栏（也称作侧栏）宽度往往是固定的，用来放置如导航菜单、广告、边栏信息等相对静态的内容；而中间栏的宽度则是自适应的，能够根据浏览器窗口的大小变化而调整，主要用于展示主要的、动态变化的内容，如文章正文、产品列表等。

简略来讲就是主要的内容优先加载，左右固定，中间自适应。

1、圣杯布局

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

* {
    padding: 0;
    margin: 0;
}
.page {
    padding: 0 200px;
    height: 200px;
}
    .left, .right {
    height: 200px;
    width: 200px;
    background-color: pink;
}
.page div {
    float: left;
}
.content {
    width: 100%;
    height: 200px;
    background-color: aqua;
}

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

• 为了使左侧栏贴到页面最左边（尽管它在HTML结构中位于中间），我们使用了负外边距margin-left: -200px;将其向左拉出，并通过position: relative; left: -100%;确保它相对于其正常流位置向左移动了100%，即完全覆盖到了页面的最左侧。这一步是为了确保左侧栏即使在页面滚动时也能保持固定位置。

• 对于右侧栏，我们同样使用负外边距margin-right: -200px;使其与页面右边对齐。由于它在DOM中的顺序排在最后，这个方法直接有效，不需要额外的定位调整。

div挪来挪去竟然就可以做到这种程度，css样式看来并没有想的那么简单，看过张鑫旭大佬的《CSS世界》，才见识css的奇妙。

2、双飞翼布局

布局稍作修改，在content中加个inner，主要内容放在inner中。

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

* {
    margin: 0;
    padding: 0;
}
.page {
    height: 200px;
}
.left, .right {
    width: 200px;
    height: 200px;
    background-color: palegoldenrod;
}
.content {
    height: 200px;
    background-color: azure;
    width: 100%;
}
.inner {
    margin: 0 200px;
    height: 100%;
    /* background-color: beige; */
}

.page > div {
    float: left;
}
.left {
    margin-left: -100%;
}
.right {
    margin-left: -200px;
}

• .left使用margin-left: -100%;将其拉到最左侧。这一技巧使得左侧栏能够紧靠页面边缘，同时不会影响其他元素的位置。
• .right则用margin-left: -200px;直接将其定位到应有的位置，这里的负值正好等于它的宽度，确保它与左侧栏并列且右侧对齐。这是因为.right元素在文档流中位于.content之后，当它浮动到左侧时，通过设置负的等于自身的宽度的左边距，它能够恰好填补由.content中的内部元素.inner留出的右侧空间，从而完美地贴合在页面的右侧。

注意.right中不要写成margin-right: 200px;哦，这完全是不一样的。这样只会使.right元素尝试在其自身的右侧添加200px的空白空间，而不是考虑左侧栏的存在。

3、弹性布局

随着css的迭代，出现了弹性布局，使三栏布局实现起来十分简便。

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

* {
    padding: 0;
    margin: 0;
}
.page {
    height: 200px;
    display: flex;
}
.left, .right {
    height: 200px;
    width: 200px;
    background-color: pink;
}
.content {
    height: 200px;
    background-color: aliceblue;
}

.content {
    flex: 1;
    order: 1;
    background-color: aliceblue;
}
.right {
    order: 2;
}

利用order属性调整元素的显示顺序。直接主要内容为1，右广告位为2就解决了。是不是特别的方便有效？！

flex: 1; 是一个简写属性，等同于 flex: 1 1 0%;。

• 第一个值（1）是flex-grow，表示在父容器有多余空间时，该元素如何增长。值为1意味着它会占用剩余空间的一部分。如果有多个flex item的flex-grow都为1，则这些item会均分多余的空间。
• 第二个值（1）是flex-shrink，指示在空间不足时，该元素相对于其他flex item的收缩比例。值为1意味着它和其他flex item按相同比例缩小。
• 第三个值（0%）是flex-basis，定义了在分配多余空间前元素的初始大小。值为0%意味着在计算如何分配额外空间前，该元素不占据任何固定空间。

4、网格布局

<div class="page">
    <div class="left">左广告位</div>
    <div class="content">主要内容</div>
    <div class="right">右广告位</div>
</div>
    
* {
    padding: 0;
    margin: 0;
}
.page {
    height: 200px;
    display: grid;
    grid-template-columns: 200px 1fr 200px;

}
.left, .right {
    height: 200px;
    width: 200px;
    background-color: pink;
}

.content {
    height: 200px;
    background-color: aqua;
}

• .page设置了display: grid;，使用了Grid布局模式。
• grid-template-columns: 200px 1fr 200px;定义了三列的宽度。第一列和第三列固定为200px，分别对应左右侧栏，中间列使用1fr单位，表示剩余空间的一份，因此自适应屏幕宽度。

5、表格布局

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

* {
    padding: 0;
    margin: 0;
}
.page {
    height: 200px;
    display: table;
    table-layout: fixed;
    width: 100vw;
}
.left, .right {
    height: 200px;
    width: 200px;
    background-color: pink;
}

.content {
    height: 200px;
    background-color: aqua;
    width: 100%;
}
.page div {
    display: table-cell;
}

• .page设置了display: table;，将容器作为一个表格对待。
• table-layout: fixed;确保表格的列宽由指定宽度决定，而非内容决定，有利于布局的稳定。
• 每个子<div>被设定为display: table-cell;，这样它们就会像表格单元格一样排列。

总结

今天了解了什么是三栏布局，以及实现三栏布局的几种常见方式。表格布局和网格布局其实并不能实现主要内容优先显示，所以简单介绍，话说这两种方式本来也就是简单。希望看完对你有一点帮助，一起加油！✌️