CSS ドキュメント フローとブロック レベル要素 (ブロック) とインライン要素 (インライン) 私はこれまでに多くの本や記事を読んできましたが、それは比較的表面的なものでした。 Reilly の『The Definitive Guide to CSS』では、その中で言及されているドキュメント フローの概念に非常に敏感に感じましたが、残念なことに、この本ではドキュメント フローとは何かについて説明されていなかったのかもしれません。しかし、この概念を理解すると、一連の CSS レイアウト理論が理解しやすくなり、私の推測と実験に基づいてこのようなステートメントを思いつきました。エラーがあっても、それはまったく正常です。
ドキュメント フローはフォームを上から下に行に分割し、各行の要素を左から右に配置します。これがドキュメント フローです。
各非浮動ブロックレベル要素は独自の行を占有し、浮動要素は必要に応じて行の一方の端に浮動します。現在の行に収まらない場合は、新しい行に浮動します。
インライン要素は行を占有しません。ほとんどすべての要素 (ブロック レベル、インライン、リスト要素を含む) は、サブ要素を配置するためのサブ行を生成できます。
要素がドキュメント フロー外に存在する状況には、フローティング、絶対配置、固定配置の 3 つがありますが、IE ではフローティング要素もドキュメント フロー内に存在します (これは合理的だと思います><)。
フローティング要素は通常のドキュメント フロー スペースを占有しません。また、フローティング要素の配置は通常のドキュメント フローに基づいて行われ、ドキュメント フローから抽出され、可能な限り左または右に移動されます。テキスト コンテンツはフローティング要素の周囲に折り返されます。要素が通常のドキュメント フローから抽出されると、ドキュメント フロー内に残っている他の要素はその要素を無視し、元のスペースを埋めます。
フローティングという混乱を招く概念は、ブラウザによる理論の解釈によって引き起こされます。多くの人が IE を標準として使用しているとしか言えませんが、実際はそうではありません。
ドキュメント フローに基づいて、次の配置パターンを簡単に理解できます。
相対位置、つまりドキュメント フロー内の要素の位置を基準としたオフセットですが、元のプレースホルダーは保持されます。
絶対配置、つまりドキュメント フローから完全に外れたオフセットと、position 属性の非静的値を持つ最も近い親要素を基準とした固定配置。絶対配置、つまりドキュメント フローから完全に外れた、相対的なオフセット。ビューポートについて
はまだ理解していません
。1. 3 つの基本要素の 1 つとして、インライン要素とブロックレベル要素の主な違いは何ですか?
2. Clear 属性が正しい値を取得するときはどうやって理解しますか? 実験状況は理論と常に矛盾しているように思えますが、
これは何を意味しますか?ブロックレベル要素とは何ですか。
『CSS 決定版ガイド』 中国語のテキストは次のように示しています。 ブロックレベル要素ではない可視要素はすべてインライン要素です。そのパフォーマンスの特徴は「列レイアウト」という形式です。ここでの「列レイアウト」とは、その表現形式が常に列で表示されることを意味します。たとえば、インライン要素 border-bottom:1px Solid #000; を設定すると、それが各行で繰り返され、各行の下に細い黒い線が表示されます。ブロックレベル要素の場合、表示される黒い線はブロックの下にのみ表示されます。
p、h1、div などの要素はブロック レベル要素と呼ばれることが多く、これらの要素はコンテンツのブロックとして表示されます。Strong やspan などの要素はインライン要素と呼ばれ、そのコンテンツは行内に表示されます。 、「インラインボックス」。 (display=block を使用して、インライン要素をブロック要素に変換できます。display=none は、生成された要素にフレームがまったくなく、要素が表示されず、ドキュメント内のスペースも占有しないことを意味します)
A: インライン要素は行内の要素であり、行内にのみ配置できます。ブロックレベルの要素は単なる 4 つの正方形のボックスであり、ページ上のどこにでも配置できます。
B: 率直に言うと、インライン要素は単語のようなもので、ブロックレベルの要素は、特に定義されていない場合は単独の行に表示されます。
C: 段落 <p>、タイトル <h1><h2>...、リスト、<ul><ol><li>、テーブル <table>、フォーム <form>、DIV<div などの一般的なブロック レベルの要素> および BODY <body> およびその他の要素。インライン要素には、フォーム要素 <input>、ハイパーリンク <a>、画像 <img>、<span> などがあります。
D: ブロックレベル要素の注目すべき特徴は、各ブロックレベル要素が新しい行で表示を開始し、後続の要素も新しい行に表示する必要があることです。
E: <span> は CSS 定義のインライン要素ですが、<div> はブロックレベルの要素です。
CSSを学習したことがある人ならすぐに理解できると思います。しかし、初心者にとっては理解するのは簡単ではないので、主に初心者にもっと親しんでもらいたいと思っています！
コンテナという単語を使用すると、その存在と目的が視覚的に理解しやすくなります。インライン要素は小さなコンテナに相当し、<div> は大きなコンテナに相当します。もちろん、小さなコンテナを大きなコンテナに配置することもできます。 <span>このように、大きな容器に水を入れたいというイメージが頭の中に浮かぶかもしれません。しかし、インクも入れたい場合はどうすればよいでしょうか?とても簡単です。小さな容器を取り出し、インクを入れて大きな容器のきれいな水に入れます。
簡単な実践例を示しましょう。たとえば、<div>私は CSS が大好きです - 52CSS.com</div>
CSS を使用して文字 c のスタイルを設定したいので、<span> を使用できるようにします。
<div>CSS が大好きです - <span>52CSS.com</span> W3C 標準</div>
ブロック要素は通常、他の要素のコンテナ要素です。ブロック要素は通常、インライン要素と他のブロック要素を収容できます。「フォーム」ブロック要素は次のとおりです。非常に特殊で、他のブロック要素を保持するためにのみ使用できます。
CSS を使用しないと、ブロック要素は一度に 1 行ずつ配置されます。 CSS を使用すると、この HTML のデフォルトのレイアウト モードを変更し、必要な場所にブロック要素を配置できます。愚かにも毎回新しい行を始めるのではなく。 table タグもブロック要素の一種であることに注意してください。Table ベースのレイアウトと CSS ベースのレイアウトは、これら 2 つのレイアウトを一般ユーザー (視覚障害者、視覚障害者などを除く) の観点から見たものです。ページの読み込み速度の違い以外に違いはありません。ただし、一般のユーザーが誤って「ページのソース コードを表示」ボタンをクリックした場合、この 2 つの違いは非常に大きくなります。優れた再構築コンセプトに基づいて設計された CSS レイアウト ページのソース コードにより、少なくとも Web 開発の経験のない一般ユーザーでもコンテンツをすぐに理解できるようになります。この観点から、CSS レイアウト コードはより優れた審美性を備えている必要があります。
ブロック コンテナー要素 div をボックスとして考えることができます。クリッピングを使った経験がある場合は、理解しやすいでしょう。まず、さまざまな新聞や雑誌から必要な記事を切り出します。カットされたコンテンツのそれぞれがブロックです。次に、レイアウトの意図に従って、これらの紙を新しい白紙に貼り付けます。これにより、独自の要約が作成されます。テクノロジーの拡張として、Web レイアウト設計も同じパターンに従います。 .インライン
要素は通常、セマンティック レベルの基本要素に基づいています。インライン要素はテキストまたはその他のインライン要素のみを保持できます。共通のインライン要素は「a」です。
ブロック要素(block element)とインライン要素(inline element)は、HTML仕様における概念です。ブロック要素とインライン要素の基本的な違いは、ブロック要素は通常新しい行で始まることです。 CSS 制御を追加すると、このブロック要素とインライン要素の属性の違いは違いになりません。例えば、inline要素のciteにdisplay:blockのような属性を追加することで、毎回改行するという属性も持たせることができます。
可変要素の基本概念は、要素がブロック要素であるかインライン要素であるかをコンテキストに基づいて判断する必要があるということです。変数要素は、引き続き上記の 2 つの要素カテゴリに属します。コンテキストによってそのカテゴリが決定されると、ブロック要素またはインライン要素の規則に従う必要があります。大まかな要素の分類については全文を参照してください。
インライン要素の中国語名については、インライン要素、インライン要素、インライン要素、インライン要素などさまざまな種類があります。基本的に統一した訳はなく、好きなように呼んでください。さらに、インライン要素について話すときは、display:inline と呼ばれる表示属性を思い浮かべます。この属性は、IE の二重浮動境界線の問題を解決できます。
ブロック要素
* address - アドレス * blockquote - ブロック参照 * center - アラインメントブロック * dir - ディレクトリリスト * div - 一般的に使用されるブロックレベル、CSS レイアウトのメインラベル * dl - 定義リスト * フィールドセット - フォームコントロールグループ * フォーム - インタラクションフォーム* h1 - 見出し * h2 - サブタイトル * h3 - レベル 3 の見出し * h4 - レベル 4 の見出し * h5 - レベル 5 の見出し * h6 - レベル 6 の見出し * hr - 水平分割線 * isindex - 入力プロンプト
* menu - メニュー リスト * noframes - フレームのオプションのコンテンツ (このブロックのコンテンツはフレームをサポートしていないブラウザーに表示されます) * noscript - オプションのスクリプトのコンテンツ (このコンテンツはスクリプトをサポートしていないブラウザーに表示されます)
* ol - ソートされたフォーム * p - 段落 * 事前にフォーマットされたテキスト * table - テーブル * ul - ソートされていないリスト
inline 要素 (インライン要素)
* a - アンカーポイント * abbr - 略語 * 頭字語 - 最初の単語 * b - 太字 (推奨されません)
* bdo - 双方向オーバーライド
* big - 大きなフォント * br - 改行 * cite - 引用 * code - コンピューターコード (ソースコードを引用する場合に必要)
* dfn - フィールドを定義します。 * em - 強調します。 * font - フォント設定 (非推奨)
* i - イタリック体 * img - ピクチャ * input - 入力ボックス * kbd - キーボード テキストの定義 * label - テーブル ラベル * q - 短い引用符 * s - 下線 (推奨されません)
* samp - サンプル コンピューター コードを定義します * select - 項目の選択 * small - 小さいフォント テキスト * span - 一般的に使用されるインライン コンテナー、テキスト内のブロックを定義します * ストライク - 下線 * 強 - 太字の強調 * sub - 下付き文字 * sup - 上付き文字 * textarea -複数行のテキスト入力ボックス * tt - テレタイプ テキスト * u - 下線 * var - 変数の定義 変数
要素 変数要素は、コンテキストに従って要素がブロック要素であるかインライン要素であるかを決定します。
* アプレット - Java アプレット
* button - ボタン * del - テキストを削除 * iframe - インラインフレーム
* ins - 挿入されたテキスト * map - 画像ブロック (マップ)
* オブジェクト - オブジェクト オブジェクト * スクリプト - クライアント スクリプト