每日知识分享

## 布局技巧

### 1、等高布局

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


#### 1.1、实现要点（需求）

- 多列

- 每一列背景不同

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

#### 1.2、方法一

##### 1.2.1、原理

利用padding和margin负值相抵消

- 利用padding提前延伸背景

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

```html

<div class="wrap">

<div class="left">当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，雨绸缪为未来应对重大呼吸疾病做好更充分的准备，同时开展一对一的心理关爱计划，为奋战在一线的白衣</div>

<div class="center">当前，新冠疫情的防疫已进入新常态</div>

<div class="right">当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，星巴</div>

</div>

```

```css

.wrap{

width:600px;

border:10px solid #000;

overflow: hidden;

}

.wrap::after{

content:"";

display: block;

clear: both;

}

.left,.center,.right{

float:left;

padding-bottom:1000px;

margin-bottom:-1000px;

}

.left{

width:200px;

/* 最小高度 ----指定盒子可以大于等于100px */

min-height:100px;

background-color:pink;

}

.center{

width:200px;

/* 最小高度 ----指定盒子可以大于等于100px */

min-height:100px;

background-color:yellowgreen;

}

.right{

width:200px;

/* 最小高度 ----指定盒子可以大于等于100px */

min-height:100px;

background-color:skyblue;

}

```

##### 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负值移动到对应的背景处即可

```html

<div class="wrap">

<div class="bg1">

<div class="bg2">

<div class="bg3">

<div class="left">1当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，雨绸缪为未来应对重大呼吸疾病做好更充分的准备，同时开展一对一的心理关爱计划，为奋战在一线的白衣</div>

<div class="center">2当前，新冠疫情的防疫已进入新常态</div>

<div class="right">3当前，新冠疫情的防疫已进入新常态新阶段，如何防患于未然，把基层常态化防控的藩篱扎得更牢，显得愈加重要。今天，星巴</div>

</div>

</div>

</div>

</div>

```

```css

.wrap{

border:1px solid #000;

width:600px;

overflow: hidden;

}

.bg1{

background-color: pink;

}

.bg2{

background-color: skyblue;

position:relative;

left:200px;

}

.bg3{

background-color: orange;

position:relative;

left:200px;

}

.left,.center,.right{

width:200px;

float:left;

min-height:100px;

}

.left{

margin-left:-400px;

}

.center{

margin-left:-200px;

}

.bg3:after{

content:"";

display: block;

clear: both;

}

```

##### 1.3.3、优缺点

- 结构复杂

- 可以创建任意列数

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

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

- 三列（不一定等高）

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

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

#### 2.1、圣杯布局

**HTML**

```HTML

<div class="wrap">

<div class="center">中间</div>

<div class="left">左侧</div>

<div class="right">右侧</div>

</div>

```

**CSS**

```css

.wrap:after{

content:"";

display: block;

clear: both;

}

.wrap{

border:1px solid #000;

padding:0 200px;

min-width:200px;

}

.left,.center,.right{

float:left;

}

.left{

width:200px;

min-height:200px;

background-color: pink;

margin-left:-100%;

position: relative;

left:-200px;

}

.right{

width:200px;

min-height:200px;

background-color: skyblue;

margin-left:-200px;

position:relative;

left:200px;

}

.center{

width:100%;

min-height:200px;

background-color: yellowgreen;

}

```

#### 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；移动至右侧列位置

### 3、双飞翼

**HTML**

```html

<div class="wrap">

<div class="centerbox">

<div class="center">中间</div>

</div>

<div class="left">左侧</div>

<div class="right">右侧</div>

</div>

```

**CSS**

```css

.wrap:after {

content: "";

display: block;

clear: both;

}

.wrap {

border: 1px solid #000;

min-width:600px;

}

.left,

.centerbox,

.right {

float: left;

}

.centerbox{

width:100%;

}

.left {

margin-left:-100%;

width: 200px;

min-height: 200px;

background-color: pink;

margin-left: -100%;

}

.right {

margin-left:-200px;

width: 200px;

min-height: 200px;

background-color: skyblue;

margin-left: -200px;

}

.center {

margin:0 200px;

min-height: 200px;

background-color: yellowgreen;

}

```

#### 3.1、双飞翼实现步骤

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

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

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

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

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