圣杯布局和双飞翼布局
写在前面：今天是2019年12月1日 2019年的最后一天，通常每个月的开始和每年的最后一个月总是会有一些新奇的事情，但是不管怎样 总归是最好的安排；
今天了解的是最常见的圣杯布局和双飞翼布局，初看文字内容，文绉绉的，每次学习知识都会先弄懂为什么叫“圣杯布局”呢～一个名字来描述是比较不错的了
主要作用：实现三栏布局 实现左右两边固定，中间自适应的布局 利用布局 可优先渲染主要部分
功能：实现左右两边固定，中间自适应的布局 利用布局 可优先渲染主要部分
相同点：
两侧宽度固定，中间宽度自适应；
中间部分在 DOM结构上优先，以便先行渲染；
允许三列中的任意一列成为最高列；
只需要使用一个额外的
产生圣杯布局和双飞翼布局的原因：
网页渲染中dom是从上到下进行解析，而三栏布局中，我们希望优先展示重要的部分，所以希望优先解析中间的部分dom，因此实现三个布局的排列，产生栏圣杯布局（圣杯布局之所以叫做圣杯布局，可能是一种信仰）
传统的三栏布局dom结构
优先展示中间重要部分后的dom结构
公共样式
header{
width: 100%;
height: 50px;
background-color: red;
}
footer{
width: 100%;
height: 50px;
background-color: red;
}
圣杯布局：
优点：不需要添加 DOM节点； 缺点：中间部分的宽小于左侧部分时就会发生布局混乱，即某一列内容若过多，文字会溢出（middle css中的注释是开发时的思路 自然语言描述下： 首先基本布局的实现 dom元素按照顺序 2.将left和right移至到中间栏一排 利用float进行定位 3.在外层设置padding,让left和right进行添加padding的值，应用relative定位在左右两侧 .wrapper-shengbei .wrapper{ /* 3 */ padding: 0 100px; overflow: hidden; } .wrapper-shengbei .main{ width: 100%; height: 200px; background-color: salmon; /* 2 */ float: left; } .wrapper-shengbei .wrapper .left{ width: 100px; height: 200px; background-color: royalblue; /* 2 */ margin-left: -100%; float: left; /* 3 */ /* position: relative; left: -100px; */ } .wrapper-shengbei .wrapper .right{ width: 100px; height: 200px; background-color: rgb(98, 136, 67); /* 2 */ margin-left: -100px; float: left; /* 3 */ /* position: relative; right: -100px; */ } 缺点：当浏览器中的main的宽度小于两侧的宽度时候 咦：布局错乱了 双飞翼布局 双飞翼布局是由淘宝的ued@玉伯提出 https://mp.weixin.qq.com/s/wJZ6p-Wmk0n972A_WYk6aQ 比圣杯布局不同的是，双飞翼布局解决了由于浏览器屏幕而导致的内容错乱问题， html 的dom结构
css中注释的顺序为实现时的思路顺序
.wrapper-double{
overflow: hidden;
padding: 0px;
}
.wrapper-double .wrapper{
overflow: hidden;
padding: 0px;
}
.wrapper-double .col{
/* 1 */
float: left;
/* 3 */
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.wrapper-double .main{
width: 100%;
background-color: saddlebrown;
}
.wrapper-double .main-wrap{
/* 2 */
margin: 0 100px 0 100px;
height: 200px;
}
.wrapper-double .left{
width: 100px;
height: 200px;
/* 2 */
margin-left: -100%;
background-color: rgb(98, 136, 67);
}
.wrapper-double .right{
width: 100px;
height: 200px;
/* 2 */
margin-left: -100px;
background-color: rgb(216, 219, 214);
}
padding-bottom: 9999px;
margin-bottom: -9999px;
利用padding和margin实现等高度变化
.wrapper-double2 .wrapper {
position: relative;
}
.wrapper-double2 .main {
height: 200px;
margin: 0 100px;
background-color: saddlebrown;
}
.wrapper-double2 .left,.wrapper-double2 .right{
width: 100px;
height: 200px;
position: absolute;
top: 0;
background-color: rgb(98, 136, 67);
}
.wrapper-double2 .left{
height: 300px;
left: 0;
}
.wrapper-double2 .right{
right: 0;
}
缺点是，三栏的高度不足以支撑底部的footer~如果底部的footer是定位在浏览器下面是无关系的，动态的增加两侧的高度，发现支撑高度变化
实现三栏布局的种类不限于这几种 ～