CSS在不影响总体布局情况下让元素自由缩小

最新推荐文章于 2023-08-06 17:03:05 发布

AGG_Chan

最新推荐文章于 2023-08-06 17:03:05 发布

阅读量1k

点赞数

分类专栏：前端 HTML CSS 文章标签： CSS 布局元素缩小响应式设计图片大小调整

本文链接：https://blog.csdn.net/qq_44742090/article/details/108943143

版权

前端同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

CSS在不影响总体布局情况下让元素自由缩小

开始状态

<body>
    <div class="box1">box1box1</div>
    <div class="box2">box2box2</div>
    <div class="box3">box3box3</div>
    <div class="box4">box4box4</div>
    <div class="box5">box5box5</div>
</body>
<style>
    .box1{
        height: 100px;
        background-color: red;
    }
    .box2{

        height: 100px;
        background-color: blue;
    }
    .box3{
        height: 100px;
        background-color: green;
    }
    .box4{
        height: 100px;
        background-color: gray;
    }
    .box5{
        height: 100px;
        background-color: rgb(233, 30, 206);
    }
</style>

效果

在这里插入图片描述

要求

此时，如果要将class = "box2"的div元素高度由100px变化成50px,而不对总体布局产生变化，即如图
在这里插入图片描述
但是如果这里单纯地让box2的height变为50px,如

.box2{

        height: 50px;
        background-color: blue;
    }

会得到下图所示效果，此时box2高度的变化会影响box3 4 5的整体布局

在这里插入图片描述
要解决这个问题，可以在class = "box2"的div元素外加一层div元素盒子，把box2的div元素包含在内，然后把该盒子的大小设定为固定值，这样，改变box2的高度就不会对box3 4 5产生变化，具体实现如下。

<body>
    <div class="box1">box1box1</div>
    <div class="box_0"> 
        <!--class = "box_0的外层盒子"-->
        <div class="box2">box2box2</div>
    </div>
    <div class="box3">box3box3</div>
    <div class="box4">box4box4</div>
    <div class="box5">box5box5</div>
</body>
<style>
    .box1{
        height: 100px;
        background-color: red;
    }
    .box_0{
        height: 100px;
    }
    .box2{
        height: 50px;
        background-color: blue;
    }
    .box3{
        height: 100px;
        background-color: green;
    }
    .box4{
        height: 100px;
        background-color: gray;
    }
    .box5{
        height: 100px;
        background-color: rgb(233, 30, 206);
    }
</style>

同样的道理，在img元素中也可以如此应用，使得在不影响总体布局的情况下让图片改变大小。

AGG_Chan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS在不影响总体布局情况下让元素自由缩小

CSS在不影响总体布局情况下让元素自由缩小开始状态<body> <div class="box1">box1box1</div> <div class="box2">box2box2</div> <div class="box3">box3box3</div> <div class="box4">box4box4</div> <div class="b
复制链接

扫一扫

专栏目录