【CSS3】-ブロックレベル要素、インライン要素_html/css

ドキュメントフロー

フォームを上から下の行に分割し、各行の要素を左から右に配置する、これがドキュメントフローです。

各非浮動ブロックレベル要素は独自の行を占有し、浮動要素は必要に応じて行の一端で浮動します。現在の行に対応できない場合は、新しい行が作成されてフローティングされます。

インライン要素は、それ自体で行を占有しません。ほとんどすべての要素 (ブロックレベル、インライン、リスト要素を含む) は、サブ要素を配置するためのサブ行を生成できます。

要素がドキュメントフローの外に存在する状況には、フローティング、絶対配置、および固定配置という 3 つの状況があります。しかし、IE では、フローティング要素もドキュメントフローに存在します (これは合理的だと思います><)。

フローティング要素は通常のドキュメントフロースペースを占有しませんが、フローティング要素の配置は通常のドキュメントフローに基づいて行われ、ドキュメントフローから抽出され、可能な限り左または右に移動されます。テキストコンテンツはフローティング要素の周囲に折り返されます。要素が通常のドキュメントフローから抽出されると、ドキュメントフロー内に残っている他の要素はその要素を無視し、元のスペースを埋めます。

フローティングという混乱を招く概念は、ブラウザによる理論の解釈によって引き起こされます。多くの人が IE を標準として使用しているとしか言えませんが、実際はそうではありません。

ドキュメントフローに基づいて、次の配置モードを簡単に理解できます:

相対配置、つまり、ドキュメントフロー内の要素の位置を基準としたオフセット。ただし元の場所はそのままにしておきます。

絶対的な配置、つまりドキュメントフローから完全に外され、position 属性の非静的値を持つ最も近い親要素を基準にしてオフセットされます。

位置を固定しました。つまり、ドキュメントフローから完全に外れ、ビューポートに対してオフセットされました。

いくつか質問があります

インライン要素は 3 つの基本要素の 1 つです。ブロックレベル要素との主な違いは何ですか?

Clear 属性がいつ正しい値を取るかを理解するにはどうすればよいですか? 実験状況は常に理論と矛盾しているようです。

inline 要素とはどういう意味ですか?ブロックレベル要素とは何ですか?

「CSS 決定版ガイド」中国語テキスト表示: ブロックレベル要素ではない表示要素はすべてインライン要素です。そのパフォーマンスの特徴は「列レイアウト」という形式です。ここでの「列レイアウト」とは、その表現形式が常に列で表示されることを意味します。たとえば、インライン要素 border-bottom:1px Solid #000; を設定すると、それが各行で繰り返され、各行の下に細い黒い線が表示されます。ブロックレベル要素の場合、表示される黒い線はブロックの下にのみ表示されます。

p、h1、div などの要素は、多くの場合、ブロックレベル要素と呼ばれます。これらの要素は、強力なコンテンツの一部として表示されます。スパンなどの要素はインライン要素と呼ばれ、その内容は行内、つまり「インラインボックス」に表示されます。 (display=block を使用して、インライン要素をブロック要素に変換できます。display=none は、生成された要素にフレームがまったくなく、要素が表示されず、ドキュメント内のスペースも占有しないことを意味します)

Inline は行内の要素です、インラインでのみ配置できます。ブロックレベルの要素は、ページ上のどこにでも配置できる 4 つの正方形のボックスです。

端的に言うと、インライン要素は単語のようなものであり、ブロックレベルの要素は、特に定義されていない限り、単独の行に表示されます。

段落

、タイトル