自学web的第17天

圣杯布局分析实现要点

3、双飞翼

3.1、双飞翼实现步骤

• 三列（不一定等高）

• 改变加载顺序，优先加载中间列—（结构上:中左右，显示效果上：左中右）

• 中间列自适应，两侧列固定

  圣杯实现步骤

• 外框左右固定padding值，预留左侧列和右侧列的列宽

• .center宽度100%，.left，.right固定宽度

• 结构上.center，.left，.right依次浮动在一行排列

• 移动.left通过margin-left:-100%；配合相对定位position:relative；left:-200px；移动至左侧列位置

• 移动.right通过margin-left:-200px；配合相对定位position:relative；left:200px；移动至右侧列位置

• .centerbox与.left，.right浮动在一行排列

• .centerbox固定宽度100%，left，.right固定宽度

• .centerbox内部嵌套.center，不定宽度，通过定义左右margin留出左侧列的宽和右侧列宽

• 移动.left通过margin-left:-100%；实现

• 移动.right通过margin-left:-200px；实现