基本布局，圣杯布局，双飞翼布局

满脑子DIV

已于 2022-11-30 15:13:33 修改

阅读量400

点赞数

文章标签： css html 前端

于 2022-11-28 10:28:14 首次发布

本文链接：https://blog.csdn.net/m0_73860660/article/details/128073733

版权

1.圣杯布局

圣杯布局就是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证可以优先渲染。

2.双飞翼布局

双飞翼布局和圣杯布局基本是一致的，都是两边固定，中间自适应的三栏布局，主要区别就在于双飞翼布局在中间栏的DIV 中嵌套类一个div ，内容写在里面的div里面，然后对嵌套的div设置 margin-left，margin-right 。效果就像左右两栏在中间栏的上面，中间栏还是100%的宽度，就是中间栏的内容通过margin的值显示在中间而已。

相同点：

两种布局都将将盒子设置为右浮动，同时在HTML中盒子加载的顺序都是中左右，给定中间容器100%的宽度让其可以随着页面宽度的变化而变化。然后再用左边距将左右容器覆盖在中间容器上。

不同点：

当将三个容器拉到同一行时，圣杯布局是调整左右容器的位置，用相对定位的方式将左右容器移出中间容器，同时再给最外层容器一个内边距，防止覆盖中间容器。双飞翼布局是给中间容器再套一层内层容器，将内容在内层容器中显示，而不是在中间容器中。再给内层一个内边距，使内容不会被左右容器遮挡。

代码片段。

    <title>双飞翼布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /* 先设置三栏的宽高 以及浮动 背景颜色 */
        .left,
        .right{
            width: 200px;
            height: 200px;  
            background-color: red;
            float: left;
        }
        .center{
            height: 200px;
            background-color: pink;
            float: left;
            width: 100%;
        }
        /* 然后给 中间栏容器里面的 div设置 外边距撑开空间 */
        .inner{
            margin: 0 200px;
            height: 200px;
        }

        /* 直接给left 左外边覆盖到中间栏的最左侧 */
        .left{
            margin-left: -100%;
        }
        /* 直接给left 左边距 覆盖到最右侧 */
        .right{
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="center">
            <div class="inner">
                center 
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
      </div>
</body>

代码片段（圣杯）

  <title>圣杯布局</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      /* 先给给外层容器设置内边距 给左右两个栏预留位置 */
      .box {
        padding: 0 200px;
        height: 2000px;
      }
      /* 然后在渲染 左中右三栏的容器 */
      /* 给中间一栏设置宽度为100%，让他撑满整个容器  给三个栏都设一个高度方便看效果*/
      .center {
        width: 100%;
        background-color: pink;
        height: 200px;
      }
      .left,
      .right {
        height: 200px;
        width: 200px;
        background-color: red;
      }
       /* 给盒子里所有的div一个浮动 */
       .box div {
        float: left;
      }

      /* 现在需要把两个左右栏，放到上面两个空栏位置 */
      /* 先移动左边栏，给他一个相对定位， */
      .left {
        /* 先给一个相对 左边负他自身的宽度，让他唯一到最左边给他预留的位置。 */
        position: relative;
        left: -200px;

        /* 然后通过左外边距的 -100% 唯一到中间栏的左边  */
        margin-left: -100%;
      }

      .right {
        /* 右边是相反的 */
        /* 先是相对定位向右移动 200px */
        position: relative;
        left: 200px;
        /* 然后给左边一个左的外边距 -200px 为他自身的宽度*/
        margin-left: -200px;
      }
    
    </style>
  </head>
  <body>
    <div class="box">
      <div class="center">center</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
  </body>