布局技巧（等高、圣杯）

1、等高布局

等高布局是指多列子元素在父元素中实现等高视觉效果的布局技巧。

1.1、实现要点（需求）

• 多列

• 每一列背景不同

• 其中任意一列变高，其它列同步变高

1.2、方法一

1.2.1、原理

利用padding和margin负值相抵消

1.2.3、优缺点

1.3、方法二

1.3.1、原理

盒子层层嵌套，利用内层盒子高度变化，外层盒子的高度也会同步变化

1.3.2、实现步骤

2、圣杯布局分析实现要点

2.2、圣杯实现步骤

• 利用padding提前延伸背景

• 利用margin负值抵销padding的占位

• 1.2.2、实现步骤

• 通过浮动创建一个正常的三列布局（不同列背景不同）

• 父容器清浮动

• 每一列固定padding-bottom，同时指定一个margin负值，抵销padding的占位

• 父容器overflow:hidden

• 合理的控制padding和margin值

• 可以实现任意列等高布局

• 准备三个负责背景的盒子.bg1，.bg2，.bg3，HTML结构上层层嵌套

• 将.left，.center，.right盒子放入最内层的背景盒子.bg3