共计 16923 个字符，预计需要花费 43 分钟才能阅读完成。
前言
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 页面的终端适配
正文完
