46. CSS resize（调整元素大小）

为了增强用户体验，CSS3 中新增了一个非常实用的 resize 属性，该属性允许用户通过拖动的方式来自由缩放元素的尺寸，在此之前要实现类似的效果还需要借助大量的 JavaScript 代码。resize 属性的语法格式如下：

resize: none|both|horizontal|vertical;

语法说明如下：

  • none：用户无法调整元素的尺寸；
  • both：用户可调整元素的高度和宽度；
  • horizontal：用户可调整元素的宽度；
  • vertical：用户可调整元素的高度。

在使用 resize 属性时还需要注意以下几点：

  • 单独设置 resize 属性是无效的，resize 属性需要与 overflow 属性结合使用才有效，并且 overflow 属性的值需要设置为 auto、hidden 或 scroll；
  • 并不是所有的元素都可以设置 resize 属性，比如 img 和 table 属性就没办法使用 resize 属性。

示例代码如下：

    <!DOCTYPE html>
    <html>
    <head>
        <style>
            div
            {
                border: 1px solid;
                width: 300px;
                resize: both;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <div>通过 resize 属性您可以调整元素在水平和垂直方向的大小</div>
    </body>
    </html>

运行效果如下图所示：
image
图：resize 属性演示

运行上面的代码，然后通过拖动元素的右下角就可以调整元素的大小。

posted @ 2023-10-31 21:31  HopeLive  阅读(201)  评论(0)    收藏  举报