圣杯布局、双飞翼布局，致敬经典

时间：2020-09-17 17:10:26 阅读：26 评论：0 收藏：0 [点我收藏+]

标签：方式自适应 ddl round 出现容器 auto main span

在 flex 和 grid 布局出现的今天，我依然听到有人面试了，圣杯布局、双飞翼布局。

虽然网上一搜一大把，但不自己写一篇，总觉得是自我学习过程中的一种遗憾，一起致敬经典

圣杯布局和双飞翼布局

在如今的网页中我们经常可以看到左、中、右三列，其中左右两列宽度固定，中间宽度自适应的布局方式，并且让中间列优先渲染（html 中间栏放到文档流前面）。

如下图。圣杯布局和双飞翼布局就是这种三列布局的两种实现方式。

技术图片

圣杯布局和双飞翼布局的实现都利用了以下两个技术：

1、float：浮动，利用浮动可以使元素脱离文档流，从而让块级元素在同一行排列。

2、负margin：在left 和 top方向上的负margin值可以将元素自身向相应方向位移。

圣杯布局

html

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

css

.main{
  height: 100px;
  width: 100%;
  padding: 0 200px;
  &>div{
    float: left;
    text-align: left;
    font-size: 20px;
  }
}
.center{
  height: 100px;
  width: 100%;
  background-color: palevioletred;
}
.left{
  height: 100px;
  background-color: palegreen;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
}
.right{
  height: 100px;
  background-color: khaki;
  width: 200px;
  margin-left: -200px;
  position: relative;
  left: 200px;
}

双飞翼布局

html

<main class="main">
  <div class="center">
    <div class="center_content">
      center
    </div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</main>

css

.main{
  height: 100px;
  width: 100%;
  &>div{
    float: left;
    text-align: left;
    font-size: 20px;
  }
}
.center{
  width: 100%;
  .center_content{
    height: 100px;
    margin: 0 200px;
    background-color: palevioletred;
    overflow:auto;
  }
}
.left{
  height: 100px;
  background-color: palegreen;
  width: 200px;
  margin-left: -100%;
}
.right{
  height: 100px;
  background-color: khaki;
  width: 200px;
  margin-left: -200px;
}

区别

这两种布局在实现的效果上一样，其实它们的区别在于，使 center 部分的内容不被 left 和 right 部分给遮挡的处理方式。

1、圣杯布局是在父容器 main 上加在左右 padding（左右部分的宽度 px），再利用定位调整 left 和 right 的位置。

2、双飞翼布局是通过在 center 部分种添加一个 center 子块（center-content）让它的左右 margin 等于左右部分的宽度。

最后

在 flex 和 grid 布局出现的今天实现类似的三列布局已经非常简单，但是如果考虑到兼容性问题的话，基于浮动的这两种布局方式还是需要了解的。

对比一下 flex 相同效果布局

代码量明显少了

html

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

css

.main{
  height: 100px;
  width: 100%;
  display: flex;
  text-align: left;
  font-size: 20px;
}
.center{
  height: 100px;
  flex: 1; /*简写，1,1，auto的意思*/
  background-color: palevioletred;
}
.left{
  height: 100px;
  background-color: palegreen;
  width: 200px;
  order: -1; /*设置left的位置在middle之前*/
}
.right{
  height: 100px;
  background-color: khaki;
  width: 200px;
}

圣杯布局、双飞翼布局，致敬经典

标签：方式自适应 ddl round 出现容器 auto main span

原文地址：https://www.cnblogs.com/MrZhujl/p/13626105.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行