css3属性resize用户可以手动跳整元素大小

高桥靓仔

于 2021-01-15 17:21:40 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_45221036/article/details/112679614

本文介绍了CSS3中的resize属性，如何允许用户调整元素大小，并强调了与overflow属性的配合使用。通过实例演示了如何在HTML中设置并观察其效果。

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

css3属性resize用户可以手动跳整元素大小

resize属性指定一个元素是否是由用户调整大小的。

**注意：**resize属性适用于计算其他元素的溢出值是不是"visible"。

默认值：	none
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.resize=“both”

resize: none|both|horizontal|vertical

值	描述
none	用户无法调整元素的尺寸。
both	用户可调整元素的高度和宽度。
horizontal	用户可调整元素的宽度。
vertical	用户可调整元素的高度。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>resize用户可以手动跳整元素大小</title>
<style> 
div
{
	border:2px solid;
	padding:10px 40px; 
	width:300px;
	resize:both;
	overflow:auto;
}
</style>
</head>
<body>

<div>调整属性指定一个元素是否由用户可调整大小的。</div>

</body>
</html>

亲测：resize属性和overflow:auto|hidden|scroll|overlay配合才可以生效。