圣杯布局与双飞翼布局

最新推荐文章于 2022-07-30 21:56:49 发布

是菁菁哦

最新推荐文章于 2022-07-30 21:56:49 发布

阅读量134

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/jingjingxuaokeai/article/details/124429409

版权

圣杯布局

1.什么是圣杯布局

圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性

2.代码

<!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>

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

双飞翼布局

1.什么是双飞翼布局

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章《In Search of the Holy Grail》，在国内最早是淘宝UED的工程师（玉伯大大）对圣杯布局改进并传播开来，在中国的叫法是双飞翼布局。

2.代码

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<style>
  body {
    min-width: 550px;
    font-weight: bold;
    font-size: 20px;
  }
  #header,
  #footer {
    background: rgba(29, 27, 27, 0.726);
    text-align: center;
    height: 60px;
    line-height: 60px;
  }
  #container {
    overflow: hidden;
  }
  .column {
    text-align: center;
    height: 300px;
    line-height: 300px;
  }
  #left, #right, #center {
    float: left;
  }
  #center {
    width: 100%;
    background: rgb(206, 201, 201);
  }
  #left {
    width: 200px;
    margin-left: -100%;
    background: rgba(95, 179, 235, 0.972);
  }
  #right {
    width: 150px;
    margin-left: -150px;
    background: rgb(231, 105, 2);
  }
  .content {
    margin: 0 150px 0 200px;
  }
</style>
 
<body>
  <div id="header">#header</div>
 
  <div id="container">
    <div id="center" class="column">
      <div class="content">#center</div>
    </div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
  </div>
 
  <div id="footer">#footer</div>
</body>
 
</html>

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

二者相同点与不同点

1.相同点

两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，并且中间部分在HTML代码中要写在前边，这样它就会被优先加载渲染。两种布局方式都是把主列放在文档流最前面，使主列优先加载。
两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。

2.不同点

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

是菁菁哦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局与双飞翼布局

圣杯布局1.什么是圣杯布局圣杯布局是指两边盒子宽度固定，中间盒子自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染；三栏全部使用“float:left”浮动，并配合left和right属性2.代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>11.圣杯布局</title> <style> * {
复制链接

扫一扫