resize不是已知的css属性?

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

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

相关推荐:《CSS3视频教程》

css resize属性

resize属性可以指定一个元素是否是由用户调整大小的。

resize是CSS3中新增的一个属性,它允许用户通过拖动的方式,来自由缩放元素的尺寸,用以增强用户体验。这在以前只能通过Javascript 编写大量脚本来实现,费时费力,效率低下。

resize属性可以用于根据用户需要以及在哪个方向上调整元素的大小。 resize属性可以采用4个值。

句法:

    Element{
        Resize : none|both|vertical|horizontal;
    }

让我们看一下每个属性…

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>

输出

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

更多编程相关知识,请访问:编程教学!!

更多关于云服务器域名注册虚拟主机的问题,请访问西部数码官网:www.west.cn

赞(0)
声明:本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-62778877-8306;邮箱:fanjiao@west.cn。本站原创内容未经允许不得转载,或转载时需注明出处:西部数码知识库 » resize不是已知的css属性?

© 2010-2024   西部数码知识库   西部数码旗下IDC知识库,为您提供域名注册,域名交易,虚拟主机,云服务器,云计算,网站建设等领域专业的知识介绍!

川B1.B2-20080058号

wordpress template system recommended themebetter

请求次数:59 次,加载用时:1.493 秒,内存占用:8.55 MB

登录

找回密码

注册