等高布局和双飞翼布局

等高布局

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

实现要点：多列

每一列的背景不同

其中任意一列变高，其他列同步

方法一

原理：利用padding和margin负值相互抵消

步骤：padding提前延伸背景

margin负值抵消padding的占位

优缺点

需要合理的控制padding和margin的负值

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

方法二

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

步骤：准备3个负责背景的盒子，在html结构上要嵌套结构

将内容盒放在最内层的背景盒子里面bg3

最内层的盒子bg3清浮动

将bg2和bg3移动，相对定位，形成三列背景效果

将内容盒移动到对应的背景处即可

优缺点

结构复杂

可以创建任意列

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

圣杯布局

三列（不一定等高）

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

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

步骤：外盒子左右固定padding值，预留左右两侧盒子的位置

center宽度为100%，左右两个盒子固定宽度

移动，left通过margin-left：-100%，配合相对定位left：-左盒子宽度；移动到左侧预留的位置

移动，right通过margin-left：-右盒子宽度，配合相对定位，left：右盒子的宽度；移动到右侧预留的位置

双飞翼布局

步骤：centerBox与left和right要在一排

centerBox固定宽度100%，left和right固定宽度

centerBox内部的center盒子，不固定宽度，通过左右margin预留出左右两个盒子的位置

移动left盒，通过margin-left：-100%；实现

移动right盒，通过margin-left：-右盒子宽度；实现