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

推薦する

ページスピードの最適化の概要

インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...

Linux の crontab タスク スケジューリングの簡単な分析

1. スケジュールタスクを作成する命令crontab -eは現在のユーザーの編集インターフェースに入...

VueはTeleportをベースにModalコンポーネントを実装します

目次1. テレポートについて知る2. テレポートの基本的な使い方3. 最初のステップの最適化4. 第...

Webデザイナーの成長体験

<br />まず最初に、私はこのグループの中では完全な新人だということを述べなければなり...

PHP環境構築におけるDockerの柔軟な実装

Docker を使用して、柔軟なオンライン PHP 環境を構築します。場合によっては、他の人がすでに...

ネイティブ Js で実装されたシンプルなシームレス スクロール カルーセルのサンプル コード

シンプルなシームレススクロールカルーセルには多くの抜け穴があり、後から画像を追加するのは非常に不便で...

ハイパーリンクに関するいくつかの質問

ポテトチップスパーティーのこのエピソードに参加して、何人かの友人に会えてとても嬉しいです。思いがけず...

Linuxで大きなファイルを素早くコピーする方法

データをコピーリモートでデータをコピーする場合、通常は rsync コマンドを使用しますが、小さなフ...

QT が MYSQL データベースに接続するための詳細な手順

最初のステップは、対応するデータベースモジュール(sql)をプロジェクトファイル( .pro )に追...

Linux で g++ を使用してプログラムをコンパイルする際の -I (大文字の i)、-L (大文字の l)、-l (小文字の l) の機能の詳細な説明

初心者の Linux ユーザーとして、私は単純なgcc/g++操作を何度も使用してきましたが、少し複...

Linux コマンドにおける Ctrl+z、Ctrl+c、Ctrl+d の違いと使い方

Linux で Ctrl+c、Ctrl+d、Ctrl+z はどういう意味ですか? Ctrl+c と ...

熟練デザイナーの7つの原則(1):フォントデザイン

まあ、あなたはデザインの達人かもしれませんし、あるいはそれは大げさすぎるかもしれませんが、少なくとも...

VUEの基本を理解するのに役立つ記事

目次VUEとはVueのコアプラグインVueルーターヴュークスアクシオス要素UI Vue フロントエン...

MySQLトリガーの概念、原理、使用法の詳細な説明

この記事では、例を使用して、MySQL トリガーの概念、原則、および使用方法を説明します。ご参考まで...

CentOS8 - bash: 文字化けとその解決方法

この状況は通常、中国語言語パックがインストールされていないか、デフォルトの言語設定に問題があるために...