分析理解——圣杯布局和双飞翼布局

约定不等于承诺〃 2022-11-25 11:50 224阅读 0赞

**综述：** 其实两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在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正好自适应显示在中间。(**是一个动态的演化过程，建议手动测试理解记忆。**)

**页面效果**  
![在这里插入图片描述][2020080819194484.png]

**双飞翼布局： 的特点**  
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左、右撑自己正好到左右盒子的正中间，此时它为中心内容显示区，裸露在你眼前,同样也完成了自适应的目的。

**页面效果**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]

[2020080819194484.png]: /images/20221124/49879e09cc52498e809269f7af8f1724.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NDUVN0dWR5_size_16_color_FFFFFF_t_70]: /images/20221124/4768e5c6ed9c42489b17b80ce893c1ce.png