对于三栏布局，你知道多少？-祁东璟辰科技有限公司

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

三栏布局的实现方式

最简单的‘三栏布局’

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

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

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

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

圣杯布局

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




css

复制代码
.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把他们揪出来。




css

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

这里为什么要用margin呢？

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

双飞翼布局

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




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>

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




sql

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

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

Flex 布局

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

oder属性

怎么这么像点餐

当然你可以这么理解

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

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

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

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

CSS Grid

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

基本语法

创建网格容器




css

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

定义网格轨道

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




css

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

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

放置网格项目




css

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

关键属性

网格模板区域

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




css

复制代码
.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 来设置行和列之间的间距。




css

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

自动放置 (Auto-Placement)

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




css

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

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

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

如有侵权请联系站点删除！