CSS属性のデフォルト値width: autoとwidth: 100%の違いの詳細な説明

幅: 自動

子要素（コンテンツ+パディング+境界線+余白を含む）は、親要素のコンテンツ領域全体を埋めます。
サブ要素にマージン、境界線、またはパディングがある場合、サブ要素のコンテンツ領域に対応する幅の値が減算されます。
親要素のコンテンツ = 子要素 (コンテンツ + パディング + 境界線 + 余白)

幅: 100%

子要素のコンテンツ領域を親要素のコンテンツ領域に強制的に埋める
子要素にマージン、境界線、またはパディングがある場合、子要素のコンテンツ領域の幅は変更されませんが、親ボックスからオーバーフローし、元の値が維持されます。
親要素の内容 = 子要素の内容

1 つの例は千の言葉に匹敵します:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>ドキュメント</title>
    <スタイル タイプ="text/css">
        * {
            マージン: 0;パディング: 0;
        }
        体 {
            背景: #dcdcdc;
        }
        。箱 {
            幅: 400ピクセル;
            境界線: 3px 実線の赤;
            パディング: 0 50px;
        }
        .box1 {
            幅: 自動;
            高さ: 100px;
            背景: ピンク;
            パディング: 0 50px;
            マージン: 0 50px;
            境界線の幅: 0 50px;
            境界線のスタイル: solid;
            境界線の色: 緑;
        }
        .box2 {
            幅: 100%;
            高さ: 100px;
            背景：ゴールド;
            パディング: 0 50px;
            マージン: 0 50px;
            境界線の幅: 0 50px;
            境界線のスタイル: solid;
            境界線の色: 緑;
        }
        .box3 {
            幅: 100px;高さ: 100px;背景: オレンジ;
        }
        .box4 {
            フロート: 左;
            幅: 50px;高さ: 50px;背景: ピンク;
        }
    </スタイル>
</head>
<本文>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</本文>
</html>

width:auto

width:100%

注: 画像のサブ幅はサブコンテンツに変更されます

CSS 属性の幅のデフォルト値である width: auto と width: 100% の違いについての詳細説明はこれで終わりです。CSS の width: auto と width: 100% に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQL でテーブルデータを削除した後もディスク領域がまだ占有されているのはなぜですか?

>>: Web デザインでフラッシュオーバーレイポップアップレイヤーの z-index プロパティを設定しても機能しない