圣杯布局

两侧宽度固定，中间宽度自适应的三栏布局

• 两侧宽度固定，中间宽度自适应
• 中间一栏需要先渲染，所以dom结构上优先
• 一个额外的div标签

圣杯布局的dom结构

<div id="header">HEADER</div>
<div id="container">
  <div id="center" class="column">center</div>
  <div id="left" class="column">left100</div>
  <div id="right" class="column">right150</div>
</div>
<div id="footer">FOOTER</div>

初始的css，给每个块设置颜色区分，左边栏设置宽度为100px，右边栏宽度为150px。

div{
  text-align:center;
}
#header{
  width: 100%;
  background-color: #c9c9c9;
}
#footer{
  width: 100%;
  background-color: #c9c9c9;
  clear:both;
}
#center{
  width:100%; 
  background-color: pink;
}
#left{
  width: 100px;
  background-color: green;
}
#right{
  width: 150px;
  background-color: red;
}
.column{
  float:left;
}

根据左右栏设置的宽度，给容器container设置内边距，因为center栏width：100%，参考的是父容器的宽度。中间栏的宽度随着父容器设置内边距而缩小，效果如下图。

#container{
  padding-left:100px;
  padding-right:150px;
}

么接下来就是将左右栏放到center两边，三栏都浮动，使用外边距负值来移动。

因为浮动，上一行空间不够，left和right被挤下来了。

个人是这样理解：

1.首先 ****浮动原理:****将盒子移到一边，直到碰到左边缘或者右边缘碰到包含块或者另一个浮动框的边缘。

2.所以left实际是紧贴center的最右边。

给左栏设置margin-left: -100%; 这里的100%是参照父元素宽度，也就是center的宽度，所以现在左栏跑到center最左边，如下图

#left{
  width: 100px;
  background-color: green;
  margin-left: -100%;
}

现在左边栏离左边还有100px的距离（container的内边距所致），这里设置定位+偏移即可。

#left{
  position: relative;
  right:100px;
  width: 100px;
  background-color: green;
  margin-left: -100%;
}

最后剩下右边栏，此时右边栏是紧贴center这个浮动边框的边缘，这里右边栏有两种方法。

1.可以设置margin-left负值 + 定位 （与上面左栏同理可以实现）。

2.也可以直接设置margin-right 。

这里实现第二种方法

#right{
  width: 150px;
  background-color: red;
  margin-right:-150px;
}

为什么margin-right:-150px可以呢？

个人理解是：原本右边栏就是因为上一行宽度不够，被挤下来了，所以使用margin-right:-150px，右边栏此时宽度可以理解为被压缩为0.

所以就能和center在同一行，刚好之前设置padding预留了距离，就实现了效果。

最终效果：

最后附上完整的css

body {
    min-width: 350px;
  /*最后保证布局正常，给body设置最小宽度 */
}
div{
  text-align:center;
}
#header{
  width: 100%;
  background-color: #c9c9c9;
}
#footer{
  width: 100%;
  background-color: #c9c9c9;
  clear:both;
}
#container{
  padding-left:100px;
  padding-right:150px;
}
#center{
  width:100%; 
  background-color: pink;
}
#left{
  position: relative;
  right:100px;
  width: 100px;
  background-color: green;
  margin-left: -100%;
}
#right{
/*   position: relative;
  left:150px; */
  width: 150px;
  background-color: red;
/*   margin-left: -150px; */
  margin-right:-150px;
}
.column{
  float:left;
}

双飞翼布局

双飞翼布局和圣杯布局结构略有差异，如下

 <div id="header">header</div>
  <div id="container" class="column">
    <div id="center">center</div>
  </div>
  <div id="left" class="column">left100 </div>
  <div id="right" class="column">column150</div>
  <div id="footer">footer</div>

完整css如下所示，思路其实和圣杯布局差不多。不同的是将center单独用container包裹。并对container设置浮动而不是center。

1、center继承container的宽度，然后center设置外边距，留出左右两栏的空间。

2、左栏紧贴container浮动盒子的最右侧，因为空间不够被挤下来，所以设置margin-left:-100%; 即可

3、至此右边栏紧贴container浮动盒子的最右侧，只需要移动右栏自身即可，所以margin-left:-150px;

#container {
  width: 100%;
}

.column {
  float: left;
}

#center {
  margin-left: 100px;
  margin-right: 150px;
  background-color: pink;
}

#left {
  width: 100px; 
  background-color: green;
  margin-left:-100%;
}

#right {
  width: 150px; 
  background-color: red;
  margin-left:-150px;
}

#footer {
  clear: both;
  background-color: #c9c9c9;
}
#header{
  background-color: #c9c9c9;
}

总结：

两种布局都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。

• 两侧宽度固定，中间宽度自适应
• 中间部分在DOM结构上优先，以便先行渲染
• 允许三列中的任意一列成为最高列
• 实现中间自适应都参考到父盒子的width，使用到float+margin来实现

优缺点

但是都不可避免的新增一个

圣杯布局还是用了定位+位移，代码较复杂。但是dom结构清晰

双飞翼布局，不需要使用定位，换来dom结构的不友好。

其他实现方式：

1、clac（）calc()支持到IE9

在双飞翼布局的思路，去掉多余的div，直接设置center浮动

<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

#center {
  margin-left: 100px;
  margin-right: 150px;
  width: calc(100% - 250px);
}

2、flex

flex的dom结构和圣杯布局一样

<div id="container1">
  <div id="center1">center</div>
  <div id="left1">left100</div>
  <div id="right1">right150</div>
</div>

主要使用order：-1，实现左栏靠左。

#container1{
  display:flex;
}
#center1{
    flex:1;
   background-color: pink;
}
#left1{
  flex:0 0 100px;
  background-color: green;
  order:-1;
}
#right1{
  flex:0 0 150px;
   background-color: red;
}

相关文章：https://www.jianshu.com/p/81ef7e7094e8

        说到圣杯布局和双飞翼布局，始终都是面试的高频考点，问题方式也大同小异，比如，实现一个左右固定，中间自适应的布局；实现一个中间部分优先加载的布局……

        现如今，很多web端的应用，他们的布局方式都是圣杯布局和双飞翼布局，既然用到的这么多，那么，双飞翼布局是如何实现的呢？带着这个问题，咱们一起把他说道说道

双飞翼布局的实现方式一、（position+margin+float）

        首先我们从上面简介部分得知，双飞翼布局是一个两边固定，中间自适应的布局，并且中间部分还可以优先加载，那么从此条消息中，我们可以构想出一个HTML结构，结构如下

<body>
    <div class="box">
      <div class="header">header</div>
      <div class="main">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
      </div>
      <div class="footer">footer</div>
    </div>
  </body>

下面我们来一步步实现css部分

        1. 首先我们把基础的东西写好 ，在这里为了样式的好看，将box容器的宽度调整到了80%，并用margin-left给他实现了居中（其中实现居中的方式有很多很多很多种，对居中不太熟悉的同学可以自行百度下）

.box {
  width: 80%;
  margin-left: 10%;
}
.header {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aqua;
  font-weight: 600;
}
.footer {
  clear: both;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aquamarine;
  font-weight: 600;
}

.main {
  height: 150px;
}

.center {
  width: 100%;
  height: 150px;
  background-color: red;
}

.left {
  width: 150px;
  height: 150px;
  background-color: royalblue;
}
.right {
  width: 150px;
  height: 150px;
  background-color: sandybrown;
}

效果图：

注意：center的宽度一定要设置为100%

 2. 让center，left，right都设置为左浮动。这时因为center设置了宽度100%，所以left和right被“挤”到了下面

.box {
  width: 80%;
  margin-left: 10%;
}
.header {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aqua;
  font-weight: 600;
}
.footer {
  clear: both;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aquamarine;
  font-weight: 600;
}

.main {
  height: 150px;
}

.center {
  float: left;
  width: 100%;
  height: 150px;
  background-color: red;
}

.left {
  float: left;
  width: 150px;
  height: 150px;
  background-color: royalblue;
}
.right {
  float: left;
  width: 150px;
  height: 150px;
  background-color: sandybrown;
}

效果图：

3. 现在我们项让left和right变到上面去，即跟center在同一行，但是呢，center的宽度为100% ，没有left和right的空间了，怎么办呢？我们可以先通过给main加padding，把left和right的空间预留出来，这里有一个需要注意的点。如果一个元素，同时设置了width和padding的话，盒子的总宽度会增加，什么意思呢，看下面这张图

代码：

.main {
  height: 150px;
  width: 100%;
  padding: 0 150px;
}
/* 这里相对于上面的代码，我只对main进行了更改 */

效果图：

 但是呢，如果只存在padding，没有width的话，效果图是这样的

对于padding和width的关系。不懂的同学可以自行百度查一下（博主有点懒。。。。），到这里，是不是发现，我们已经预留出来了right和left的位置！！

4. 我们将left和right移动到我们预留出来的位置，这里用到了-margin

.box {
  width: 80%;
  margin-left: 10%;
}
.header {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aqua;
  font-weight: 600;
}
.footer {
  clear: both;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aquamarine;
  font-weight: 600;
}

.main {
  height: 150px;
  padding: 0 150px;
}

.center {
  float: left;
  width: 100%;
  height: 150px;
  background-color: red;
}

.left {
  float: left;
  margin-left: -100%;
  width: 150px;
  height: 150px;
  background-color: royalblue;
}
  float: left;
  margin-left: -150px;
  width: 150px;
  height: 150px;
  background-color: sandybrown;
}

效果图：

这里，同学有没有发现一个问题，left和right把center的左右两端挡住了（center这个文案不见了），思考下怎么解决，答案马上揭晓

 是的！！！就是position属性，给他加定位！！！分别向左向右移动自身大小！！！

 最终代码如下

.box {
  width: 80%;
  margin-left: 10%;
}
.header {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aqua;
  font-weight: 600;
}
.footer {
  clear: both;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aquamarine;
  font-weight: 600;
}

.main {
  height: 150px;
  padding: 0 150px;
}

.center {
  float: left;
  width: 100%;
  height: 150px;
  background-color: red;
}

.left {
  position: relative;
  left: -150px;
  float: left;
  margin-left: -100%;
  width: 150px;
  height: 150px;
  background-color: royalblue;
}
.right {
  position: relative;
  left: 150px;
  float: left;
  margin-left: -150px;
  width: 150px;
  height: 150px;
  background-color: sandybrown;
}

效果图：

到这里，一个两边固定，中间自适应，并且中间优先加载的双飞翼布局就完成了！！！！！！

双飞翼布局的实现方式二、（flex）

        其实，flex布局很简单，因为flex本身的定义就是弹性盒，他有一个属性flex：1，就是专门解决自适应问题的，如果对flex不熟悉的同学可以戳   flex：1是什么？_CSDN_156的博客-CSDN博客   这篇文章（别问为什么这里有链接，问就是博主给自己做宣传哈哈哈哈哈哈~），废话不多说，代码如下

.box {
  width: 80%;
  margin-left: 10%;
}
.header {
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aqua;
  font-weight: 600;
}
.footer {
  clear: both;
  width: 100%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: aquamarine;
  font-weight: 600;
}

.main {
  height: 150px;
  display: flex;
}

.center {
  flex: 1;
  display: flex;
  background-color: red;
}

.left {
  /* order order默认为0,不起作用,从小到大排序，1在前，以此类推 */
  order: -1;
  flex-basis: 150px;
  background-color: royalblue;
}

.right {
  flex-basis: 150px;
  background-color: rgb(195, 196, 195);
}

效果图：

最后！有哪位好心的同学能教教我CSDN怎么放GIF的动图呢，可以私信教教我！！感激不尽

the last， 创作不易，如果这篇文章对您有些许帮助，请留下您的赞~感激不尽！！！

深夜创作，临表涕零，不知所言~~ 

圣杯布局与双飞翼布局

• 圣杯布局和双飞翼布局都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。(中间先加载渲染)

圣杯布局-Example

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="origin" />
    <meta property="og:description" content="圣杯布局" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>圣杯布局</title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        padding: 0;
        margin: 0;
    }

    body {
        min-width: 550px;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .header,
    .footer {
        background: gray;
        width: 100%;
    }

    .footer {
        clear: both;
    }

    .main {
        height: 200px;
        padding: 0 150px 0 200px;
        background: greenyellow;
        *zoom: 1;
    }

    .left,
    .center,
    .right {
        float: left;
    }

    .center {
        width: 100%;
        height: 200px;
        background: red;
    }

    .left {
        width: 200px;
        height: 200px;
        background: yellow;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .right {
        width: 150px;
        height: 200px;
        background: gainsboro;
        margin-left: -150px;
        position: relative;
        left: 150px;
        }
</style>

<body>
    <div class="header">
        头部
    </div>
    <div class="main">
        <div class="center">中间中间中间中间中间中间中间后</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">
        底部
    </div>
</body>

</html>

双飞翼布局-Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="origin" />
    <meta property="og:description" content="双飞翼布局" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>双飞翼布局</title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .main>div {
        float: left;
    }

    .left {
        width: 200px;
        background: red;
        margin-left: -100%;
    }

    .right {
        width: 200px;
        background: blue;
        margin-left: -200px;
    }

    .middle {
        width: 100%;
        background: yellow;

    }

    .content {
        margin-left: 200px;
        margin-right: 200px;
    }
</style>
<body>
    <div class="main">
        <div class="middle">
            <div class="content">
                中间
            </div>
        </div>
        <div class="left">
            左边
        </div>
        <div class="right">
            右边
        </div>
    </div>
</body>
</html>

优点

• 1. 兼容性好，兼容若有主流浏览器，包括万恶的IE6
• 2. 可以实现主要内容的优先加载

额外知识点

• 其实三列布局的方式还有很多 ，但也有各自的缺点
• 1.如果左右两列用position: absolute定位布局做外层设计需要有个包含块设置（否则是相对浏览器可视区域）这样会层级，页面控制相对麻烦
• 2.用浮动布局的话， 中间层要做到先加载实现不了
• 3.flex布局低版本浏览器有些还不支持

Thinking in JackDan