一看就会的三栏布局和上中下布局方法！

三栏布局

方法一：使用浮动（Float）实现三栏布局

html 复制代码

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            height: 200px;
        }
        .left {
            background: red;
            width: 200px;
            float: left;
            height: 100%;
        }
        .center {
            background: green;
            height: 100%;
        }
        .right {
            background: yellow;
            width: 200px;
            float: right;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 注意left和right的顺序 -->
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="center">center center center center center center center center center center </div>
    </div>
</body>
</html>

方法二：使用 Flexbox（弹性布局) 实现三栏布局

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Three Column Layout with Floats</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100vw;
            height: 200px;
            display: flex;
        }
        .left {
            width: 200px;
            background-color: red;
        }
        .center {
            flex: 1;
            background-color: green;
        }
        .right {
            width: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">左</div>
        <div class="center">中</div>
        <div class="right">下</div>
    </div>
</body>
</html>

方法三：使用 Grid 实现三栏布局

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Column Layout with Grid</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container {
        display: grid;
        height: 200px   ;
        grid-template-columns: 1fr 1fr 1fr; /* 将布局分为三列，每列宽度相等 */
    }

    .left {
        /* grid-column: 1 / 2; 占据第一列 */
        background: red;
    }

    .center {
        /* grid-column: 2 / 3; 占据第二列 */
        background: green;
    }

    .right {
        /* grid-column: 3 / 4; 占据第三列 */
        background: yellow;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="left">左</div>
        <div class="center">中</div>
        <div class="right">下</div>
    </div>
</body>
</html>

方法四：使用绝对定位实现三栏布局

html 复制代码

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .container {
            width: 100%;
            height: 200px;
        }
        .left,.right{
            position: absolute;
            top: 0;
            background-color: green;
            height: 200px;
            width: 200px;
        }
        .left {
            left: 0;            
        }
        .right {
            right: 0;
        }
        .center {
            margin-left: 200px;
            margin-right: 200px;
            height: 100%;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
</body>
</html>

方法五：使用圣杯布局实现三栏布局

html 复制代码

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .container{
      height: 200px;
      padding: 0 200px 0 200px; /* 设置左右外边距为200px，上下外边距为0 */
    }
    .left{
      width: 200px;
      height: 100%;
      background-color: aqua;
      float: left;
      position: relative;
      right: 200px; /* 右边距设置为200px */
      margin-left: -100%; /* 左边距设置为-100%，用以拉伸至容器最左侧 */
    }
    .content{
      width: 100%;
      height: 100%;
      background-color: cadetblue;
      float: left;
    }
    .right{
      width: 200px;
      height: 100%;
      background-color: bisque;
      float: left; /* 左浮动，使元素向左靠拢 */
      margin-left: -200px; /* 左边距设置为-200px，用以拉伸至容器最右侧 */
      position: relative; /* 相对定位 */
      right: -200px; /* 右边距设置为-200px，使右侧栏回到容器的右侧位置 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="content">content</div>
    <div class="left">left</div>
    <div class="right">right</div>  
  </div>
</body>
</html>

方法六：使用双飞翼布局布局实现三栏布局

html 复制代码

<!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>
    *{
      margin: 0;
      padding: 0;
    }
    .conatiner{
      height: 200px;
    }
    .wrap{
      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="conatiner">
    <div class="wrap">
      <div class="content">content</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
</body>
</html>

双飞翼布局的实现 ：

.wrap 通过 padding: 0 200px 0 200px; 设置了左右两侧的空白区域为200px。同时，使用了浮动 float: left; 让其与左右两列并排显示，并且设置了盒模型为 box-sizing: border-box;，确保内边距不会增加元素的总宽度。
.left 类定义了左侧固定宽度为200px的列，高度与父容器相同。通过负的左外边距 margin-left: -100%; 实现向左移动一个相等于父容器宽度的距离，使得该列隐藏在左侧，不占据布局空间。
.right 类定义了右侧固定宽度为200px的列，高度与父容器相同。同样通过负的左外边距 margin-left: -200px; 实现向左移动200px的距离，使得该列隐藏在右侧，不占据布局空间。

双飞翼和圣杯布局的区别

相同之处 ：通过设置三个并排的 <div> 元素，利用负边距和浮动实现中间内容优先加载，左右两侧列分别固定宽度，且都不占据布局空间。

不同之处在于中间栏div内容不被遮挡解决思路不一样：

1. 双飞翼布局：双飞翼布局的解决思路是在中间内容区域内再嵌套一个子元素，通过给这个子元素设置负边距来使其左右两侧的列不会遮挡中间内容。这样，中间内容可以自由展示，而左右两侧的列则通过负边距移动到视觉上的正确位置。

特点：双飞翼布局采用了额外的子元素来解决中间内容不被遮挡的问题，整体结构相对清晰，解决方法相对直接。

2. 圣杯布局 ：圣杯布局则是通过设置左右两侧列的 position: relative; 和 margin-left/margin-right 来调整它们的位置，使它们在文档流中出现在中间内容的后方，避免遮挡中间内容。

特点：圣杯布局相对于双飞翼布局更加灵活，因为它可以通过调整 padding 和 margin 的方式实现布局，而不需要额外的子元素。左右两侧的列可以通过浮动或者 Flex 布局来实现。

上中下布局

1. 使用 Flex 布局实现上中下布局：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex布局上中下布局</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .container {
        display: flex;
        flex-direction:column; /*指定主轴为垂直方向*/
        height: 100vh;
    }

    .header {
        flex: 0 0 auto;
        background-color: lightblue;
    }

    .main {
        flex: 1;
        background-color: lightgreen;
    }

    .footer {
        flex: 0 0 auto;
        background-color: lightcoral;
    }
</style>
</head>
<body>
<div class="container">
    <div class="header">Header</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
</div>
</body>
</html>

header，footer 设置flex: 0 0 auto，相当于flex-grow: 0; flex-shrink:0; flex-basis: auto的简写，表示在任何情况下都不放大或缩小，保持盒子的本来大小，也可以不写flex来实现效果。

在中间main设置flex: 1 1 auto，也可以缩写成flex: auto，相当于flex-grow: 0; flex-shrink:0; flex-basis: auto的简写，表示在空间变化时放大或缩小，自动分配余下的空间。

2. 使用 Grid 布局实现上中下布局：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid布局上中下布局</title>
<style>
    .container {
        display: grid;
        grid-template-rows: auto 1fr auto;
        height: 100vh;
    }

    .header {
        background-color: lightblue;
    }

    .main {
        background-color: lightgreen;
    }

    .footer {
        background-color: lightcoral;
    }
</style>
</head>
<body>
<div class="container">
    <div class="header">Header</div>
    <div class="main">Main Content</div>
    <div class="footer">Footer</div>
</div>
</body>
</html>

grid-template-rows 属性定义了网格容器中每一行的高度。

auto：表示该行的高度由其内容决定，即根据内容的大小自动调整高度。
1fr：表示该行的高度占据剩余空间的比例，这里的 1fr 表示占据剩余空间的全部比例，如果有多个 1fr，则它们会平均分配剩余空间。

因此，grid-template-rows: auto 1fr auto; 意味着第一行和最后一行的高度由其内容决定，中间的一行占据剩余的所有空间，并且它们的高度将根据这些规则进行分配。

3. 固定定位实现上中下布局：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .container{
        width: 100%;
        height: 100vh;
        overflow: hidden; /* 防止内容溢出时出现滚动条 */
    }
    /* 占位块，position: fixed 会脱离文档流 */
    .block{ 
        width: 100%;
        height: 100px;
    }
    .header {
        width: 100%;
        height: 100px;
        position: fixed;
        top: 0;
        background-color: lightblue;
    }

    .main {
        display: flex;
        flex: auto;
        background-color: lightgreen;
        height: calc(100vh - 200px); /* 计算剩余空间的高度，减去头部和底部的高度 */
        overflow-y: auto;
    }

    .footer {
        width: 100%;
        height: 100px;
        position: fixed;
        bottom: 0;
        background-color: lightcoral;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="block"></div>
        <div class="main"> 
            Main Content
        </div>
        <div class="footer">Footer</div>
        
    </div>
</body>
</html>

效果显示：

这种布局也是移动端中最常用的布局，前俩种布局的Header和Footer都会随着内容而滚动，当内容过长时都会被带着滚动出窗口外，此外用position: sticky粘性定位也可以实现效果。