From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/css/resize/index.html | 210 ++++++++++++++++++++++++++++++++++ 1 file changed, 210 insertions(+) create mode 100644 files/zh-cn/web/css/resize/index.html (limited to 'files/zh-cn/web/css/resize') diff --git a/files/zh-cn/web/css/resize/index.html b/files/zh-cn/web/css/resize/index.html new file mode 100644 index 0000000000..095c57ec78 --- /dev/null +++ b/files/zh-cn/web/css/resize/index.html @@ -0,0 +1,210 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - resize + - 调整大小 +translation_of: Web/CSS/resize +--- +
{{CSSRef}}
+ +

概述

+ +

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

+ +

{{cssinfo}}

+ +

语法

+ +
/* Keyword values */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Global values */
+resize: inherit;
+resize: initial;
+resize: unset;
+
+ +

取值

+ +
+
none
+
元素不能被用户缩放。
+
both
+
允许用户在水平和垂直方向上调整元素的大小。
+
horizontal
+
允许用户在水平方向上调整元素的大小。
+
vertical
+
允许用户在垂直方向上调整元素的大小。
+
block {{experimental_inline}}
+
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.
+
inline {{experimental_inline}}
+
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
+
+ +
Note: 如果一个block元素的 {{cssxref("overflow")}} 属性被设置成了visible，那么resize属性对该元素无效。
+ +

标准语法

+ +
{{csssyntax}}
+ +

例子

+ +

Disabling resizability of textareas

+ +

CSS

+ +

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

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

HTML

+ +
<textarea class="example">Type some text here.</textarea>
+ +

Result

+ +

{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

+ +

Using resize with arbitrary elements

+ +

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

+ +

CSS

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

HTML

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

Result

+ +

{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}Adds the values block and inline.
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (on {{HTMLElement("textarea")}})1.0{{CompatGeckoDesktop("2.0")}}{{property_prefix("-moz")}}{{CompatNo}}12.13.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible)4.0{{CompatGeckoDesktop("5.0")}}[1]{{CompatNo}}154.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (on {{HTMLElement("textarea")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] resize doesn't have any effect on {{HTMLElement("iframe")}} (cf. {{bug(680823)}})

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf