关于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 属性。

示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div
  6. {
  7. border: 1px solid;
  8. width: 300px;
  9. resize: both;
  10. overflow: auto;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div>通过 resize 属性您可以调整元素在水平和垂直方向的大小</div>
  16. </body>
  17. </html>

运行效果如下图所示:

15105I623-0
图:resize 属性演示

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

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片