当面试官问你怎么用css实现三栏布局一篇文章秒了

哈喽哈喽，大家好。我是你们的金樽清酒。今天我给大家带来的是css面试题，三栏布局。我们都知道css呢在面试中问的都比较少也比较简单。但是呢？有一些题目呢也比较偏。那同样都是面试者想在css上拿分超越同水平面试者，那就必须对css的实现方法认识全面，而不是浅尝辄止。那今天我们就来详细的了解一下常考的三栏布局，了解一下大名鼎鼎的圣杯和双飞翼布局。emmmm,听着就很牛逼。

假如您也和我一样，在准备春招。欢迎加我微信shunwuyu，这里有几十位一心去大厂的友友可以相互鼓励，分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！”

什么是三栏布局

三栏布局是指网页设计中常见的一种页面布局方式，通常将页面分为左栏、中栏和右栏，每个栏目可以用来展示不同的内容或功能。这种布局方式通常用于构建网站的主体结构，以便更好地组织和展示页面内容。

在三栏布局中，通常将主要内容放置在中间栏，辅助内容或导航放置在左右两栏。这种布局方式通常适用于各种类型的网站，如博客、新闻网站、电子商务网站等。

使用三栏布局可以使页面内容更加有序和易于阅读，同时也能够更好地利用页面空间，提供更多的信息和功能。

举个例子

这就是三栏布局，左右两侧的盒子宽度固定，然后中间的盒子会随屏幕自适应。一般中间放主体内容，左右两边放辅助内容。

看，当我们的屏幕变化的时候，由于左右两边是固定死的，所以中间会自适应宽度，这就是三栏布局。看起来其实三栏布局也蛮简单的，那怎么去实现呢？你又能想出多少种办法去实现呢？

如何实现三栏布局

方法一弹性布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            height: 200px;
            display: flex;
        }

        .left {
            width: 200px;
            height: 100%;
            background-color: aqua;
        }

        .content {
            width: 100%;
            height: 100%;
            background-color: cadetblue;
            flex: 1;
        }

        .right {
            width: 200px;
            height: 100%;
            background-color: bisque;

        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="left">left</div>
        <div class="content">content</div>
        <div class="right">right</div>
    </div>
</body>

</html>

将最外层盒子设为弹性布局，然后左右两边的盒子固定宽度。将中中的盒子flex设为1，将剩余所有空间给中间的盒子，就能达到自适应宽度的效果。

方法二 grid布局和弹性布局一样。grid的布局能达到和弹性布局一样的效果。左右两边的宽度固定死然后将剩余的空间给中间的主体部分。那就要用到grid-template-columns：定义网格的列大小和数量。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrap {
            height: 200px;
            display: grid;
            grid-template-columns: 200px  1fr 200px;
        }

        .left {
            width: 200px;
            height: 100%;
            background-color: aqua;
        }

        .content {
            width: 100%;
            height: 100%;
            background-color: cadetblue;
            flex: 1;
        }

        .right {
            width: 200px;
            height: 100%;
            background-color: bisque;

        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="left">left</div>
        <div class="content">content</div>
        <div class="right">right</div>
    </div>
    弹性布局的方法
</body>

</html>

方法三圣杯布局！！！圣杯布局是项目常用的方法，因为它有一个特别巧妙的地方。我们想一个这样子的情况。三栏布局中间是主体部分，左右两边是广告或者是导航栏。那我们是先让客户看广告呢还是先看主体内容呢?当然呢，如果你想让客户先看广告那就可以跳过圣杯布局呢（坏笑）。那圣杯布局有什么奇妙的地方呢？那就是将html结构中主体部分的盒子放在前面。显然html结构是这样的，那用弹性布局和grid布局是做不到的。那我们用什么呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap{
      height: 200px;
      padding: 0 200px 0 200px;
    }
    .left{
      width: 200px;
      height: 100%;
      background-color: aqua;

      float: left;
      position: relative;
      right: 200px;
      margin-left: -100%;
    }
    .content{
      width: 100%;
      height: 100%;
      background-color: cadetblue;
      float: left;

    }
    .right{
      width: 200px;
      height: 100%;
      background-color: bisque;
      float: left;
      margin-left: -200px;
      position: relative;
      right: -200px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="content">content</div>

    <div class="left">left</div>
    <div class="right">right</div>

    
  </div>
</body>
</html>

实现原理 float + margin负值 + position:relative

首先给外层大盒子留好边距，并且将三个盒子都左浮。可以看到下面的效果。

本来都是浮动，三个盒子应该在同一行的，但是由于上面空间不够被挤下来，然后左右都加margin left：200px;变成下面的效果，你会发现，左右两边各遮挡了中间200px的宽度。

最后一步 position：relative；左边相对自身左移200px,右边相对自身右移200px。

三栏布局就完成啦，而且按照这个html结构，会先加载主体内容，就非常的nice，这不拿捏面试官，我太狂咯。

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .wrap{
      height: 200px;
    }

    .conatiner{
      height: 100%;
      background-color: cadetblue;
      padding: 0 200px 0 200px;
      float: left;
      width: 100%;
      box-sizing: border-box;
    }

    .left{
      width: 200px;
      height: 100%;
      background-color: aqua;
      float: left;
      margin-left: -100%;
    }
    
    .right{
      width: 200px;
      height: 100%;
      background-color: bisque;
      float: left;
      margin-left: -200px;
    }
  </style>
</head>
<body>
  <div class="wrap">

    <div class="conatiner">
      <div class="content">content</div>
    </div>

    <div class="left">left</div>
    <div class="right">right</div>

  </div>
</body>
</html>

双飞翼布局的html结构也是先加载主体内容，并且用浮动加marginfu值，无须定位。用到了box-sizing: border-box;

拓展一下box-sizing: border-box; box-sizing: border-box; 是一个CSS属性，用于指定元素的框模型的计算方式。默认情况下，当您设置元素的宽度和高度时，浏览器会将这些尺寸应用于元素的内容框（content box），并在内容框外绘制填充（padding）和边框（border）。这意味着，添加填充和边框会增加元素的实际尺寸。

然而，当您将 box-sizing 属性设置为 border-box 时，浏览器会将指定的宽度和高度应用于元素的边框框（border box），而不是内容框。这意味着填充和边框将会被包含在指定的宽度和高度之内，而不会增加元素的实际尺寸。这样可以更方便地控制元素的尺寸，特别是在设计响应式布局时非常有用。

以下是一个示例：

cssCopy code
/* 默认框模型 */
.element {
  width: 200px; /* 实际宽度为 200px + padding + border */
  height: 100px; /* 实际高度为 100px + padding + border */
  padding: 10px;
  border: 1px solid #000;
}

/* border-box 框模型 */
.element {
  box-sizing: border-box;
  width: 200px; /* 实际宽度为 200px */
  height: 100px; /* 实际高度为 100px */
  padding: 10px;
  border: 1px solid #000;
}

在上述示例中，对于默认框模型，元素的宽度和高度会包括填充和边框的尺寸，而对于 border-box 框模型，填充和边框的尺寸会被包含在指定的宽度和高度内。

总之，使用 box-sizing: border-box; 可以更方便地控制元素的尺寸，减少在设计布局时的复杂性。也就是说内外边距不算在元素的宽度里面。然后margin -200px将三者弄到同一行，且由于内边距不计算在主体元素里面，所以左右部分占据位置，达到三栏布局效果。

总结

好了，实现三栏布局的方法大概就是这四种。一般应用是圣杯布局和双飞翼布局。因为这种html结构可以先加载主体内容，增加用户的体验。

面试官问你三栏布局怎么实现 大胆告诉它圣杯布局 双飞翼布局！！！让面试官刮目相看

当面试官问你怎么用css实现三栏布局 一篇文章秒了

什么是三栏布局

如何实现三栏布局

总结

面试官问你三栏布局怎么实现大胆告诉它圣杯布局双飞翼布局！！！让面试官刮目相看

当面试官问你怎么用css实现三栏布局一篇文章秒了