圣杯布局和双飞翼布局(我自己的理解)

圣杯布局和双飞翼布局 实现的都是三栏布局，两边的盒子宽度固定，中间盒子自适应

圣杯布局（要注意设置最小宽度）

这时候左右两边的盒子会盖住中间盒子的内容

给父级添加padding值  给左右两个盒子设置定位

另一种实现给中间的盒子左右加padding值  用来抵消左右两边盒子遮住的部分

增加了padding后 因为默认的box-sizing属性为content-box（在元素宽度和高度之内绘制内边距和外边距），所以当设置了左右的padding后  实际内容的宽度为（100%+左右padding的和），那原来的左右盒子的负margin就不对了，只要将box-sizing的值设置为border-box就好了。

效果图

双飞翼布局

 双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。

 

效果图