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

ドキュメントフロー

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

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

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

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

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

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

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

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

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

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

いくつか質問があります

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

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

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

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

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

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

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

段落

、タイトル

...、リストなどの一般的なブロックレベルの要素。

1. 、table、form、DIV
   、およびその他の要素。インライン要素には次のようなものがあります: フォーム要素 、ハイパーリンク 、画像 、... ブロックレベル要素の注目すべき機能は次のとおりです: 各ブロックレベル要素はは新しい行から表示され、後続の要素も新しい行に表示される必要があります。

   は CSS 定義のインライン要素ですが、

   はブロックレベルの要素です。

   CSSを学習したことがある人ならすぐに理解できます。しかし、初心者には理解しにくいので、主に初心者にわかりやすくすることを目的としています。

   コンテナという言葉を使用すると、その存在と目的が視覚的に理解しやすくなります。インライン要素は小さなコンテナに相当します。 ;div> は大きなコンテナに相当しますが、もちろん大きなコンテナの中に小さなコンテナを置くこともできます。 このように、大きな容器にきれいな水を入れたいというイメージが浮かぶかもしれません。しかし、インクも入れたい場合はどうすればよいでしょうか?それは非常に簡単です。小さな容器を取り出し、インクを満たし、大きな容器のきれいな水に入れます。

   Block 要素は通常、他の要素のコンテナ要素です。

   Block 要素は通常、新しい行で始まり、インライン要素や他のブロック要素を収容できます。一般的なブロック要素は段落タグ「P」です。「フォーム」ブロック要素は特別です。他のブロック要素を収容するためにのみ使用できます。

   cssの機能がないと、ブロック要素が毎回改行で順番に配置されてしまいます。 CSS を使用すると、この HTML のデフォルトのレイアウト モードを変更し、必要な場所にブロック要素を配置できます。愚かにも毎回新しい行を始めるのではなく。 table タグもブロック要素の一種であることに注意してください。Table ベースのレイアウトと CSS ベースのレイアウトは、これら 2 つのレイアウトを一般ユーザー (視覚障害者、視覚障害者などを除く) の観点から見たものです。ページの読み込み速度以外に違いはありません。しかし、一般のユーザーが誤って「ページのソースコードを表示」ボタンをクリックした場合、この 2 つの違いは非常に大きくなります。優れた再構築コンセプトに基づいて設計された CSS レイアウト ページのソース コードにより、少なくとも Web 開発の経験のない一般ユーザーでもコンテンツをすぐに理解できるようになります。この観点から、CSS レイアウト コードはより優れた審美性を備えている必要があります。

   ブロックコンテナー要素 div をボックスとして考えることができます。または、クリッピングを試したことがある場合は、理解しやすいでしょう。まず、さまざまな新聞や雑誌から必要な記事を切り出します。カットされたコンテンツのそれぞれがブロックです。次に、レイアウトの意図に従って、これらの紙を新しい白紙に貼り付けます。これにより、独自の要約が作成されます。テクノロジーの拡張として、Web レイアウト設計も同じパターンに従います。

   インライン要素は通常、セマンティック レベルの基本要素に基づいています。インライン要素はテキストまたはその他のインライン要素のみを保持できます。共通のインライン要素は「a」です。

   block要素（ブロック要素）とinline要素（インライン要素）は、どちらもHTML仕様における概念です。ブロック要素とインライン要素の基本的な違いは、ブロック要素は通常新しい行で始まることです。 CSS 制御を追加すると、このブロック要素とインライン要素の属性の違いは違いになりません。例えば、inline要素のciteにdisplay:blockのような属性を追加することで、毎回改行するという属性も持たせることができます。

   可変要素の基本概念は、要素がブロック要素であるかインライン要素であるかをコンテキストに基づいて決定する必要があるということです。変数要素は、引き続き上記の 2 つの要素カテゴリに属します。コンテキストによってそのカテゴリが決定されると、ブロック要素またはインライン要素の規則に従う必要があります。大まかな要素の分類については全文を参照してください。

   インライン要素の中国語名については、インライン要素、インライン要素、インライン要素、インライン要素など、さまざまな種類があります。基本的に統一した訳はなく、好きなように呼んでください。さらに、インライン要素について話すとき、display:inline と呼ばれる表示属性を思い浮かべます。この属性は、有名な IE の二重浮動境界線の問題を解決できます。

   Block要素(ブロック要素)

   address - アドレス

   blockquote - ブロッククォート

   center - 中央揃えブロック

   dir - ディレクトリリスト

   div - よく使われるブロックレベルが簡単でCSSのメインタグでもありますレイアウト

   dl - 定義リスト

   fieldset - フォームコントロールグループ

   form - インタラクティブフォーム

   h1 - タイトル

   h2 - サブタイトル

   h3 - レベル 3 タイトル

   h4 - レベル 4 タイトル

   h5 - 5 title

   h6 - レベル 6 ヘッダー

   hr - 水平分割線

   isindex - 入力プロンプト

   menu - メニューリスト

   noframes - フレームのオプションのコンテンツ (このブロックのコンテンツはフレームをサポートしていないブラウザーに表示されます)

   noscript - オプションのスクリプトコンテンツ (スクリプトをサポートしていないブラウザーにはこのコンテンツを表示します)

   ol - ソートされたリスト

   p - 段落

   pre - フォーマットされたテキスト

   table - テーブル

   ul - 未ソートのリスト

   Inline 要素内

   a - アンカー

   abbr - 略語

   頭字語 - 頭字語

   b - 太字 (非推奨)

   bdo - Bidi override

   big - 大きなフォント

   br - 改行

   cite - 引用

   コード- コンピュータコード (ソースコードを引用する場合に必須)

   dfn - 定義フィールド

   em - 強調

   font - フォント設定 (非推奨)

   i - イタリック

   img - 画像

   input - 入力ボックス

   kbd - キーボードテキストを定義します

   label - テーブルラベル

   q - 短い引用符

   s - アンダースコア (非推奨)

   samp - サンプルコンピュータコードを定義します

   select - project Select

   small - 小さなフォントテキスト

   span -一般的に使用されるインラインコンテナ、テキスト内のブロックを定義します

   strike - 下線

   strong - 太字強調

   sub - 下付き文字

   sup - 上付き文字

   textarea - 複数行のテキスト入力ボックス

   tt - テレックステキスト

   u -下線

   var - 変数の定義

   変数要素

   変数要素は、コンテキストに基づいて要素がブロック要素であるかインライン要素であるかを決定します。

   アプレット - Javaアプレット

   button - ボタン

   del - テキスト削除

   iframe - インラインフレーム

   ins - 挿入されたテキスト

   map - 画像ブロック(マップ)

   object - オブジェクト object

   script - クライアント 終了スクリプト

   IT 交換グループへの参加を歓迎します: