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

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 プロパティを設定しても機能しない

推薦する

MySQL クエリの重複データ (重複データを削除し、ID が最も小さいデータのみを保持します)

開発の背景:最近、私はバッチ データを MySQL データベースにインポートする機能に取り組んでいま...

CSS を使用して正方形の div を実装する 2 つの方法

目標: 辺の長さが等しい正方形を作成する方法 1: 単位 vw を使用する (ps これが最も簡単な...

mysql の認証、起動、およびサービスの起動のための一般的なコマンド

1. 4つの起動方法: 1.mysqld MySQL サーバーを起動します: ./mysqld --...

HTML 描画ユーザー登録ページ

この記事では、HTML描画ユーザー登録ページの具体的な実装コードを参考までに共有します。具体的な内容...

HTML入力ドロップダウンメニューを実装する方法

コードをコピーコードは次のとおりです。 <html> <ヘッド> <m...

Linux デスクトップ用に Openbox を設定する方法 (推奨)

この記事は、「24 Days of Linux Desktop」の特別シリーズの一部です。 Open...

Typescriptの基本構文13個を共有する

目次1. Tsとは何か2. 基本的な文法1. プリミティブデータ型を宣言する2. オブジェクト型を宣...

React+Typescriptはカウントダウンフックメソッドを実装します

まず、setIntervalはフックとしてカプセル化されます👇 'react' から...

最も完全な 50 の MySQL データベース クエリ演習

このデータベース クエリ ステートメントは、インターネット上の 50 個のデータベース クエリ練習問...

Tomcatの起動が遅い問題を素早く解決、超簡単

今日、私はクラスメートが問題を解決するのを手伝いました - Tomcat の起動が非常に遅く、約 5...

Dockerコンテナのログ処理の詳細な説明

Docker には多くのログ プラグインがあります。デフォルトでは json-file を使用します...

MySQL からエクスポートされた scv ファイル内の文字化けやジャンプ行の問題をすばやく解決します

仕事上の理由により、完全なオンライン化(​​つまり、すべてのデータがオンラインで完了し、インポートや...

WeChatアプレットの手動および自動追跡の実装の詳細説明(Taro)

どの企業もユーザーベースを拡大したいのであれば、ユーザーの操作データを収集・分析する必要があり、その...

ウェブページの再設計の7つの主要要素 ウェブページの再設計の7つの主要要素を共有する

Shopify Plus は、私たちが設立した e コマース プラットフォームのエンタープライズ バ...

MySQL 8.0.18 ハッシュ結合は左/右結合をサポートしていません 左と右の結合の問題

MySQL 8.0.18 では、インデックスが作成されていないフィールドに適用でき、等価値の関連付け...