圣杯布局步骤
两边两栏固定宽度，中间栏宽度自适应
1,html结构+两栏定宽，中栏宽自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/pan.css" />
</head>
<body>
<div class="wrap">
<div class="main">main</div>
<div class="aside">aside</div>
<div class="r-box">r-box</div>
</div>
</body>
</html>
图片.png
图片.png
2,浮动
图片.png
浮动
3,负margin把红色和黄色移动到蓝色上面
图片.png
图片.png
4,给三个div的父包裹层设置左右padding，给左右两栏留出空间
留出两边空间？
图片.png
图片.png
5,将左右两栏移动到空白区域？
1）使用负margin没有作用
那么考虑位置移动 父容器没有设置任何出static之外的定位，所以不能使用绝对定位，则相对于原来的位置发生移动，设置相对定位
图片.png
图片.png
OK 大功告成完成需求
缺点
当页面宽度缩小，导致中间栏宽度<左边栏宽度时，布局会乱
产生原因 margin-left:-100%导致
因为中间栏宽度<左边栏宽度时，margin-left:-100%为中间栏的宽度 然而这个宽度不能放下左边栏，所以会导致布局错乱，左边栏实现不了 放到蓝色块的左边
双飞翼
1完成到这里时发生区别
图片.png
圣杯布局发生布局错乱的关键就是中间栏的宽度小于左边栏时，由margin-left:-100%产生
所以双飞翼就是绕过margin-left:-100%这个宽度指的是中间栏的宽度
解决问题的关键！ 使中间栏的宽度发生变化至少大于红+黄的宽度
所以，给蓝色添加一个div包裹层，包裹层的宽度为100%，蓝色块设置左右margin值，为左右两栏留出位置
图片.png
图片.png
OK屏幕减小 蓝色div宽度小于红色div宽度 不会布局错乱
图片.png
