CSS 调整元素大小

CSS resize 是一个允许用户根据指定的值调整元素大小（垂直方向、水平方向、两者方向或不调整）的属性。

在网页上，resize属性会在元素的右下角添加一个大小调整的手柄。用户可以点击并拖动此手柄来改变元素的大小，根据他们的喜好将其变大或变小。

CSS resize属性

本章将介绍CSS resize 属性的使用，它可以取以下值之一−

none - 不允许用户通过可调整大小的方法来调整元素的大小。这是默认值。
vertical - 用户可以在垂直方向上调整元素的大小。
horizontal - 用户可以在水平方向上调整元素的大小。
both - 用户可以在水平和垂直方向上同时调整元素的大小。
block - 用户可以按照块状方向调整元素的大小（水平或垂直方向，取决于writing-mode和direction的值）。
inline - 用户可以按照内联方向调整元素的大小（水平或垂直方向，取决于writing-mode和direction的值）。

只有Firefox和Safari浏览器支持block和inline属性。

CSS resize – 示例

尝试选择不同的CSS resize 属性值，然后调整框的大小以查看效果。

禁用文本框的大小调整的CSS

下面的示例演示了将CSS resize 属性设置为 none 值的用法。用户被阻止以任何方向调整元素的大小。resize: none是默认值。

<html>
<head>
<style>
   textarea {
      resize: none;
      background-color: #e7ef0e; 
      overflow: auto; 
      height: 100px; 
      width: 600px;
   }
</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垂直调整元素大小

以下示例演示了使用CSS的resize属性设置为vertical的方法。在这里，我们可以看到用户可以通过拖动右下角来垂直调整

元素的高度。

<html>
<head>
<style>
   div {
      resize: vertical;
      background-color: #e7ef0e; 
      overflow: auto; 
      height: 100px; 
      width: 600px;
   }
</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>
   <p>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.</p>
   </div>
</body>
</html>

元素水平调整大小的CSS

以下示例演示了使用CSS的 resize 属性来设置为 horizontal 。在这里，我们可以看到用户允许通过拖动右下角来水平调整

元素的宽度。

<html>
<head>
<style>
   div {
      resize: horizontal;
      background-color: #e7ef0e;
      overflow: auto;
      height: 150px;
      width: 550px;
   }
</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>
      <p>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.</p>
   </div>
</body>
</html>

CSS水平和垂直调整元素大小

以下示例演示了使用CSS resize 属性设置为 both 的用法。在此示例中，用户可以水平和垂直地调整元素的大小。

<html>
<head>
<style>
   div {
      resize: both;
      background-color: #e7ef0e;
      overflow: auto;
      height: 150px;
      width: 550px;
   }
</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>
      <p>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.</p>
   </div>
</body>
<html>

CSS调整元素继承可调整性

下面的示例演示了在子元素上使用CSS的 resize 属性设置为 inherit 。在这里，我们可以看到它将具有与其父元素相同的调整大小行为。

<html>
<head>
<style>
   .box1 {
      resize: horizontal;
      background-color: #e7ef0e;
      overflow: auto;
      height: 250px;
      width: 550px;
   }
   .box2 {
      resize: inherit;
      background-color: #eee;
      height: 150px;
      width: 250px;
      overflow: scroll;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element.</h3>
   <div class="box1">
      <p>This is parent box which can be resized horizontally.</p>
      <div class="box2">
         <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
         <p>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.</p>
      </div>
   </div>
</body>
</html>

CSS调整任意元素大小

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

<html>
<head>
<style>
   .box {
      resize: both;
      background-color: #e7ef0e;
      overflow: scroll;
      border: 2px solid black;
   }
   div {
      height: 250px;
      width: 550px;
   }
   p {
      height: 150px;
      width: 250px;
   }
</style>
</head>
<body>
   <h3>Click and drag the bottom-right corner to change the size of an element.</h3>
   <div class="box">
      <h2 style="color: #0f5e02; text-align: center;">Tutorialspoint</h2>
      <p class="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>