CSS3属性之resize

最新推荐文章于 2025-06-24 19:09:57 发布

桃花扇J

最新推荐文章于 2025-06-24 19:09:57 发布

阅读量981

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/weixin_44584442/article/details/105258632

CSS3 专栏收录该内容

14 篇文章

订阅专栏

本文深入讲解CSS中的resize属性，探讨其如何与overflow属性配合使用，使用户能够调整元素的宽度和高度。通过三个实例演示了both、horizontal和vertical三种属性值的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

resize需与overflow配合使用，overflow上一篇写过了，直接在上一节的基础上讲一下resize

resize可以让用户重新调整overflow属性值为非visible的元素的宽高，有 both / horizontal / vertical 三种属性值

1.both：允许用户调整元素的宽高【例1】

2.horizontal：允许用户调整元素的宽度【例2】

3.vertical：允许用户调整元素的高度【例3】

【例1】both

效果：

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            position: absolute;
            left: 100px;
            top: 100px;
            width: 200px;
            height: 200px;
            border: 1px solid #333;
            border-radius: 10px;
            color: #424242;
            overflow: auto;
            resize: both;
        }

        .content {
            width: 250px;
            height: 250px;
            padding: 20px;
            border: 1px solid #33f;
            border-radius: 10px;
            background-color: rgba(200, 255, 200, 0.5);

        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="content">
            <p>
                我们在之前的一本著作中研究群体观念对各国发展的影响时已经指出，每一种文明都是少数几个基本观念的产物，这些观念很少能够得到革新。我们指出，这些观念在群体的心中是多么稳固，要想对这一过程产生影响是多么困难，以及这些观念一旦实现之后所拥有的力量。最后我们又说，历史的波动就是这些基本观念的改变所引发的结果。
            </p>
        </div>
    </div>
</body>

</html>

【例2】horizontal：将上述代码resize属性值改为horizontal

效果