css3におけるresize属性の役割を詳しく解説（コード付き）-htmlチュートリアル-php.cn

css3におけるresize属性の役割を詳しく解説（コード付き）

藏色散人

リリース： 2018-11-05 09:35:05

オリジナル

3733 人が閲覧しました

この記事では、css3 の resize 属性の役割についての詳しい説明 を中心に紹介します。

Web ページをデザインするときは、ユーザーエクスペリエンスを考慮する必要があります。 CSS が Web ページのスタイルとレイアウトを制御するために使用されることは誰もが知っています。 CSS3 は最新の CSS 標準です。

CSS3 では、新しいサイズ変更属性など、ユーザーエクスペリエンスを大幅に向上させる新しい属性がいくつかあります。

おすすめの参考関連ビデオチュートリアル: 「CSS3 チュートリアル」

以下では、css3 の resize 属性について、具体的なコード例とともに詳しく紹介します。効果＃＃＃。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css3中resize属性的用法示例</title>
    <style>
        div
        {
            border:3px solid #ff3844;
            padding:10px 20px;
            width:200px;
            resize:both;
            overflow:auto;
        }
    </style>
</head>
<body>
<div>css3中resize属性的作用：能够规定用户是否可以自由调整元素的尺寸！</div>
</body>
</html>

ログイン後にコピー

ブラウザ経由でアクセスすると、最終的な効果は次のようになります:

css3におけるresize属性の役割を詳しく解説（コード付き）

上記のコードをテストのためにローカルに直接コピーして貼り付けることができます。 div 属性にsizeを追加し、値を両方に設定します。

マウスを右下隅にドラッグすると、境界線要素とテキスト要素が水平方向または垂直方向に自由に拡大縮小でき、それに応じてテキストフィールドのサイズを変更できることがわかります。私たちの要件に。これは、resize 属性を使用して要素のサイズを変更できることも示しています。

同時に、この div に overflow 属性を追加しないと、resize 属性があっても効果がなくなることに注意してください。ローカルでテストできます。したがって、サイズ変更属性は、オーバーフロー属性とサイズ変更属性が同時に設定されている場合にのみ効果があります。もちろん、オーバーフロー値は自動、非表示、またはスクロールにすることができます。

以下は、サイズ変更のオプション値の概要です。

# none を設定すると、ユーザーはサイズを調整できなくなります。要素。両方を設定すると、ユーザーは要素の高さと幅を調整できるようになります。 # 水平方向の設定は、ユーザーが要素の幅を調整できることを意味します。垂直方向に設定すると、ユーザーは要素の高さを調整できるようになります。

この記事は、css3 の

resize 属性の役割について詳しく説明したもので、非常にシンプルでわかりやすいと思います。困っている友達の役に立ちます！

以上がcss3におけるresize属性の役割を詳しく解説（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。