圣杯布局与双飞翼布局都属于三栏式布局,是一种两边盒子固定宽度,中间盒子自适应的布局。
圣杯布局和双飞翼布局相同点:
1.父元素包含左中右三个子元素,分别左浮动
2.中间元素宽度100%(必须为第一个渲染)
3.用margin-left的负值将三个盒子位于同行,其中左元素负值-100%,右元素-右盒子宽度
4.在父元素上清除浮动
圣杯布局:
A.不同点:
1.用左右padding为左右盒子留出位置
2.相对定位将左右元素移动到正确位置上
B.优点
不需要添加DOM结点
C.缺点
当center宽度小于left时会发生布局混乱
D.操作
1.CSS部分
2.DOM部分
双飞翼布局:
A.不同点
给中间元素设置子元素并给其左右margin为左右盒子留出位置
B.优点
不会发生布局混乱
C.缺点
需要多添加DOM结点
D.操作
1.CSS部分
body设置min-width方式拖放缩小时布局混乱
2.DOM