CSS中用户拉伸行为相关操作

发布网友发布时间：2024-10-05 04:38

共1个回答

热心网友时间：2024-10-10 14:22

resize

textarea元素右下角的记号并上下左右拉伸，就会发生textarea元素的高度和宽度发生变化了，这个拉伸效果起到的作用就是resize。resize属性参数值比较多，初始值而为none，表示没有拉伸效果。常用来重置textarea元素内置的拉伸行为。both作用是既可以水平方向拉伸，也可以垂直方向拉伸。vertical作用是仅可以垂直方向拉伸，此时鼠标的指针也会变成垂直方向的拉伸样式。horizontal作用是仅可以水平方向拉伸，此时鼠标的指针也会变成水平方向的拉伸样式。block作用是表示沿着块级元素的排列方向拉伸，默认是垂直方向，也可能是水平方向，这主要取决于writing-mode值，这个属性值是后期新增的属性值。inline作用是默认是水平方向，如果使用使用writing-mode属性改成垂直排版，则inline的拉伸方向就会变成垂直方向，和block的属性值比较像。

textarea{resize:none;}

resize属性不支持内联元素，而且如果是块级元素，需要overflow属性的计算值不是visible。当我们设置下面代码不会出现拉伸效果。所以resize属性不是设置了就有效果而是有一些条件。resize属性的元素通过拉伸改变元素的尺寸是通过改变width属性值和height属性值来实现的效果。如果我们想要元素的拉伸的尺寸不是无线的，我们可以通过设置css的这些属性值来进行限制拉伸尺寸min-width、min-height、max-width和max-height。

.wrapper{resize:both;//如果没有设置下面这行代码，不会出现拉伸效果overflow:hidden;}

resize属性的拖拽条和滚动条是同源的，所以就是在自定义滚动条尺寸的时候，resize属性拖拽条的尺寸也会跟着变化。resize属性拖拽条的样式可以使用::-wekit-resizer伪元素进行自定义，比如当我们换成另外的拖拽图标。由于resize属性生成的拖拽区域太小，如果在移动端使用并不是体验太好。

::-webkit-scrollabar{background-image:url(test.png);}

如果我们想要拉伸的元素最小宽度为166px,最大宽度为555px，我们可以这样进行设置：

.wrapper{min-width:166px;max-width:555px;overflow:hidden;resize:both;}