Skip to content

[css] 第1天 圣杯布局和双飞翼布局的理解和区别，并用代码实现 #2

New issue
New issue
Open
Open
[css] 第1天 圣杯布局和双飞翼布局的理解和区别，并用代码实现#2
Labels
csscss
@haizhilin2013

Description

@haizhilin2013
haizhilin2013
opened on Apr 17, 2019

[css] 第1天 圣杯布局和双飞翼布局的理解和区别，并用代码实现

Activity

undefinedYu

undefinedYu commented on Apr 17, 2019

@undefinedYu
undefinedYu
on Apr 17, 2019
Contributor

一：
section{height: 100%; overflow: hidden;clear:both; }
.left{ height: 100%;float:left;width:30%;background: #f00; }
.right{ height: 100%;float:right;width:30%; background: #0f0; }
.center{ height: 100%;background: #00f;}







二：
section{ height: 100%;display: flex;justify-content: center;align-items: center;}
.left{ height: 100%;flex-basis: 30%;background: #f00; }
.right{ height: 100%;flex-basis: 30%;background: #0f0; }
.center{ height: 100%;background: #00f; }







三：
section{ height: 100%;position: relative;}
.left{ height: 100%;width: 30%;background: #f00;position: absolute;left:0;top:0; }
.right{ height: 100%;width: 30%;background: #0f0;position: absolute;right:0;top:0; }
.center{ height: 100%;background: #00f;margin:0 30%; }







yxkhaha

yxkhaha commented on Apr 17, 2019

@yxkhaha
yxkhaha
on Apr 17, 2019

圣杯布局：
DOM:

header
left
圣杯布局
right
footer

CSS:

<style> *{ margin: 0; padding: 0; } body{ color: #fff; } #header{ width: 100%; height: 100px; text-align: center; line-height: 100px; background: #333; } #footer{ width: 100%; height: 100px; text-align: center; line-height: 100px; background: #333; } #content{ display: flex; flex-direction: row; } #content .left{ width: 180px; height: 200px; background: green; text-align: center; line-height: 200px; } #content .middle{ width: 100%; height: 200px; background: skyblue; color: red; } #content .right{ width: 180px; height: 200px; background: green; text-align: center; line-height: 200px; } </style>
haizhilin2013

haizhilin2013 commented on Apr 17, 2019

@haizhilin2013
haizhilin2013
on Apr 17, 2019
CollaboratorAuthor

发现了大家一个问题，就是大家不怎么会用markdown，这周五可以讲讲了

qingleizhang123

qingleizhang123 commented on Apr 17, 2019

@qingleizhang123
qingleizhang123
on Apr 17, 2019

   作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。
  区别：圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

圣杯布局代码：

<body>
<div id="hd">header</div>
<div id="bd">
  <div id="middle">middle</div>
  <div id="left">left</div>
  <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#bd{
    /*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
    padding:0 200px 0 180px;
    height:100px;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
    /*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
    position:relative;
    left:-180px;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
    /*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
    position:relative;
    right:-200px;
}
#footer{
    height:50px;
    background: #666;
    text-align: center;
}
</style>

双飞翼布局代码：

<body>
<div id="hd">header</div> 
  <div id="middle">
    <div id="inside">middle</div>
  </div>
  <div id="left">left</div>
  <div id="right">right</div>
  <div id="footer">footer</div>
</body>

<style>
#hd{
    height:50px;
    background: #666;
    text-align: center;
}
#middle{
    float:left;
    width:100%;/*左栏上去到第一行*/     
    height:100px;
    background:blue;
}
#left{
    float:left;
    width:180px;
    height:100px;
    margin-left:-100%;
    background:#0c9;
}
#right{
    float:left;
    width:200px;
    height:100px;
    margin-left:-200px;
    background:#0c9;
}

/*给内部div添加margin，把内容放到中间栏，其实整个背景还是100%*/ 
#inside{
    margin:0 200px 0 180px;
    height:100px;
}
#footer{  
   clear:both; /*记得清楚浮动*/  
   height:50px;     
   background: #666;    
   text-align: center; 
} 
</style>
haizhilin2013

haizhilin2013 commented on Apr 18, 2019

@haizhilin2013
haizhilin2013
on Apr 18, 2019
CollaboratorAuthor

点评：
知识点：最经典的三栏布局，也称为固比固布局
难点：1颗星
这道题主考查布局的了解，同时也考查margin负值的情况

haizhilin2013
added
csscss
on Apr 18, 2019
hellojackhui

hellojackhui commented on May 6, 2019

@hellojackhui
hellojackhui
on May 6, 2019

https://lhammer.cn/You-need-to-know-css/#/zh-cn/holy-grail-layout?v=1
https://lhammer.cn/You-need-to-know-css/#/zh-cn/double-wing-layout?v=1
这个讲的挺好的

tzjoke

tzjoke commented on May 16, 2019

@tzjoke
tzjoke
on May 16, 2019

两者都是为了不让左右俩不遮住middle，经典圣杯布局通过父亲padding给左右俩腾位置从而不会遮住middle内容，而双飞翼是middle设置margin，限制内部内容区域，从而左右俩遮的地方不会影响到middle内容

对于三栏布局，modern solution是 flex box/ grid 布局，这两者可以轻松实现 mobile-friendly的方案，也可以控制顺序，middle依然可以先渲染，9012年兼容性不错了，如果APP无视IE，这是优选

这一颗星我拿走啦 😜

@haizhilin2013 感谢大佬整理，最近想tc很有用 👍

btw大佬不打算开个answer repo吗？

SSypp

SSypp commented on May 18, 2019

@SSypp
SSypp
on May 18, 2019

理解：简单粗暴点，就是说左右两边的宽度不随着浏览器窗口的变化而变化，是固定的，只有中间的部分才可以随着窗口变化而变化，总结：固比固
有的人根据float来实现类这样的布局，出现的结果是固固固或者比比比，而不是我们所说的固比固，这个需要注意

xiangshuo1992
mentioned this on May 21, 2019
douxiaohou

douxiaohou commented on Jun 4, 2019

@douxiaohou
douxiaohou
on Jun 4, 2019 · edited by douxiaohou

实现的方式比较多吧 浮动、定位都可以实现，定位实现

<style> .wrap{ position: relative; height: 200px; background: #CCCCCC; width: 100%; } .left, .right{ width: 200px; height: 200px; background: red; position: absolute; left: 0; top: 0; } .right{ right: 0; } .center{ height: 200px; background: black; margin: 0 200px; } </style>
Splendid-life

Splendid-life commented on Jun 18, 2019

@Splendid-life
Splendid-life
on Jun 18, 2019

flex大法

zoneasa

zoneasa commented on Jul 4, 2019

@zoneasa
zoneasa
on Jul 4, 2019

1.都是解决两边定宽，中间自适应的三栏布局解决方案，中间栏放在文档流前面 让浏览器自上而下优先渲染。
2.三栏都设置成左浮动，中间栏100%宽度，左右栏设置具体宽度
3.圣杯布局 中间栏左右设置padding，左栏margin-left -100%，然后position：relative;�left:-leftWidth;右栏margin-left:-rightWidth；
双飞翼布局 中间栏加一个inside容器，内部容器margin-left，margin-right让中间栏内容不被挡住，也给左右栏让出位置。左侧栏只需设置margin-left:-100%，右侧栏margin-left:-rightWidth

shufangyi

shufangyi commented on Jul 5, 2019

@shufangyi
shufangyi
on Jul 5, 2019

[css] 第1天 圣杯布局和双飞翼布局的理解和区别，并用代码实现

两者解决类似的问题。主要解决左右定宽，中间自适应的三栏布局。并且中间栏优先渲染。

圣杯布局

三栏利用 float 和 负margin 并列
利用父容器设置 padding 给两边侧栏腾空间

    <div class="wrapper1">
      <div class="main">
        <p>bilibili</p>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  * {
    padding: 0;
    margin: 0;
  }
  .wrapper1 {
    padding: 0 60px 0 30px;
  }
  .wrapper1 .main {
    float: left;
    width: 100%;
    height: 300px;
    background: red;
  }
  .wrapper1 .left {
    float: left;
    width: 30px;
    margin-left: -100%;
    background: blue;
    height: 100px;
    position: relative;
    right: 30px;
  }
  .wrapper1 .right {
    float: left;
    width: 60px;
    margin-left: -60px;
    background: yellow;
    height: 200px;
    position: relative;
    left: 60px;
  }

双飞翼布局

三栏利用 float 和 负margin 并列
在中间栏加一层容器，利用 margain 给两栏腾空间

    <div class="wrapper2">
      <div class="container">
        <div class="main">
          <p>bilibili</p>
        </div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  * {
    padding: 0;
    margin: 0;
  }
  .wrapper2 {
    min-width: 630px;
  }
  .wrapper2 .container {
    float: left;
    width: 100%;
  }
  .wrapper2 .container .main {
    height: 300px;
    background: red;
    margin: 0 600px 0 30px;
  }
  .wrapper2 .left {
    float: left;
    width: 30px;
    background: blue;
    height: 100px;
    margin-left: -100%;
  }
  .wrapper2 .right {
    float: left;
    width: 600px;
    background: yellow;
    height: 200px;
    margin-left: -600px;
  }

PS：现在用 flex 的了

seho-dev

seho-dev commented on Jul 10, 2019

@seho-dev
seho-dev
on Jul 10, 2019

简要描述圣杯布局和双飞翼布局的区别和你自己的理解；并实现它们圣杯布局和双飞翼布局都是经典的三栏布局，它们都是解决了，左右两列等宽，中间自适应的布局方式；中间的往往是最优先加载的，所以要把dom放在left和right前面；区别：为了不会造成中间的div的文字被旁边遮挡，圣杯布局采用的是父级div给padding-left和right限制，让字不会被左边和右边挡住；双飞翼布局是采用给中间的div添加一个小div，这个小div使用内边距；圣杯布局优缺点：优点：不需要添加dom节点缺点：圣杯布局的缺点：正常情况下是没有问题的，但是特殊情况下就会暴露此方案的弊端，如果将浏览器无线放大时，「圣杯」将会「破碎」掉。如图，当main部分的宽小于left部分时就会发生布局混乱。（main<left即会变形）双飞翼布局优缺点：目的：为了优先显示中间主要部分，浏览器渲染引擎在构建和渲染渲染树是异步的（谁先构建好谁先显示），故在编写时，先构建中间main部分，但由于布局原因，将left置于center左边，故而出现了双飞翼布局。优点：不会像圣杯布局那样变形缺点是：多加了一层dom节点采用的方法有很多，这边只列举，浮动和margin，只允许我写思路，具体自己实现；.box>div {float: left;}.box {background: yellow;/* 圣杯布局 // padding-left: 200px; // padding-right: 200px; */}.middle {background: red;margin-left: 200px;margin-right: -200px;width: 70%;height: 100px;}.left {background: pink;width: 200px;height: 100px;margin-left: -70%}.right {background: blue;width: 200px;height: 100px;margin-right: -200px}
双飞翼布局

inside{
margin:0 200px 0 180px;
height:100px;
}

49 remaining items

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    csscss

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @RaoHai@haizhilin2013@zoneasa@Toeat@liu12fei08fei

        Issue actions
          [css] 第1天 圣杯布局和双飞翼布局的理解和区别，并用代码实现 · Issue #2 · haizlin/fe-interview