标签：样式 元素 element HTML resize inline block

原文地址 developer.mozilla.org

概述

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

初始值	none
适用元素	elements with overflow other than visible, and optionally replaced elements representing images or videos, and iframes
是否是继承属性	否
适用媒体	visual
计算值	as specified
Animation type	discrete
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;


resize: inherit;
resize: initial;
resize: unset;

取值

none

元素不能被用户缩放。

both

允许用户在水平和垂直方向上调整元素的大小。

horizontal

允许用户在水平方向上调整元素的大小。

vertical

允许用户在垂直方向上调整元素的大小。

block

Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.

inline

Depending on the writing-mode and direction value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.

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

标准语法

none | both | horizontal | vertical | block | inline

例子

Disabling resizability of textareas

CSS

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

textarea.example {
  resize: none; 
}

HTML

<textarea>Type some text here.</textarea>

Result

Using resize with arbitrary elements

You can use the resize property to make any element resizable. In the example below, a resizable <div> box contains a resizable paragraph (<p> element):

CSS

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

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

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

HTML

<div>
  <p>
    This paragraph is resizable, because the CSS resize property is set to 'both' on this
    element.
  </p>
</div>

Result

Specifications

Browser compatibility

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support (on <textarea>)	1.0	4.0 (2.0)-moz	未实现	12.1	3.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible)	4.0	5.0 (5.0)[1]	未实现	15	4.0

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support (on <textarea>)	?	?	?	?	?
On any block-level and replaced element, table cell, and inline block element (unless overflow is visible)	?	?	?	?	?

[1] resize doesn't have any effect on <iframe> (cf. bug 680823)

See also

标签：样式,元素,element,HTML,resize,inline,block
来源： https://www.cnblogs.com/qq3279338858/p/14271110.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。