对于三栏布局，你知道多少？

网页设计给了用户不一样的全新浏览体验，好比规划一座城市、设计一片公园...我们可以尽情地在这片空间释放我们的奇思妙想，用户良好的体验反馈是我们最大的满足与认可。三栏布局，作为一种经典实用的布局方式，在很多网站有着它的使用，同时，也是面试中经典的考题。

三栏布局的实现方式

最简单的'三栏布局'

实现三栏布局，我们首先就是要规划出三个区域出来，并且横向摆放在页面上。

我们可以很轻松的将三块区域划分出来，但是如何让他们横向排列呢？如果不使用浮动等布局呢？ 答案自然是可以的。 要将三个块级元素转换成行内块级元素。我们只需要在父容器中设置display: inline-block;各位可以试一试。

• 元素会在同一行内显示，但宽高却不能设置了。
• 元素之间会有默认的空白间距，这是由于代码的换行会读取换行符号当做空字符通常需要用font-size: 0; 和 letter-spacing: -1px;覆盖默认的空白间距。同时在page下的div中设置字体大小，就会显示文字了。

在浏览器中，我们需要优先加载主要内容，如果我们将content放在第一行，就无法实现我们想要的优先加载了。

圣杯布局

我们可以用浮动布局来完成。当主要内容并不在中间呢，我们如何将两个广告位放置在主要内容的一左一右呢？

.page{
            height: 200px;
            padding:0 200px;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background: #406e91;
        }
        .content{
            height: 200px;
            width: 100%;
            background: #7f575b;
        }
        .page div{
            float: left;
            border: 1px solid #5d3232;
        }
        
<div class="page">
         //这里将content优先加载
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>

我们可以将主要内容占满容器的宽度 并为容器设置内边距来放置左右两边的内容

那么问题来了 如果都已经占满了容器 左右势必会被挤出容器的。但是总是保证自己的顶部和上一个元素的底部对齐。

因为设置了浮动属性，我们也就能使用margin- 来控制它们的位置

他们虽然被挤下去了，但他们实际位置应该在content后面的，由于放置不下才被挤下去，我们可以认为找了个地缝钻进去了 。 我们可以用margin-left 或 margin-right把他们揪出来。

.left{
            margin-left: -200px;//向左移
            position: relative;
            left:-100%
        }
        .right{
            margin-right: -200px;
        }

这里为什么要用margin呢？

• 负的margin-left：将元素向左移动，这在需要将元素部分或完全从其正常流中向左偏移时非常有用。
• 正的margin-left：将元素向右移动，增加其与前一个元素或父容器左边界的距离。

双飞翼布局

主要依赖于 CSS 的浮动和负边距技术来实现，其目的是使得内容主体能够优先加载并放置在文档流的前面，从而使得搜索引擎更容易获取到内容。

    * {                             .page {
          margin: 0;                       height: 200px;
          padding: 0;                     }
      }
     .left,
     .right {                       .content {
            width: 200px;                     height: 200px;     
            height: 200px;                    background: #966f73;
            background: #2f9dd0;              width: 100%;
                                            }
        }
                                        /* 这里的div是page下的所有div */
        .inner {                    .page>div {
            margin: 0 20px;                       float: left;
        }                                      }
     
    <div class="page">
        <div class="content">
            <div class="inner">主要内容</div>
        </div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>

那么各位 我们现在知道如何去将广告位放在左右两边了么？

        //向左移动父容器的宽度
        .left {
            margin-left: -100%;
        }
       //当.left 向左移动后 由于浮动 .right会移动到前者移动前的位置
       //此时再向左移动 则回到父容器
        .right {
            margin-left: -200px;
        }

那么这里为何不用margin-right 正值呢？ 这是因为右边没有元素 并且也不适合用margin-right

Flex 布局

相信大家是有点晕，为啥要这么大费周折呢？ 当然，Flex布局能够更快更易于理解地实现

oder属性

怎么这么像点餐

当然 你可以这么理解

在 Flexbox 布局中，order 属性用于改变项目的排列顺序。默认情况下，所有项目的 order 值都是 0，但你可以通过设置不同的 order 值来调整项目在容器中的显示顺序。order 属性可以是正数、负数或者零。数值越小，项目越靠前显示。

1. 默认值 ：每个 flex 项目的默认 order 值是 0。
2. 负数值 ：负数 order 值会使项目排在那些 order 值为 0 或正数的项目之前。
3. 相同的 order 值 ：如果多个项目有相同的 order 值，它们将按照它们在源文档中的顺序显示。

使用 order 属性，可以轻松调整项目的显示顺序，而无需改变 HTML 的结构。这对于创建响应式布局特别有用，可以在不同的屏幕尺寸下动态调整项目的排列顺序。

Flex三栏布局，就留给各位了，相信脑子里早已跃出答案了吧~

CSS Grid

CSS Grid 是一种非常强大的布局工具，使用二维网格系统可以同时处理行和列，拥有强大的灵活性和控制力。

基本语法

创建网格容器

css
复制代码
.container {
    display: grid;
}

定义网格轨道

使用 grid-template-columns 和 grid-template-rows 定义列和行。

.container {
    display: grid;
    grid-template-columns: 100px 200px auto;
    grid-template-rows: 100px 200px auto;
}

这将创建一个三列三行的网格，列宽分别为 100px, 200px 和自动适应，行高分别为 100px, 200px 和自动适应。

放置网格项目

.item1 {
    grid-column: 1 / 3; /* 从第1列开始到第3列结束 */
    grid-row: 1 / 2; /* 从第1行开始到第2行结束 */
}

关键属性

网格模板区域

你可以使用 grid-template-areas 属性定义布局区域。

.container {
    display: grid;
    grid-template-areas: 
        "header header header"
        "sidebar main main"
        "footer footer footer";
    grid-template-rows: 50px 1fr 50px;
    grid-template-columns: 150px 1fr;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

间隙 (Gap)

使用 grid-gap、grid-row-gap 和 grid-column-gap 来设置行和列之间的间距。

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 10px; /* 行和列之间的间距 */
}

自动放置 (Auto-Placement)

你可以使用 grid-auto-rows 和 grid-auto-columns 来自动生成额外的行和列。

.container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 50px; /* 额外行的高度 */
}

三栏布局虽然是一个简单的布局格式，但也深藏着很多学问，除了以上几种方法，也还有其他方法可以实现，欢迎一起讨论！