114、美团CSS题---双飞翼布局和圣杯布局

C.&H.

于 2021-10-03 21:11:26 发布

阅读量252

点赞数

分类专栏：前端面试题目文章标签： css html html5

本文链接：https://blog.csdn.net/sunnnnh/article/details/120597515

版权

前端面试题目专栏收录该内容

136 篇文章 40 订阅

订阅专栏

本文详细介绍了前端布局中的圣杯布局和双飞翼布局，包括两者实现代码、过程解析及区别。圣杯布局利用浮动和相对定位实现三栏布局，而双飞翼布局只需浮动，通过中间部分内层容器的margin解决问题，更适应宽度变化。当中间部分宽度小于左侧时，双飞翼布局能保持良好布局，而圣杯布局会出现混乱。

摘要由CSDN通过智能技术生成

不同于之前所看的左右定宽，中间自适应。圣杯与双飞翼是另外两种写法。

反正不管是圣杯还是双飞翼，最后结果都是如下图所示。

DOM上， 中间的放首位，然后是左边，右边。为了优先显示中间主要部分，故先构建中间main部分。

一、圣杯布局

使用float布局框架，position: relative定位， margin为负值。

1.1 代码实现

CSS部分
    body{
      min-width: 550px;
    }
    *{
      margin: 0;
      padding: 0;
    }
    .header, .footer{
      background: palevioletred;
      width: 100%;
    }
    .footer{
      clear: both; /*清除中间盒子浮动产生的影响*/
    }
    .left,.right,.center{ /*左、右、中间盒子*/
      float: left;
      position: relative;
      min-height: 130px;
    }
    .main{ /*包括左中右的外部区域*/
      padding: 0 220px 0 200px;  /*避免被左右区域覆盖，把中间部分的内容拉出来*/
    }
    .center{ /*中间*/
      width: 100%;
      background: cornflowerblue;
    }
    .left{ /*左*/
      margin-left: -100%;  /*把left从下一行拉到上一行最左边*/
      background: plum;
      width: 200px;
      left: -200px; /*对left区域还原*/
    }
    .right{ /*右*/
      background: powderblue;
      width: 220px;
      margin-left: -220px; /*把right从下一行拉到上一行最右侧*/
      right: -220px; /*对right区域还原*/
    }

DOM部分
<body>
  <div class="header">头部</div>
  <div class="main">
    <div class="center">中间中间中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
  <div class="footer">底部</div>
</body>

效果图：

缺点：正常情况下是没有问题的，但是当中间部分的宽小于左侧部分时就会发生布局混乱。如下图所示：

1.2 详细过程解析

操作步骤：

将三者都 float:left , 再加上一个position:relative (因为相对定位后面会用到）
center部分 width:100%占满
此时center占满了，所以要把left拉到最左边，使用margin-left:-100%
这时left拉回来了，但会覆盖center内容的左端，要把middle内容拉出来，所以在外围main加上 padding:0 220px 0 200px
center内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-220px
到这里大概就自适应好了。如果想main高度保持一致可以给left center right都加上min-height:130px

1）设置中间部分 width:100%占满。此时左边和右边区域被挤到下一行

2）使用margin-left:-100%，把left拉到最左边。left拉回来了，但会覆盖middle内容的左端

3）要把middle内容拉出来，所以在外围盒子main加上 padding:0 220px 0 200px：

其中220px 和 200px 分别为右区域、左区域的宽。

4） middle内容拉回来了，但left也跟着过来了，所以要还原，就对left使用相对定位 left:-200px 同理，right也要相对定位还原 right:-220px（200px为左盒子宽度，220px为右盒子宽度）

二、双飞翼布局

双飞翼布局是阿里提出来的，与圣杯有以下三点区别：

圣杯布局需要浮动与相对定位（为左右区域添加left、right），而 双飞翼只需要浮动；
双飞翼 在中间部分加了一层容器，所以Dom结构就不一样；
圣杯布局是通过父元素main的 pddding 来为 left，right 预留空间；而双飞翼是通过中间盒子内部区域的margin 来显示完整middle 的内容。

2.1 代码实现

   CSS部分
 
   body {
      min-width: 550px;
    }

    * {
      margin: 0;
      padding: 0;
    }

    .header,
    .footer {
      height: 30px;
      background: powderblue;
    }

    .footer {
      clear: both;
    }

    .right,
    .left,
    .center {
      float: left;
      min-height: 130px;
    }

    .center .center-inner {
      margin: 0 220px 0 200px;
      /*通过给中间内层的容器添加margin，解决中间部分内容被覆盖*/
      min-height: 130px;
    }

    .center {
      width: 100%;
      background: plum;
    }

    .left {
      margin-left: -100%;
      width: 200px;
      background: palevioletred;
    }

    .right {
      margin-left: -220px;
      width: 220px;
      background: grey;
    }

DOM部分
<body>
  <div class="header">头部</div>

  <div class="main">

    <div class="center">
      <div class="center-inner">中间中间中间</div>
    </div>

    <div class="left">左边</div>
    <div class="right">右边</div>
  </div>
  
  <div class="footer">底部</div>
</body>

2.2 详细过程解析

操作步骤：

html代码中，center要放最前边，再放 left 、right；
将center、left 、right 都float:left；
将center占满 width:100%（中间区域的外层）；
此时center占满了，所以要把left拉到最左边，使用margin-left:-100% 同理 right使用margin-left:-220px；（步骤1-4和圣杯布局一致）；
middle内容被覆盖了吧，除了使用外围的padding（圣杯布局的方法），还可以考虑使用margin（双飞翼布局的方法），给中间区域的增加一个内层盒子center-inner, 然后为center-inner添加 margin:0 220px 0 200px；

不同之处：

1）添加margin，解决中间内容被覆盖问题

2）仅只用margin把左右区域拉回到相应位置，不需要使用相对定位

3）当中间部分的宽小于左侧部分时，不会发生布局混乱

三、圣杯布局和双飞翼布局的区别

圣杯布局：左右区域占据的是其父元素的padding值部分；双飞翼布局：左右区域占据的是中间部分center-inner的margin部分；
圣杯布局需要浮动与相对定位（为左右区域添加left、right），而 双飞翼只需要浮动；
圣杯局部：中间区域宽度小于左侧区域宽度时，会造成布局混乱（缺点）；
双飞翼布局：多加了一层dom节点（缺点）；
双飞翼布局：支持各种宽高变化，通用性强（优点）；
圣杯布局：结构简单，无需多余的dom节点（优点）；

C.&H.

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
114、美团CSS题---双飞翼布局和圣杯布局

目录一、圣杯布局1.1 代码实现1.2 详细过程解析二、双飞翼布局2.1 代码实现2.2 详细过程解析三、圣杯布局和双飞翼布局的区别不同于之前所看的左右定宽，中间自适应。圣杯与双飞翼是另外两种写法。反正不管是圣杯还是双飞翼，最后结果都是如下图所示。DOM上，中间的放首位，然后是左边，右边。为了优先显示中间主要部分，故先构建中间main部分。一、圣杯布局使用float布局框架，position: relative定位， margin为负值。...
复制链接

扫一扫

专栏目录