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

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 でカスタム検索バーを実装し、検索イベントをクリアする実践

推薦する

Linux 上の MySQL 5.7 でパスワードを忘れる問題を解決する

1. 問題Linux 上の mysql5.7 のパスワードを忘れました2. 解決策• ステップ 1:...

Linux 面接で最もよく聞かれる 10 の質問のまとめ

序文Linux システムの運用および保守エンジニア職の面接を受ける場合は、次の 10 個の最も一般的...

Vue+express+Socketでチャット機能を実現

この記事では、チャット機能を実現するためのVue+express+Socketの具体的なコードを参考...

HTML をホームページとして設定し、お気に入りに追加_Powernode Java Academy

IE ブラウザで「ホームページとして設定」および「お気に入りに追加」機能を実装する方法解決:指定さ...

Redux Toolkit で Redux を簡素化する方法

目次Redux Toolkitが解決する問題何が含まれていますか? Redux Toolkit AP...

Vue のフィルターウィジェットの詳細な使用方法

この記事では、参考までにVue More Filter Itemウィジェットの実装方法を例として紹介...

Kubernetes YAMLファイルの使用

目次01 YAMLファイルの概要YAML---キー値型YAML---リスト型02 K8Sにおけるマス...

Docker イメージの最適化 (1.16GB から 22.4MB)

目次最適化の第一歩: 軽量ベースイメージの使用第2段階の最適化:多段階構築Docker は、ソフトウ...

Tomcat 例外の解決方法 (リクエスト ターゲットに無効な文字が見つかりました。有効な文字は RFC 7230 および RFC 3986 で定義されています)

1. シナリオ表示Tomcat ログに次の例外情報が時々報告されます。何が起こっているのでしょうか...

Linux で大きなファイルの内容を消去または削除する 5 つの方法

Linux ターミナルでファイルを操作しているときに、Linux コマンドライン エディターでファイ...

MYSQL ストアドプロシージャと関数の簡単な記述

ストアドプロシージャとは簡単に言えば、これは強力で、JAVA 言語のメソッドに似た比較的複雑な論理関...

Nginx 設定ファイルの詳細な説明と最適化の提案ガイド

目次1. 概要2. nginx.conf 1) 設定ファイルの場所2) ワーカープロセス3) イベン...

実用的な MySQL + PostgreSQL バッチ挿入更新 insertOrUpdate

目次1. 百度百科事典1. MySQL 2. PostgreSQL 3. MySQL に対する Po...

JS で async と await を使用する方法

目次1. 非同期2. 待つ: 3. 包括的なアプリケーション1. 非同期async 、非同期コードが...

js における関数のネストとクロージャの詳細

目次1. 範囲2. 関数の戻り値3. 関数のネスト4. 終了5. クロージャの実用的応用1. 内部変...