CSSの幅と高さのデフォルト値の詳細な説明：autoと％

結論は

幅の%: 包含ブロック（親要素）の幅に基づいて、親の制限を超える幅のパーセンテージを定義します。
幅は自動: 親によってラップされるようにします
高さの%: それを含むブロックレベルオブジェクトの高さのパーセンテージに基づいて、親の制限を超えます。
高さ自動: 親によってラップされるようにします

場合

必ずコードをコピーして再度実行し、親によってラップされ、親の制限を突破する方法を数分間体験してください。

幅ケース

<!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;
            境界線の色: 緑;
        }
    </スタイル>
</head>
<本文>
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>
</本文>
</html>

高さケース

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

CSS の幅と高さのデフォルト値、auto と % の場合についての記事はこれで終わりです。より関連性の高い CSS の幅と高さのデフォルト値については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: MySQLは数百万のシミュレーションデータ操作コードを自動的に挿入します

>>: Avue でカスタム検索バーを実装し、検索イベントをクリアする実践