resize不是已知的css属性？

互联网 20-11-24

resize是已知的css属性。resize是CSS3中新增的一个属性，用于指定一个元素是否是由用户调整大小的；resize属性允许用户通过拖动的方式，来自由缩放元素的尺寸。

该方法适用于所有品牌的电脑。

1) resize : none

当用户不想调整元素的大小时， none值不会应用于resize属性 。也是默认值。

句法：

    Element{         resize:none;     }

例：

<!DOCTYPE html>  <html>  <head>     <style>         p {             border: 3px solid;             padding: 15px;             width: 300px;             resize: none;         }     </style> </head>  <body>     <h1>The resize Property</h1>     <p>         <p>None value doesn’t allow resizing of this p element.</p>     </p> </body>  </html>

输出

在上面的示例中，您无法调整p元素的大小。它是静态的。

2) resize : both

当用户希望其元素在宽度和高度的两侧都可调整大小时，两个值都将应用于resize属性 。

句法：

    Element{         resize:both;     }

例：

<!DOCTYPE html>  <html>  <head>     <style>         p {             border: 3px solid;             padding: 15px;             width: 300px;             resize: both;             overflow: auto;         }     </style> </head>  <body>     <h1>The resize Property</h1>     <p>         <p>click and drag the bottom right corner to resize the height and width of this p element.</p>     </p> </body>  </html>

输出

在上面的示例中，要调整大小，请单击并拖动此p元素的右下角。

3) resize : vertical

当用户要根据需要调整元素的高度时，将垂直值应用于resize属性 。

句法：

    Element{         resize:vertical;     }

例：

<!DOCTYPE html>  <html>  <head>     <style>         p {             border: 3px solid;             padding: 15px;             width: 300px;             resize: vertical;             overflow: auto;         }     </style> </head>  <body>     <h1>The resize Property</h1>     <p>         <p>click and drag the bottom right corner to resize the height of this p element.</p>     </p> </body>  </html>

输出

在上面的示例中，用户可以单击并拖动此p元素的右下角以调整其高度。

4) resize : horizontal

当用户要根据需要调整元素的宽度大小时，将水平值应用于resize属性 。

句法：

    Element{         resize:horizontal;     }

例：

<!DOCTYPE html>  <html>  <head>     <style>         p {             border: 3px solid;             padding: 15px;             width: 300px;             resize: horizontal;             overflow: auto;         }     </style> </head>  <body>     <h1>The resize Property</h1>     <p>         <p>click and drag the bottom right corner to resize the width of this p element.</p>     </p> </body>  </html>

输出