布局技巧，

## 布局技巧

 

### 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