第13天笔记

 布局技巧

### 1、等高布局

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

![](D:/web/2021/2021一阶段资料/day08/笔记/media/day08_14.jpg)

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

}

```

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值