综述: 其实两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局,中间部分在DOM结构上优先,以便先行渲染。(核心目的: 先解析中间栏,展示当前页面的核心内容,提升用户体验。)
圣杯布局: 的特点
1、结构上先解析center
2、三块之间没有重叠的部分
3、给最大的盒子添加了padding挤进去的 -->
<div class="box">
<div class="center">中间的区域</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
.box{ border: 5px solid red; overflow: hidden;padding: 0 200px 0 100px;}
.left{ float: left;width: 100px;height: 200px;background: yellow;margin-left: -100%;position: relative; left: -100px;}
.right{ float: left;width: 200px;height: 300px;background: blue;margin-left: -200px;position: relative; right: -200px;}
.center{ float: left;height: 350px;background: green;width: 100%;}
分析说明: 按文档加载顺序一上来center最先解析,三块全部左浮动。center设置了100%宽度一上来是铺满浏览器。左右用margin是浮在center上的,接着用定位将左右盒子归到各自两边,此时center铺满浏览器的宽且覆盖着左右两边的盒子。center的父容器box内边距撑开自己,右边200px,右边的盒子露出来。左边100px,content右缩100px,左边的盒子露出来。此时center正好自适应显示在中间。(是一个动态的演化过程,建议手动测试理解记忆。)
页面效果
双飞翼布局: 的特点
1、结构上先解析center
2、3大块上,最大的中间是和左右重叠的
3、给center里面包了一个小盒子,小盒子给margin挤进去的
<div class="box">
<div class="center">
<div class="bg">中间的盒子</div>
</div>
<div class="left">左边</div>
<div class="right">右边</div>
</div>
.box{ border: 5px solid red; overflow: hidden;background:skyblue}
.left{ float: left;width: 100px;height: 200px;background: yellow;margin-left: -100%;}
.right{ float: left;width: 200px;height: 300px;background: blue;margin-left: -200px;}
.center{ float: left;height: 350px;width: 100%; background:black;}
.bg{height: 320px;background: white;margin: 0 200px 0 100px;}
分析说明: 同样的center最先解析,三块全浮动。center设置了100%宽度一上来是铺满浏览器的。左右用外边距margin重新归位浏览器左右是覆盖在center上的,center的子元素bg用外边距margin左、右撑自己正好到左右盒子的正中间,此时它为中心内容显示区,裸露在你眼前,同样也完成了自适应的目的。
页面效果