CSS ドキュメント フロー、ブロック レベルの要素 (ブロック)、およびインライン要素 (インライン) これまでに多くの本や記事を読んできましたが、これは比較的表面的な CSS レイアウトの基礎知識です。オライリーさん、その中で言及されているドキュメント フローの概念に非常に敏感に感じましたが、残念なことに、この本ではドキュメント フローとは何かについて説明されていなかったのかもしれません。しかし、この概念について言及する価値はないと私は考えています。それを理解すると、一連の CSS レイアウト理論が理解しやすくなり、CSS 設計の合理性がわかります。そのため、間違いがある場合は、それを説明するために考えました。 。
書類の流れ
フォームを上から下の行に分割し、各行の要素を左から右に配置します。これがドキュメント フローです。
各非浮動ブロックレベル要素は独自の行を占有し、浮動要素は必要に応じて行の一方の端に浮動します。現在の行に収まらない場合は、新しい行に浮動します。
インライン要素は行を占有しません。ほとんどすべての要素 (ブロック レベル、インライン、リスト要素を含む) は、サブ要素を配置するためのサブ行を生成できます。
要素がドキュメント フロー外に存在する状況には、フローティング、絶対配置、固定配置の 3 つがありますが、IE ではフローティング要素もドキュメント フロー内に存在します (これは合理的だと思います><)。
フローティング要素は通常のドキュメント フロー スペースを占有しません。また、フローティング要素の配置は通常のドキュメント フローに基づいて行われ、ドキュメント フローから抽出され、可能な限り左または右に移動されます。テキスト コンテンツはフローティング要素の周囲に折り返されます。要素が通常のドキュメント フローから抽出されると、ドキュメント フロー内に残っている他の要素はその要素を無視し、元のスペースを埋めます。
フローティングという混乱を招く概念は、ブラウザによる理論の解釈によって引き起こされます。多くの人が IE を標準として使用しているとしか言えませんが、実際はそうではありません。
ドキュメント フローに基づいて、次の配置パターンを簡単に理解できます。
相対的な位置関係、
つまり、要素はドキュメント フロー内の位置に対してオフセットされますが、元のプレースホルダーは保持されます。
絶対的な位置決め、
つまり、ドキュメント フローから完全に分離され、position 属性の非静的値を持つ最も近い親要素に対して相対的にオフセットされます。
固定位置、
つまり、ドキュメント フローから完全に分離され、ビューポートに対してオフセットされます。
次に理解できない質問がいくつかあります。
3 つの基本要素の 1 つとして、インライン要素とブロックレベル要素の主な違いは何ですか?
Clear プロパティがいつ正しい値を取るかをどうやって理解しますか? 実験状況は常に理論と矛盾しているように思えます。