CSS - resize 属性_CSS 菜鸟教程

CSS resize 是一个属性，允许用户根据指定的值调整元素的大小，无论是垂直、水平、两者还是不调整。

Resize 属性在网页上元素的右下角添加一个句柄。此手柄允许用户单击和拖动以更改元素的大小，从而根据自己的喜好使其变大或变小。

本章将介绍 resize 属性的使用。

可能的值

none - 无法使用用户可控的方法来调整元素的大小。这是默认值。
vertical - 用户可以在垂直方向上调整元素的大小。
horizontal - 用户可以在水平方向上调整元素的大小。
both - 用户可以在水平和垂直方向上调整元素的大小。
block - 用户可以在块方向上调整元素的大小（水平或垂直，取决于写入模式和方向值）。
inline - 用户可以在内联方向上调整元素的大小（水平或垂直，取决于写入模式和方向值）。

属性块和内联仅在 Firefox 和 Safari 浏览器上受支持。

适用于

具有可见以外的 overflow（溢出）的元素，以及可选地替换表示图像或视频的元素以及 iframe

语法

resize: none | vertical | horizontal| both;

CSS resize（调整大小） - none 值

以下示例演示了将 CSS 调整大小属性设置为 none 值的使用。在这里，我们看到阻止用户在任何方向上调整元素的大小。resize： none 是默认值。

<html>
<head>
<style>
	 	textarea {
	 	 	 background-color: #e7ef0e;
	 	 	 color: #ee2610;
	 	 	 resize: none;
	 	 	 overflow: auto;
	 	 	 height: 150px;
	 	 	 width: 250px;
	 	}
</style>
</head>
<body>
	 	<textarea>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</textarea>
</body>
</html>

CSS resize（调整大小） - vertical 值

以下示例演示了将 CSS 调整大小属性设置为垂直的用法。在这里，我们看到用户可以通过拖动右下角来垂直调整 <div> 元素的高度。

<html>
<head>
<style>
	 	div {
	 	 	 background-color: #e7ef0e;
	 	 	 color: #ee2610;
	 	 	 resize: vertical;
	 	 	 overflow: auto;
	 	 	 height: 150px;
	 	 	 width: 250px;
	 	}
</style>
</head>
<body>
	 	<h3>Click and drag the bottom-right corner to change the size of an element vertically.</h3>
	 	<div>
	 	<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
	 	</div>
</body>
</html>

CSS resize（调整大小） - horizontal 值

以下示例演示了将 CSS 调整大小属性设置为水平的用法。在这里，我们看到用户可以通过拖动右下角来水平修改 <div> 元素的宽度。

<html>
<head>
<style>
	 	div {
	 	 	 background-color: #e7ef0e;
	 	 	 color: #ee2610;
	 	 	 resize: horizontal;
	 	 	 overflow: auto;
	 	 	 height: 150px;
	 	 	 width: 250px;
	 	}
</style>
</head>
<body>
	 	<h3>Click and drag the bottom-right corner to change the size of an element horizontally.</h3>
	 	<div>
	 	 	 <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
	 	 	 There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
	 	 	 middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the internet.
	 	</div>
</body>
</html>

CSS resize（调整大小） - both 值

以下示例演示了将 CSS 调整大小属性设置为两者的使用。在这里，我们看到用户可以水平和垂直调整元素的大小。

<html>
<head>
<style>
	 	div {
	 	 	 background-color: #e7ef0e;
	 	 	 color: #ee2610;
	 	 	 resize: both;
	 	 	 overflow: auto;
	 	 	 height: 150px;
	 	 	 width: 250px;
	 	}
</style>
</head>
<body>
	 	<h3>Click and drag the bottom-right corner to change the size of an element vertically and horizontally.</h3>
	 	<div>
	 	 	 <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
	 	 	 There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in
	 	 	 some form, by injected humour, or randomised words which don't look even slightly believable. If you are
	 	 	 going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the
	 	 	 middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
	 	</div>
</body>
<html>

CSS resize（调整大小） - block 值

以下示例演示了如何使用 CSS 调整大小属性集以在子元素上继承。在这里，我们看到它将具有与其父元素相同的调整大小时行为。

<html>
<head>
<style>
	 	.my-box1 {
	 	 	 background-color: #e7ef0e;
	 	 	 color: #ee2610;
	 	 	 resize: vertical;
	 	 	 overflow: auto;
	 	 	 height: 150px;
	 	 	 width: 250px;
	 	}
	 	.my-box2 {
	 	 	 resize: inherit;
	 	}
</style>
</head>
<body>
	 	<h3>Click and drag the bottom-right corner to change the size of an element.</h3>
	 	<div class="my-box1">
	 	 	 <div class="my-box2">
	 	 	 	 	<h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
	 	 	 	 	There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.
	 	 	 </div>
	 	</div>
</body>
</html>

CSS resize（调整大小） - inline 元素

可以创建一个可调整大小的 <div> 容器，其中包含可调整大小的 <p>（段落）元素，用户可以在其中单击并拖动右下角以更改容器和段落的大小。以下示例演示了此行为。

<html>
<head>
<style>
	 	.my-box {
	 	 	 background-color: #e7ef0e;
	 	 	 color: #ee2610;
	 	 	 resize: both;
	 	 	 overflow: scroll;
	 	 	 border: 2px solid black;
	 	}
	 	div {
	 	 	 height: 250px;
	 	 	 width: 250px;
	 	}
	 	p {
	 	 	 height: 150px;
	 	 	 width: 150px;
	 	}
</style>
</head>
<body>
	 	<h3>Click and drag the bottom-right corner to change the size of an element.</h3>
	 	<div class="my-box">
	 	 	 <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
	 	 	 <p class="my-box"> There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you ar going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet.</p>
	 	</div>
</body>
</html>

<< CSS - 箭头 CSS - quotes 属性 >>