resize - 调整大小 - css 用户界面

乐乐2年前 (2023-11-21)阅读数 33#技术干货

文章标签元素

resize

版本：CSS3

resize CSS 属性允许你控制一个元素的可调整大小性。

示例

/* keyword values */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

/* global values */
resize: inherit;
resize: initial;
resize: unset;

浏览器支持


IE浏览器不支持`resize`，其余浏览器都支持`resize`

语法:

resize：none | both | horizontal | vertical

取值

none：元素不能被用户缩放。
both：允许用户在水平和垂直方向上调整元素的大小。
horizontal：允许用户在水平方向上调整元素的大小。
vertical：允许用户在垂直方向上调整元素的大小。

Note:如果一个block元素的overflow属性被设置成了visible，那么resize属性对该元素无效。

例子

元素在Gecko2.0(Firefox 4)中默认是可以进行缩放的。你可以通过下面的CSS代码来重写这种行为：

resize - 调整大小 - css 用户界面

textarea.example {
 resize: none; /* disables resizability */
}

//html
type some text here.

可以使用resize属性使任何元素都可以调整大小。

//CSS

.resizable {
  resize: both;
  overflow: scroll;
  border: 1px solid black;
}

div {
  height: 300px;
  width: 300px;
}

p {
  height: 200px;
  width: 200px;
}

//html


  
    this paragraph is resizable, because the css resize property is set to 'both' on this
    element.

This paragraph is resizable, because the CSS resize property is set to 'both' on this element.

.demo1 .resizable{resize: both; overflow: scroll; border: 1px solid black;}.demo1 div{height: 300px; width: 300px;}.demo1 p{height: 200px; width: 200px;}

内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)