双飞翼布局、圣杯布局、定位方法布局、flex布局（三栏布局的多种实现方式）--html基本知识（学习笔记）
常见的三栏布局方式，是将一个网页分为左列、中列和右列三部分，并且我们要得到的效果是：左列和右列宽度恒定，中间列的宽度根据游览器窗口的大小自适应。在本文中，我们用了四种方式来实现，分别为双飞翼布局、圣杯布局、定位方法布局和flex布局。
在游览器的显示效果如下所示：
一、双飞翼布局
（1）布局样式：
<header>
<h1>header1</h1>
</header>
<article>
<div class="content1">content1</div>
<div class="left1">left1</div>
<div class="right1">right1</div>
</article>
<footer>footer1</footer>
注意：在整个的DOM结构中，content1中间的放在最前面。
（2）style样式
*{ margin: 0; padding: 0;}
header,article,footer{ display: block; overflow: hidden;}/**以上为重置样式**/
header,footer{ background: #444; height: 60px; color: #fff; line-height: 60px; text-align:center;}
.left1,.right1,.content1{ float: left; min-height: 200px;}
.left1,.right1{ width: 200px;}
.left1{ background: darkgreen; margin-left: -100%;}
.right1{ background: cornflowerblue; margin-left: -200px;}
.content1{width: 100%; background: darkgoldenrod; padding: 0 200px; box-sizing: border-box;}①使用float:left，让left、right和content三部分浮动起来；②设置content的宽度为width:100%，这样content将占据article父元素的全部宽度，以达到自适应的形式；③实现左列和右列固定宽度，采用了margin负值；④.left{width:200px;margin-left:-100%;}，固定左列宽度为200px，当margin-left:-100%时，左列会脱离自己所在的行，向上一行浮动；⑤定义右列的浮动偏移（margin负值），.right{width:200px;margin-left:-200px;}。
注意：content使用box-sizing,去节省了一个标签。
（3）双飞翼布局的优点：
①兼容性好，兼容主流的游览器，包括IE6（淘宝首页也运用了这种兼容性很好的双飞翼布局）；
②因为在DOM中content1在三列结构的最前面，所以可以实现主要内容的优先加载。
二、圣杯布局
（1）布局样式：
<header>
<h1>header2</h1>
</header>
<article class="article2">
<div class="content2">content2</div>
<div class="left2">left2</div>
<div class="right2">right2</div>
</article>
<footer>footer2</footer>注意：在整个的DOM结构中，content2中间的放在最前面。
（2）style样式
*{ margin: 0; padding: 0;}
header,article,footer{ display: block; overflow: hidden;}/**以上为重置样式**/
header,footer{ background: #444; height: 60px; color: #fff; line-height: 60px; text-align:center;}
.content2,.left2,.right2{ position: relative; float: left; min-height: 200px;}
.article2{padding: 0 200px; }
.left2,.right2{ width: 200px;}
.left2{ background: darkgreen; margin-left: -100%; left: -200px;}
.right2{ background: cornflowerblue; margin-left: -200px; right: -200px;}
.content2{width: 100%; background: darkgoldenrod; }①圣杯布局是一种相对布局，首先设置父元素article2的位置，.article2{padding:0 200px;};
②将主体部分的三个子元素都设置左浮动，.content2,.left2,.right2{float:left;};
③设置content2的宽度为width:100%,让其单独占满一行；
④设置left2和right2负的外边距（负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行），设置left部分的margin-left为-100%，就会使left向左移动一整行的宽度，由于left左边是父元素的边框，所以left继续跳到上一行左移，一直移动到上一行的开头，并覆盖了content2的部分。left上移过后，right就会处于上一行的开头位置，这时再设置right部分margin-left为负的宽度，right就会左移到上一行的末尾；
⑤使用相对定位移动left和right部分，.left{left:-200px;},.right{right:-200px;}。
三、定位方法布局
（1）布局样式：
<header>
<h1>header3</h1>
</header>
<article class="article3">
<div class="left3">left3</div>
<div class="content3">content3</div>
<div class="right3">right3</div>
</article>
<footer>footer3</footer>（2）style样式
*{ margin: 0; padding: 0;}
header,article,footer{ display: block; overflow: hidden;}/**以上为重置样式**/
header,footer{ background: #444; height: 60px; color: #fff; line-height: 60px; text-align:center;}
.article3{ position: relative; overflow: hidden; padding: 0 200px;}
.content3,.left3,.right3{min-height: 200px;}
.left3,.right3{ width: 200px;}
.left3{ background: darkgreen; position: absolute; left: 0; top: 0;}
.right3{ background: cornflowerblue; position:absolute; top: 0; right: 0;}
.content3{width: 100%; background: darkgoldenrod; }绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
提示：因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素。可以通过设置z-index属性来控制这些框的堆放次序。
注意：content3同样可以定位，那么就是{position:absolute;left:200px; right:200px;top:0;} 最为常用该布局方式。
四、Flex布局
（1）布局样式：
<header>
<h1>header4</h1>
</header>
<article class="article4">
<div class="left4">left4</div>
<div class="content4">content4</div>
<div class="right4">right4</div>
</article>
<footer>footer4</footer>（2）style样式
*{ margin: 0; padding: 0;}
header,article,footer{ display: block; overflow: hidden;}/**以上为重置样式**/
header,footer{ background: #444; height: 60px; color: #fff; line-height: 60px; text-align:center;}
.article4{ display: flex;}
.content4,.left4,.right4{min-height: 200px;}
.left4,.right4{ width: 200px;}
.left4{ background: darkgreen; }
.right4{ background: cornflowerblue;}
.content4{ background: darkgoldenrod; flex-grow: 1; }Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局，所以，flex布局将成为未来布局的首选方案。
对于flex布局的一些具体实现，可参见阮一峰大神的flex布局教程语法篇点击打开链接。
①将article4块设置为一个flex容器，那么article下的left4,right4,content4这三个子元素自动成为容器成员，称为flex项目；②项目根据内容进行弹性布局；③可以通过order属性设置排列顺序，对于order属性：定义项目的排列顺序，越小越靠前，默认为0；④通过项目属性flex-grow设置content4的放大比例，将空余的空间用content4来填充，使三个项目不满一行；默认为0，也就是对剩余空间不做处理；⑤设置left4和right4的固定宽度，不仅可以用width来设置，也可以通过项目属性flex-basis来设置。
使用flex布局是一件很简单的事情，不在为浮动、定位，不受控制的div而烦恼了。
注意：另外还有 grid布局，暂时浏览器兼容不好，但是几年后那就不一定了。
四种布局在游览器下的显示情况如下：
参考博客：CSS中经典的双飞翼布局 点击打开链接
CSS圣杯布局、双飞翼布局、flex布局和绝对定位布局的几种经典布局的具体实现实例 点击打开链接
圣杯布局和双飞翼布局（前端面试必看）点击打开链接 https://www.jianshu.com/p/f9bcddb0e8b4