1、等高布局

等高布局是指多列子元素在父元素中實(shí)現(xiàn)等高視覺(jué)效果的布局技巧。

1.1、實(shí)現(xiàn)要點(diǎn)（需求）

- 多列

- 每一列背景不同

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

#### 1.2、方法一

##### 1.2.1、原理

利用padding和margin負(fù)值相抵消

- 利用padding提前延伸背景

- 利用margin負(fù)值抵銷padding的占位

1.2.2、實(shí)現(xiàn)步驟

- 通過(guò)浮動(dòng)創(chuàng)建一個(gè)正常的三列布局（不同列背景不同）

- 父容器清浮動(dòng)

- 每一列固定padding-bottom，同時(shí)指定一個(gè)margin負(fù)值，抵銷padding的占位

- 父容器overflow:hidden

##### 1.2.3、優(yōu)缺點(diǎn)

- 合理的控制padding和margin值

- 可以實(shí)現(xiàn)任意列等高布局

### 1.3、方法二

##### 1.3.1、原理

盒子層層嵌套，利用內(nèi)層盒子高度變化，外層盒子的高度也會(huì)同步變化

##### 1.3.2、實(shí)現(xiàn)步驟

- 準(zhǔn)備三個(gè)負(fù)責(zé)背景的盒子.bg1，.bg2，.bg3，HTML結(jié)構(gòu)上層層嵌套

- 將.left，.center，.right盒子放入最內(nèi)層的背景盒子.bg3里

- 最內(nèi)層的盒子.bg3清浮動(dòng)

- 將.bg2，.bg3相對(duì)于當(dāng)前位置進(jìn)行移動(dòng)，形成三列背景效果

- 將.left，.center通過(guò)margin負(fù)值移動(dòng)到對(duì)應(yīng)的背景處即可

##### 1.3.3、優(yōu)缺點(diǎn)

- 結(jié)構(gòu)復(fù)雜

- 可以創(chuàng)建任意列數(shù)

- 方便通過(guò)百分比實(shí)現(xiàn)自適應(yīng)

### 2、圣杯布局分析實(shí)現(xiàn)要點(diǎn)

- 三列（不一定等高）

- 改變加載順序，優(yōu)先加載中間列—（結(jié)構(gòu)上:中左右，顯示效果上：左中右）

- 中間列自適應(yīng)，兩側(cè)列固定

#### 2.1、圣杯布局

### 2.2、圣杯實(shí)現(xiàn)步驟

- 外框左右固定padding值，預(yù)留左側(cè)列和右側(cè)列的列寬

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

- 結(jié)構(gòu)上.center，.left，.right依次浮動(dòng)在一行排列

- 移動(dòng).left通過(guò)margin-left:-100%；配合相對(duì)定位position:relative；left:-200px；移動(dòng)至左側(cè)列位置

- 移動(dòng).right通過(guò)margin-left:-200px；配合相對(duì)定位position:relative；left:200px；移動(dòng)至右側(cè)列位置

雙飛翼

.1、雙飛翼實(shí)現(xiàn)步驟

- .centerbox與.left，.right浮動(dòng)在一行排列

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

- .centerbox內(nèi)部嵌套.center，不定寬度，通過(guò)定義左右margin留出左側(cè)列的寬和右側(cè)列寬

- 移動(dòng).left通過(guò)margin-left:-100%；實(shí)現(xiàn)

- 移動(dòng).right通過(guò)margin-left:-200px；實(shí)現(xiàn)

總結(jié)

以上是生活随笔為你收集整理的布局技巧-等高布局 圣杯布局 双飞翼布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。