CSS篇：双飞翼和圣杯布局

双飞翼和圣杯布局

字面意思

• 通俗的来说就是左右两栏固定宽度，中间部分自适应的三栏布局。

两种布局本质

圣杯布局实现

1. 首先把left、middle、right都放出来
2. 给它们三个设置上float: left, 脱离文档流；
3. 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
4. left、right设置上各自的宽度
5. middle设置width: 100%;
6. 给left、middle、right设置position: relative;
7. container设置padding: 0, rightWidth, 0, leftWidth;
8. 给left元素设置margin-left: -100%，再给left元素设置left：-leftWidth;
9. 给right元素设置margin-left: -rightWidth，再给right元素设置left：rightWidth或right：-rightWidth;

双飞翼布局实现

1. 首先把left、middle、right都放出来, middle中增加inner
2. 给它们三个设置上float: left, 脱离文档流；
3. 一定记得给container设置上overflow: hidden; 可以形成BFC撑开文档
4. left、right设置上各自的宽度
5. middle设置width: 100%;
6. inner设置margin: 0, rightWidth, 0, leftWidth;
7. left设置 margin-left: -100%, right设置 right: -rightWidth;