CSS - 调整大小

上一页
下一页

CSS 的 resize 属性允许用户调整元素的大小，可以是垂直方向、水平方向、两个方向或都不调整，具体取决于指定的值。

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

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

可能的值

  • none - 不允许用户调整元素的大小。这是默认值。

  • vertical - 用户可以垂直调整元素的大小。

  • horizontal - 用户可以水平调整元素的大小。

  • both - 用户可以水平和垂直调整元素的大小。

  • block - 用户可以根据书写模式和方向值在块方向（水平或垂直）调整元素的大小。

  • inline - 用户可以根据书写模式和方向值在内联方向（水平或垂直）调整元素的大小。

block 和 inline 属性仅在 Firefox 和 Safari 浏览器中受支持。

应用于

溢出（overflow）属性不为 visible 的元素，以及可选地表示图像或视频的替换元素和 iframe。

语法

resize: none | vertical | horizontal| both;

CSS resize - none 值

以下示例演示了将 CSS resize 属性设置为 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 resize 属性设置为 vertical 的使用。在这里，我们看到用户可以通过拖动右下角来垂直调整 <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 resize 属性设置为 horizontal 的使用。在这里，我们看到用户可以通过拖动右下角来水平调整 <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 resize 属性设置为 both 的使用。在这里，我们看到用户可以水平和垂直调整元素的大小。

<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 - inherit 值

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

<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 - 任意元素

可以创建一个可调整大小的 <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>
打印页面
上一页
下一页
广告