布局技巧-等高布局 圣杯布局 双飞翼布局

1、等高布局

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

1.1、实现要点（需求）

- 多列

- 每一列背景不同

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

#### 1.2、方法一

##### 1.2.1、原理

利用padding和margin负值相抵消

- 利用padding提前延伸背景

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

1.2.2、实现步骤

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

- 父容器清浮动

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

- 父容器overflow:hidden

##### 1.2.3、优缺点

- 合理的控制padding和margin值

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

### 1.3、方法二

##### 1.3.1、原理

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

##### 1.3.2、实现步骤

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

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

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

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

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

##### 1.3.3、优缺点

- 结构复杂

- 可以创建任意列数

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

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

- 三列（不一定等高）

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

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

#### 2.1、圣杯布局

### 2.2、圣杯实现步骤

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

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

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

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

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

1. 双飞翼

.1、双飞翼实现步骤

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

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

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

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

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