ページ (ドキュメント ツリー) は 1 つずつボックスで構成されていると想像できます。ビジュアル フォーマット モデル (ビジュアル フォーマット モデル) は、これらのボックスをアクセスにレイアウトする一連のルールです。読者はそれを見ます。
ボックスのサイズとタイプ
配置スキーム (通常のフロー、フローティングおよび絶対配置)
ドキュメントツリー内の要素間の関係
外部情報 (ビューポートのサイズ、画像の固有のサイズなど)
以下では、レイアウトに影響を与えるこれらの要素について、ターゲットを絞った方法で説明します。まず、いくつかの概念を説明します~
CSS が前提としているもの。要素ボックスの中央にコンテンツ領域があり、コンテンツ領域の外側にパディング、ボーダー、マージンが含まれる処理に使用されるモデルです。これらのコンテンツ
各要素は包含ブロックに対して相対的に配置されます。
<body> <div><p>p的包含块是div</p><div> //div的包含块是body</body>
置換要素は次のとおりです。要素のタグと属性に基づいてブラウザによって決定されます。
CSS content 属性を通じて挿入されたオブジェクトは、匿名の置換可能要素と呼ばれます
要素のコンテンツがドキュメントに含まれている場合、それは非置換要素です
非置換要素のすべてのルールは、置換された要素にも適用されます例外が 1 つだけあり、幅が auto の場合、要素の高さと幅はコンテンツの固有の高さと幅になります。たとえば、img は画像の元のサイズです。
