圣杯布局和双飞翼布局

圣杯布局 (多用于PC端网页布局)

目的
两侧内容宽度固定,中间宽度自适应,中间内容优先加载出来
实现方法
float+margin
实现思路

将content设置padding:200px(左右盒子的宽度),腾出左右盒子的位置

将左右盒子通过浮动调整到content的左右位置

通过相对定位,使得左右盒子去往预留空间

问题解答

问题一: content为什么设置overflow:hidden?
内部div设置浮动,脱标,导致内容塌陷,给content设置溢出隐藏开启BFC,这样content就有高度了
问题二:左盒子为什么margin-left:-100%,右盒子margin-left:-200px?

因为中间盒子都设置左浮动,middle最先浮动,宽度占满了content盒子,左右盒子只能浮动到下面
我们想要左右盒子到content两侧,100%是父级宽度所用左盒子margin-left:-100%,右盒子只需移动自身宽度

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        min-width: 600px;
      }
      #header,
      #footer {
        height: 50px;
        width: 100%;
        background: grey;
      }
      #middle,
      #left,
      #right {
        float: left;
      }
      #content {
        overflow: hidden;
        padding: 0 200px;
      }
      #left,
      #right {
        width: 200px;
        height: 200px;
        background: pink;
      }
      #middle {
        width: 100%;
        height: 200px;
        background: yellowgreen;
      }
      #left {
        margin-left: -100%;
        position: relative;
        left: -200px;
      }
      #right {
        margin-left: -200px;
        position: relative;
        left: 200px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div id="header">header</div>
      <div id="content">
        <div id="middle">middle</div>
        <div id="left">left</div>
        <div id="right">right</div>
      </div>
      <div id="footer">footer</div>
    </div>
  </body>
</html>

双飞翼布局

目的
两侧内容宽度固定,中间宽度自适应,中间内容优先加载出来
实现方法
float+margin
实现思路

1 将内容盒子单独套一个盒子,将此盒子宽度设置100%,此时content盒子会占满屏幕(middle撑大的)
2 将middle-inner盒子设置左右margin,预留两侧盒子的位置,不设置,浮动后会盖住middle-inner内容
2 同上,将三个盒子浮动,各自到对应位置,不用在通过定位给盒子移位置了

实现代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .wrap {
        min-width: 600px;
      }
      #header,
      #footer {
        height: 50px;
        width: 100%;
        background: grey;
      }
      #left,
      #right {
        width: 200px;
        height: 200px;
        background: green;
      }

      #middle {
        background: pink;
        width: 100%;
        float: left;
        height: 200px;
      }
      #content {
        overflow: hidden;
      }
      #left {
        float: left;
        margin-left: -100%;
      }
      #right {
        float: left;
        margin-left: -200px;
      }
      .middle-inner {
        margin: 0 200px;
      }
    </style>
  </head>
  <body>
    <div class="wrap">
      <div id="header">header</div>
      <div id="content">
        <div id="middle">
          <div class="middle-inner">middle</div>
        </div>
        <div id="left">left</div>
        <div id="right">right</div>
      </div>
      <div id="footer">footer</div>
    </div>
  </body>
</html>

总结

圣杯和双飞翼的精髓是一样的,主要都是通过设置负的margin实现布局的
不同的是圣杯布局是通过content这个包裹的容器设置pedding预留左右盒子的位置
而双飞翼是通过在给内容区域包裹盒子,设置盒子的margin值来预留左右盒子的位置

经典圣杯布局和双飞翼布局

圣杯布局和双飞翼布局

圣杯布局 (多用于PC端网页布局)

双飞翼布局

总结