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

最新推荐文章于 2024-04-16 19:34:40 发布

webchang

最新推荐文章于 2024-04-16 19:34:40 发布

阅读量6.3k

点赞数 12

分类专栏： css 文章标签： css 圣杯布局双飞翼布局定位布局

本文链接：https://blog.csdn.net/weixin_43974265/article/details/115427185

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

相同点和不同点

两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。

主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样。圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼布局则是在中间这个div的外层又套了一个div来放置内容，在给这个中间的div设置margin-left和margin-right 。

两种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
两种布局方式的不同之处在于如何处理中间主列的位置：
- 圣杯布局是利用父容器的左、右内边距+两个列的相对定位;
- 双飞翼布局是把主列嵌套在一个新的父级块中并利用主列的左、右外边距进行布局调整。

效果图：
在这里插入图片描述

圣杯布局代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>11.圣杯布局</title>
  <style>

    * {
      margin: 0;
      padding: 0;
    }

    .header {
      background-color: cyan;
      height: 10vh;
      text-align: center;
    }

    .container {
      background-color: gray;
      overflow: hidden;
      padding: 0 200px 0 300px;
    }

    .container div {
      float: left;
      height: 80vh;
    }

    .middle {
      width: 100%;
      background-color: red;
      text-align: center;
    }

    .left {
      width: 300px;
      background-color: #ff4d4f;
      margin-left: -100%;
      position: relative;
      left: -300px;
    }

    .right {
      width: 200px;
      background-color: #2e6da4;
      margin-left: -200px;
      position: relative;
      right: -200px;
    }

    .footer {
      background-color: green;
      height: 10vh;
      text-align: center;
    }
  </style>
</head>
<body>

<div class="header">header</div>
<div class="container">
  <div class="middle">middle</div>
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="footer">footer</div>

</body>
</html>

双飞翼布局代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>10.双飞翼布局</title>
  <style>

    * {
      margin: 0;
      padding: 0;
    }

    .header {
      background-color: cyan;
      height: 10vh;
      text-align: center;
    }

    .container {
      background-color: gray;
      overflow: hidden;
    }

    .container .column {
      float: left;
      height: 80vh;
    }

    .center {
      width: 100%;
      background-color: red;
      text-align: center;
    }

    .left {
      width: 300px;
      background-color: #ff4d4f;
      margin-left: -100%;
    }

    .right {
      width: 200px;
      background-color: #2e6da4;
      margin-left: -200px;
    }

    .content {
      margin-left: 300px;
      margin-right: 200px;
    }

    .footer {
      background-color: green;
      height: 10vh;
      text-align: center;
    }
  </style>
</head>
<body>

<div class="header">header</div>
<div class="container">
  <div class="center column">
    <div class="content">middle</div>
  </div>
  <div class="left column">left</div>
  <div class="right column">right</div>
</div>
<div class="footer">footer</div>

</body>
</html>