章节
问答
课签
笔记
评论
占位
占位

自由缩放属性resize

为了增强用户体验,CSS3增加了很多新的属性,其中resize就是一个重要的属性,它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止,可以使用overflow属性的任何容器元素。

在此之前,Web设计师为了要实现这样具有拖动效果的UI,使用大量的脚本代码才能实现,这样费时费力,效率极低。

resize属性主要是用来改变元素尺寸大小的,其主要目的是增强用户体验。但使用方法却是极其的简单,先从其语法入手。

resize: none | both | horizontal | vertical | inherit

取值说明:

属性值

取值说明

none

用户不能拖动元素修改尺寸大小。

both

用户可以拖动元素,同时修改元素的宽度和高度

horizontal

用户可以拖动元素,仅可以修改元素的宽度,但不能修改元素的高度。

vertical

用户可以拖动元素,仅可以修改元素的高度,但不能修改元素的宽度。

inherit

继承父元素的resize属性值。

例如:通过resize属性,让文本域可以沿水平方向拖大。代码为:

textarea {
  -webkit-resize: horizontal;
  -moz-resize: horizontal;
  -o-resize: horizontal;
  -ms-resize: horizontal;
  resize: horizontal;
}

任务

在CSS编辑器第2行输入正确代码,让文本域textarea不能水平垂直方向拖动有缩放文本域。

温馨提示:案例的效果与上述描述相符算顺利通关,否则请再学习一遍本节的知识点!
?不会了怎么办
||
1
2
<!doctype html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
textarea{
resize: ;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / qq_慕九州2148706
https://www.runoob.com/cssref/css3-pr-resize.htmldiv 也可以的resize属性指定一个元素是否是由用户调整大小的。注意:resize属性适用于计算其他元素的溢出值是不是"visible"。

最赞回答 / web_雪花
block元素定宽之后都会可以设置overflow属性的

最新回答 / 爱上慕婉清6262634
textarea里面的两个属性值你不清楚啥意思吧,第一个cols规定宽度,第二个rows规定行数,宽度是以字符宽度计算的,高度以行高计算,若是没有设置字符的font-size,则按照浏览器默认字符font-size为准。浏览器默认字符从8-12px不等,行高一般与字符大小相同,然后你的rows设置10行,那文本域最小范围256*160,小于这个不可被缩小

已采纳回答 / BruceZeng
试试这个代码,浏览器要支持CSS3div{resize:both;overflow:auto;}

最赞回答 / 慕斯3035540
似乎好像只对文本域有效   试了一下div没什么用。。。。。

最新回答 / fiona007
浏览器支持:Firefox 4+、Chrome 以及 Safari 支持 resize。

已采纳回答 / fiona007
浏览器支持:Firefox 4+、Chrome 以及 Safari 不支持 resize。WIN10自带的浏览器我记得是IE

最新回答 / 不可触及
高版本浏览器才能支持

+ 我来回答 回答最高可+2积分

+ 我来回答 回答最高可+2积分
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言