页面基础布局相关知识 --- 居中&经典布局

红壶吃猬队

2019-11-04

关注关注

前言

PS: 这些只是个人学习,仅供思路参考,可能会有缺陷,并且都在chrome中测试,不一定适用其他浏览器,而且不考虑IE的,切记!!

PS: 2018/03/23修改，重整了一下样式，新增了一些方法原理介绍，

建议先了解一下基础知识,实际上算深入基础了，随意门:
想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC
想要清晰的明白（二）CSS 盒模型Block box与Line box

基础配置如下,只是一个基本的父子嵌套元素

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childB {
        width: 50px;
        height: 50px;
      }

      #childA,
      #childB {
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

水平居中的各种方法优劣.

margin

因为B是块状，所以看不出效果，但是如果不设置宽度其实就默认占满全屏
这是最基础最简单的写法

#child {margin: 0 auto;}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        margin: 0 auto;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

缺點:

1) 需要设置宽度(包括百分比等非固定宽度也可以)

绝对定位

原理：父元素设置相对定位，子元素设置绝对定位，偏移一侧父元素宽度50%，子元素外边距反向负值调整自身宽度50%。重点是从中可以看出这个需要知道子元素的宽度；

#parent{position: relative;}
#child {position: absolute; left: 50%; margin-left: -50px;}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        position: absolute;
        left: 50%;
        margin-left: -50px;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

缺點:

1) 需要设置子元素宽度(包括百分比等非固定宽度也可以)

原理：跟上面原理一样，但是使用了css3的transform属性可以自动计算子元素宽度调整

#parent{position: relative;}
#child {position: absolute; left: 50%; transform: translate(-50%);}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

优点:

1) 不需要知道子元素具体宽度;

缺點:

1) transform,兼容性一般,IE9+;
页面基础布局相关知识 --- 居中&经典布局

原理：设置方向值,同时给元素一个对应的高宽,它会自动补全margin，就能保持居中了。具体原理参见上面文章。

#parent{position: relative;}
#child {position: absolute; right: 0; left:0; margin: auto;}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        position: absolute;
        right: 0;
        left: 0;
        margin: auto;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

缺點:

1) 需要设置子元素宽度(包括百分比等非固定宽度也可以)

flex

原理：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
随意门:
Flex 布局教程：语法篇
 Flex 布局教程：实例篇

#parent {
    display: flex;//fles布局
    justify-content: center;//主轴上的对齐方式（即水平定位）
    align-items: flex-start;//交叉轴的起点对齐（即垂直定位）,默认stretch，如果项目未设置高度或设为auto会导致子元素高度占满父元素
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        background-color: green;
      }

      #parentA,
      #parentB {
        display: flex;
        justify-content: center;
        align-items: flex-start;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

真是前端救星,有了这个可以无视以前各种诡异属性实现的居中

优点:

1) 布局灵活全面

缺點:

1) align-items默认stretch，如果项目未设置高度或设为auto会导致子元素高度占满父元素
2) 兼容性一般

inline-block+text-align

原理：子元素设置成行内块状元素，父元素设置文本居中对齐也能使其生效

#parent{text-align: center;}
#child {display: inline-block;}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        width: 200px;
        height: 200px;
        text-align: center;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        display: inline-block;
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

优点:

1) 不需要设置子元素具体宽度;
2) 兼容性好，甚至可以兼容ie6、ie7;

缺點:

1) 因为text-align是继承样式，会导致下级所有元素文字生效

垂直居中的各种方法优劣.

table-cell+vertical-align

原理：table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。然后让子元素居中

CSS2.1表格模型中的元素，可能不会全部包含在除HTML之外的文档语言中。这时，那些“丢失”的元素会被模拟出来，从而使得表格模型能够正常工作。所有的表格元素将会自动在自身周围生成所需的匿名table对象，使其符合table/inline-table、table-row、table- cell的三层嵌套关系。
特征:
1) 同行等高;
2) 宽度自动调节;

#parent{display:table-cell;vertical-align:middle;}

缺点:

1) display类型有限制,只有一个元素属于inline或是inline-block（table-cell也可以理解为inline-block水平）水平，其身上的vertical-align属性才会起作用。;
2) 父元素不能使用浮动属性;
3) IE8下需要特殊处理;
4) 这是一个很复杂的属性组合,下面文章能看的你怀疑人生;

随意门:
CSS深入研究:display的恐怖故事解密(1) - inline-block
CSS深入研究:display的恐怖故事解密(2) - table-cell
大小不固定的图片、多行文字的水平垂直居中
 我所知道的几种display:table-cell的应用
 我对CSS vertical-align的一些理解与认识（一）
CSS vertical-align的深入理解(二)之text-top篇
 CSS深入理解vertical-align和line-height的基友关系

绝对定位

原优缺点都同上，就不再重复了：

#parent{position: relative;}
#child {position: absolute; top: 50%; margin-top: -100px;}

#parent{position: relative;}
#child {position: absolute; top: 50%; transform: translate(0,-50%);}

#parent{position: relative;}
#child {position: absolute; top: 0; bottom: 0; margin: auto;}

flex

原理：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。上面也提到过它的交叉轴的起点对齐（即垂直定位）align-items；

#parent{display: flex; align-items: center;}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        display: flex;
        align-items: center;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

优点:
1) 布局灵活全面
2) 即使不设置宽度也不会默认占满全行
缺点:
1) 兼容性一般
页面基础布局相关知识 --- 居中&经典布局

水平垂直居中的各种方法.

table-cell+inline-block+vertical-align+text-align

#parent {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
#child {
  display: inline-block;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        display: table-cell;
        width: 200px;
        height: 200px;
        vertical-align: middle;
        text-align: center;
        background-color: red;
      }

      #childA {
        display: inline-block;
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

优缺点都已经总结过了，而且基本颠覆了父子元素表现形式还影响后代元素的样式，唯一的优点只有兼容性好了

absolute+transform

#parent {
  position: relative;
}
#child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

虽然代码量有点多，兼容性有点瑕疵，但还是相当不错的

flex

#parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #parentA,
      #parentB {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 200px;
        height: 200px;
        background-color: red;
      }

      #childA {
        width: 100px;
        height: 100px;
      }

      #childA,
      #childB {
        background-color: green;
      }
    </style>
  </head>

  <body>
    <p>子元素固定高宽A</p>
    <div id="parentA">
      <div id="childA">A</div>
    </div>
    <p>子元素不定高宽B</p>
    <div id="parentB">
      <div id="childB">B</div>
    </div>
  </body>

</html>

完美布局，唯一能限制它的只有浏览器了

实战：

定宽+自适应

1) float浮动属性
原理：通过float浮动属性让元素脱离文档流，后续元素不能定宽，也不能同使用浮动属性，但可以根据需求决定是或否使用overflow防止内容溢出

.left {
  float: left;
}
.right {
  overflow: hidden;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0;}
        .header,
        .footer  {height: 60px;}
        .header{background-color: red;}
        .footer {background-color: yellow;}
        .content {height: 500px; color: #fff; }
        .left,
        .right{height: 100%;}
        .left{width: 100px; float: left; background-color: pink;}
        .right{overflow:hidden;  background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="left"></div>
        <div class="right">Done 当时光已逝 If the day is done , 假如时光已逝， If birds sing no more . 鸟儿不再歌唱， If the wind has fiagged tired , 风儿也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我盖上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黄昏时节你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又轻轻合上睡莲的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污损，人已精疲力竭。 Whose garment is torn and dust-laden , 你驱散了旅客的羞愧和困窘， Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般焕发生机。 The cover of thy kindly night . 在你慈爱的夜幕下苏醒。</div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

2) table属性
原理：通过模拟table表现形式达到效果，根据特性还能省略设置元素高宽就能自行占满

.content {display:table; table-layout:fixed; }
.left,
.right{display:table-cell;}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0;}
        .header,
        .footer  {height: 60px;}
        .header{background-color: red;}
        .footer {background-color: yellow;}
        .content {display:table; table-layout:fixed; height: 500px; color: #fff; }
        .left,
        .right{display:table-cell; height: 100%;}
        .left{width: 100px; background-color: pink;}
        .right{background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="left"></div>
        <div class="right">Done 当时光已逝 If the day is done , 假如时光已逝， If birds sing no more . 鸟儿不再歌唱， If the wind has fiagged tired , 风儿也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我盖上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黄昏时节你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又轻轻合上睡莲的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污损，人已精疲力竭。 Whose garment is torn and dust-laden , 你驱散了旅客的羞愧和困窘， Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般焕发生机。 The cover of thy kindly night . 在你慈爱的夜幕下苏醒。</div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

3) flex布局
原理：Flex 布局，可以简便、完整、响应式地实现各种页面布局。

.content {display:flex;}
.right{flex:1;}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
        * {margin: 0;padding: 0;}
        .header,
        .footer  {height: 60px;}
        .header{background-color: red;}
        .footer {background-color: yellow;}
        .content {display:flex; width:100%; height: 500px; color: #fff; }
        .left,
        .right{height: 100%;}
        .left{width: 100px; background-color: pink;}
        .right{flex:1; background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="left"></div>
        <div class="right">Done 当时光已逝 If the day is done , 假如时光已逝， If birds sing no more . 鸟儿不再歌唱， If the wind has fiagged tired , 风儿也吹倦了， Then draw the veil of darkness thick upon me , 那就用黑暗的厚幕把我盖上， Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed
                , 如同黄昏时节你用睡眠的衾被裹住大地， The petals of the drooping lotus at dusk. 又轻轻合上睡莲的花瓣。 From the traverer, 路途未完，行囊已空, Whose sack of provisions is empty before the voyage is ended , 衣裳破裂污损，人已精疲力竭。 Whose garment is torn and dust-laden , 你驱散了旅客的羞愧和困窘， Whose strength
                is exhausted,remove shame and poverty , 使他在你仁慈的夜幕下， And renew his life like a flower under 如花朵般焕发生机。 The cover of thy kindly night . 在你慈爱的夜幕下苏醒。</div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

圣杯布局&双飞翼布局（两列定宽+一列自适应）

基础结构

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {margin: 0;padding: 0;}
      .header,
      .footer  {height: 60px;}
      .header{background-color: red;}
      .footer {background-color: yellow;}
      .content {height: 500px; color: #fff; background-color: green;}
      .left,
      .right,
      .main{height: 100%; float: left;}
      .left{width: 100px; margin-left: -100%; background-color: pink;}
      .main{width: 100%; background-color: blue;}
      .right{width: 100px; margin-left: -100px; background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="main">
          When Day Is Done
          当时光已逝
          If the day is done ,
          假如时光已逝，
          If birds sing no more .
          鸟儿不再歌唱，
          If the wind has fiagged tired ,
          风儿也吹倦了，
          Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我盖上，
          Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黄昏时节你用睡眠的衾被裹住大地，
          The petals of the drooping lotus at dusk.
          又轻轻合上睡莲的花瓣。
          From the traverer,
          路途未完，行囊已空,
          Whose sack of provisions is empty before the voyage is ended ,
          衣裳破裂污损，人已精疲力竭。
          Whose garment is torn and dust-laden ,
          你驱散了旅客的羞愧和困窘，
          Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，
          And renew his life like a flower under
          如花朵般焕发生机。
          The cover of thy kindly night .
          在你慈爱的夜幕下苏醒。
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

前期主要步骤:
1) content子元素浮动;
2) main宽度满屏放在首位,中间栏要在浏览器中优先展示渲染(这里我没太懂有多大区别???);
3) left和right分别用负边距强行并排;

到目前为止看起来效果已经满足了，实际left和right这种玩法是覆盖在main之上的，导致部分内容被遮盖了；
然后圣杯布局&双飞翼布局的差别就在后续步骤了

圣杯布局：
4) content加上内边距padding；
5) left和right使用相对定位偏移；

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {margin: 0;padding: 0;}
      .header,
      .footer  {height: 60px;}
      .header{background-color: red;}
      .footer {background-color: yellow;}
      .content {height: 500px; padding: 0 100px; color: #fff;  background-color: green;}
      .left,
      .right{position: relative; width: 100px;}
      .left,
      .right,
      .main{height: 100%; float: left;}
      .left{ left: -100px; margin-left: -100%; background-color: pink;}
      .main{width: 100%; background-color: blue;}
      .right{right: -100px; margin-left: -100px; background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="main">
          When Day Is Done
          当时光已逝
          If the day is done ,
          假如时光已逝，
          If birds sing no more .
          鸟儿不再歌唱，
          If the wind has fiagged tired ,
          风儿也吹倦了，
          Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我盖上，
          Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黄昏时节你用睡眠的衾被裹住大地，
          The petals of the drooping lotus at dusk.
          又轻轻合上睡莲的花瓣。
          From the traverer,
          路途未完，行囊已空,
          Whose sack of provisions is empty before the voyage is ended ,
          衣裳破裂污损，人已精疲力竭。
          Whose garment is torn and dust-laden ,
          你驱散了旅客的羞愧和困窘，
          Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，
          And renew his life like a flower under
          如花朵般焕发生机。
          The cover of thy kindly night .
          在你慈爱的夜幕下苏醒。
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

双飞翼布局：
4) main加上嵌套元素inner，并设置内边距；

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {margin: 0;padding: 0;}
      .header,
      .footer  {height: 60px;}
      .header{background-color: red;}
      .footer {background-color: yellow;}
      .content {height: 500px;  color: #fff;  background-color: green;}
      .left,
      .right{position: relative; width: 100px;}
      .left,
      .right,
      .main{height: 100%; float: left;}
      .left{margin-left: -100%; background-color: pink;}
      .main{width: 100%; background-color: blue;}
      .right{margin-left: -100px; background-color: black;}
      .inner{padding: 100px;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="main">
          <div class="inner">
            When Day Is Done
            当时光已逝
            If the day is done ,
            假如时光已逝，
            If birds sing no more .
            鸟儿不再歌唱，
            If the wind has fiagged tired ,
            风儿也吹倦了，
            Then draw the veil of darkness thick upon me ,
            那就用黑暗的厚幕把我盖上，
            Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
            如同黄昏时节你用睡眠的衾被裹住大地，
            The petals of the drooping lotus at dusk.
            又轻轻合上睡莲的花瓣。
            From the traverer,
            路途未完，行囊已空,
            Whose sack of provisions is empty before the voyage is ended ,
            衣裳破裂污损，人已精疲力竭。
            Whose garment is torn and dust-laden ,
            你驱散了旅客的羞愧和困窘，
            Whose strength is exhausted,remove shame and poverty ,
            使他在你仁慈的夜幕下，
            And renew his life like a flower under
            如花朵般焕发生机。
            The cover of thy kindly night .
            在你慈爱的夜幕下苏醒。
        </div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

从中可以看出之间的分歧在于：
圣杯布局：父元素设置内边距，子元素设置相对偏移，影响区域从上至下
双飞翼布局：目标元素嵌套多层元素，该元素内部设置内边距，影响区域仅限该元素

flex写法：
1) contanier设置flex布局，至少高度满屏，方向竖直，可以占据全屏效果;
2) content 设置flex布局，方向水平，放大比例1，可以占满宽度；
3) main放大比例1，可以占据剩余空间；
4) left排列顺序放前；

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      * {margin: 0;padding: 0;}
      .contanier{display: flex; min-height: 100vh; flex-direction: column;}
      .header,
      .footer  {height: 60px;}
      .header{background-color: red;}
      .footer {background-color: yellow;}
      .content {display: flex; flex: 1; color: #fff; background-color: green;}
      .left,
      .right{width: 100px;}
      .main{flex: 1;}
      .left{order: -1; background-color: pink;}
      .main{background-color: blue;}
      .right{background-color: black;}
    </style>
  </head>

  <body>
    <div class="contanier">
      <header class="header"></header>
      <div class="content">
        <div class="main">
          When Day Is Done
          当时光已逝
          If the day is done ,
          假如时光已逝，
          If birds sing no more .
          鸟儿不再歌唱，
          If the wind has fiagged tired ,
          风儿也吹倦了，
          Then draw the veil of darkness thick upon me ,
          那就用黑暗的厚幕把我盖上，
          Even as thou hast wrapt the earth with The coverlet of sleep and tenderly closed ,
          如同黄昏时节你用睡眠的衾被裹住大地，
          The petals of the drooping lotus at dusk.
          又轻轻合上睡莲的花瓣。
          From the traverer,
          路途未完，行囊已空,
          Whose sack of provisions is empty before the voyage is ended ,
          衣裳破裂污损，人已精疲力竭。
          Whose garment is torn and dust-laden ,
          你驱散了旅客的羞愧和困窘，
          Whose strength is exhausted,remove shame and poverty ,
          使他在你仁慈的夜幕下，
          And renew his life like a flower under
          如花朵般焕发生机。
          The cover of thy kindly night .
          在你慈爱的夜幕下苏醒。
        </div>
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <footer class="footer"></footer>
    </div>
  </body>

</html>

抛弃颜色形状等干扰代码,实际布局用到的css

.contanier{display: flex; min-height: 100vh; flex-direction: column;}
.content {display: flex; flex: 1; color: #fff; background-color: green;}
.main{flex: 1;}
.left{order: -1;}

全程不需要计算数值，不需要偏移位置，用flex布局可以控制方向，比例，顺序，自动计算样式

上面的知识点可以让你应该绝大多数的页面布局了，移动端又会涉及更多知识点，随意门：
viewports剖析

使用Flexible实现手淘H5页面的终端适配

页面布局 html居中

页面基础布局相关知识 --- 居中&amp;经典布局

前言

水平居中的各种方法优劣.

margin

绝对定位

flex

inline-block+text-align

垂直居中的各种方法优劣.

table-cell+vertical-align

绝对定位

flex

水平垂直居中的各种方法.

table-cell+inline-block+vertical-align+text-align

absolute+transform

flex

实战：

定宽+自适应

圣杯布局&双飞翼布局（两列定宽+一列自适应）

相关推荐

页面基础布局相关知识 --- 居中&经典布局