自学web的第16天

等高布局

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

1.1、实现要点（需求）

• 多列

• 每一列背景不同

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

1.2、方法一

1.2.1、原理

利用padding和margin负值相抵消

1.2.3、优缺点

1.3、方法二

1.3.1、原理

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

1.3.2、实现步骤

• 利用padding提前延伸背景

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

• 1.2.2、实现步骤

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

• 父容器清浮动

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

• 父容器overflow:hidden

• 合理的控制padding和margin值

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

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

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

• 最内层的盒子.bg3清浮动

• 将.bg2，.bg3相对于当前位置进行移动，形成三列背景效果

• 将.left，.center通过margin负值移动到对应的背景处即可

1.3.3、优缺点

• 结构复杂

• 可以创建任意列数

• 方便通过百分比实现自适应