ホームページ  >  記事  >  ウェブフロントエンド  >  サイズ変更は既知の CSS プロパティではありませんか?

サイズ変更は既知の CSS プロパティではありませんか?

青灯夜游
青灯夜游オリジナル
2020-11-24 14:08:422168ブラウズ

resize は既知の CSS プロパティです。 size は CSS3 の新しい属性で、ユーザーが要素のサイズを変更するかどうかを指定するために使用されます。resize 属性を使用すると、ユーザーはドラッグして要素のサイズを自由に拡大縮小できます。

サイズ変更は既知の CSS プロパティではありませんか?

  • #この方法は、すべてのブランドのコンピューターに適しています。

関連する推奨事項: 「

CSS3 ビデオ チュートリアル

css サイズ変更属性

resize 属性は、ユーザーが要素のサイズを変更するかどうかを指定できます。

Resize は CSS3 の新しい属性で、ユーザーはドラッグして要素のサイズを自由に拡大縮小してユーザー エクスペリエンスを向上させることができます。以前は、これは Javascript で大量のスクリプトを記述することによってのみ実現できましたが、これは時間と労力がかかり、非効率的でした。

サイズ属性 を使用すると、ユーザーのニーズと方向に応じて要素のサイズを変更できます。サイズ変更属性には 4 つの値を指定できます。

構文:

    Element{
        Resize : none|both|vertical|horizontal;
    }
各属性を見てみましょう...


1) サイズ変更: なし

ユーザーが要素

のサイズを変更したくない場合、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 要素のサイズを変更できません。それは静的です。 CSS | resize Property | Example 1

2) サイズ変更: 両方

ユーザーが要素の幅と高さの

両側でサイズ変更可能であることを希望する場合、 ## 両方の値が適用されます。属性

のサイズを変更します。

# 構文:

    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) サイズ変更 : 垂直

CSS | resize Property | Example 2ユーザーが必要に応じて要素の高さを調整したい場合は、垂直方向の値を

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)size :horizo​​ntal

ユーザーが要素の幅 CSS | resize Property | Example 3size

を次のように調整したい場合は、水平方向の値を
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 要素の右下隅をクリックしてドラッグし、幅を調整できます。 プログラミング関連の知識について詳しくは、

プログラミング教育
をご覧ください。 !

以上がサイズ変更は既知の CSS プロパティではありませんか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。