Dotcpp  >  编程教程  >  CSS语法  >  CSS调节元素大小(resize)

CSS调节元素大小(resize)

点击打开在线编译器,边学边练

resize属性是CSS3 UI中的一个属性,允许用户调整元素的尺寸。resize属性是CSS3 UI中的一个属性,允许用户调整元素的尺寸。

resize: none|both|horizontal|vertical;

语法说明如下:

● none:用户无法调整元素的尺寸;

● both:用户可调整元素的高度和宽度;

● horizontal:用户可调整元素的宽度;

● vertical:用户可调整元素的高度。

在使用 resize 属性时还需要注意以下几点:

● 单独设置 resize 属性是无效的,resize 属性需要与 overflow 属性结合使用才有效,并且 overflow 属性的值需要设置为 auto、hidden 或 scroll;

● 并不是所有的元素都可以设置 resize 属性,比如 img 和 table 属性就没办法使用 resize 属性。

(resize)调节元素大小

1. 调整大小:无 resize : none

举例:

<!DOCTYPE html>
 
<html>
 
<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: none;
        }
    </style>
</head>
 
<body>
    <h1>The resize Property</h1>
    <div>
        <p>resize : none</p>
    </div>
</body>
 
</html>

运行结果:

 resize : none

2. 调整大小:两者resize : both

举例:

<!DOCTYPE html>
 
<html>
 
<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: both;
            overflow: auto;
        }
    </style>
</head>
 
<body>
    <h1>The resize Property</h1>
    <div>
        <p>resize : both</p>
    </div>
</body>
 
</html>

运行结果:

resize : both

3. 调整大小:水平resize : horizontal

举例:

<!DOCTYPE html>
 
<html>
 
<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: horizontal;
            overflow: auto;
        }
    </style>
</head>
 
<body>
    <h1>The resize Property</h1>
    <div>
        <p>resize : horizontal</p>
    </div>
</body>
 
</html>

运行结果:

resize : horizontal

4. 调整大小:垂直resize : vertical

举例:

<!DOCTYPE html>
 
<html>
 
<head>
    <style>
        div {
            border: 3px solid;
            padding: 15px;
            width: 300px;
            resize: vertical;
            overflow: auto;
        }
    </style>
</head>
 
<body>
    <h1>The resize Property</h1>
    <div>
        <p>resize : vertical</p>
    </div>
</body>
 
</html>

运行结果:

resize : vertical


本文固定URL:https://www.dotcpp.com/course/1174

CSS教程
第一章 CSS简介
第二章 CSS语法
Dotcpp在线编译      (登录可减少运行等待时间)