日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 > 编程资源 > 综合教程 >内容正文

综合教程

resize不是已知的css属性

發布時間:2023/12/31 综合教程 32 生活家
生活随笔 收集整理的這篇文章主要介紹了 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元素的右下角以調整其寬度。

更多編程相關知識,請訪問:編程教學!!

總結

以上是生活随笔為你收集整理的resize不是已知的css属性的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。