サイズ変更は既知の CSS プロパティではありませんか?-CSSチュートリアル-php.cn

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

青灯夜游

リリース： 2020-11-24 14:08:42

オリジナル

2197 人が閲覧しました

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

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

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

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 :horizontal

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

を次のように調整したい場合は、水平方向の値を 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 サイトの他の関連記事を参照してください。