CSSドキュメントフローとブロックレベル要素（ブロック）、インライン要素（インライン）、前表面を比較すると、断片的なCSSレイアウトの基本の数を確認するために、多くの書籍と見られる多くの記事を読みました。オライリー私は非常に敏感だように、流れの概念と呼ば文書を発見した「Definitive Guideのは、CSS」をお読みください。ぞっとするには、ドキュメントの流れを説明していない本は、おそらく著者は、これはそれが言及する価値がないという単純な十分だったと感じ、何かであるということです。しかし、私はコンセプトがあまりにも重要だと思います。それを理解し、理論のCSSレイアウトの束を理解し、合理どこCSS、このデザインを鑑賞することが容易となります。
ドキュメントフロー
フォームは、即ち文書フロー発光要素によって左から右に線でトップダウンラインに分割し、各ラインです。
別の行の各非浮動ブロックレベル要素、所定のプレスのフロートフローティングエレメント列の一端。現在の行が耐えることができない場合は、新しい行を開始してから浮きます。
インライン要素は別々の行ではありません。（ブロックレベル、インライン、リスト要素を含む）は、ほぼすべての要素は、表示サブ要素用のサブラインを生成することができます。
ドキュメントストリームからの要素の存在は、絶対位置決め、固定された位置をフローティングされている3つの場合があります。ただし、IEに浮かぶ要素は、文書の流れに存在している（また、<>私は、これは非常に合理的だと思う製）。
フローティング要素は、任意の通常のドキュメントフロースペースを考慮されていない、フローティング要素は文書のノーマルストリームに基づいて配置し、その後可能な限り文書からのストリームの左側または右側へとして取り出し、移動されます。テキストはフロートを囲みます。要素は、文書の通常の流れから引き出されたときは、まだドキュメントストリーム内の他の要素は、この要素を無視して、自分のオリジナルの空間を満たします。
原因の理論を解釈するブラウザに根ざし混乱概念をフローティング。IEはそれだけではない、実際に多くの人が、標準を行うためにと言うことができます。
文書フローに基づいて、我々は簡単に以下の位置決めモードを理解することができます。
相対的な位置決め、すなわち、ドキュメントフロー位置の要素に対してオフセット。しかし、元の足跡を保持します。
絶対位置、すなわち、プロパティ値をオフセット親要素最近非静的位置に対して、文書から完全に流れます。
視域に対してオフセット完全ドキュメントのストリームのうち固定された位置、すなわち、。
いくつかの質問
- インライン要素は、3つの基本的な要素の一つとして。それはどこにブロックレベル要素との主な違いはありますか？
- 正しい値をクリアプロパティを取るとき、どのように理解するには？実験条件のように見えますが、合計は、理論と一致していません。
- インライン要素、それは何を意味するのでしょうか？ブロックレベル要素は何ですか？
「CSS決定的ガイド」テキスト表示に可視要素は、任意のブロックレベル要素がインライン要素ではありません。その性能の特徴は「ラインレイアウト」の形で、「ラインのレイアウトは、」その症状は、常に行に表示されると言うためにここを意味します。例えば、我々は、インライン要素の境界底設定：1ピクセル固体＃000を、その性能は、各ラインの下行毎に繰り返されるとき黒色細線を有することになります。その後場合、ブロック要素がブロックに表示される黒線の下に表示されています。
しばしばdiv要素またはブロックレベル要素と呼ぶ等P、H1は、これらの要素は、コンテンツとして表示され、強いです。スパンは、「インラインボックス。」、すなわち、行中のそれらの含有量、インライン要素と他の要素と呼ばれます （DISPLAY =ブロックは、インライン要素に変換することができる要素をブロックする、ディスプレイ= noneは、フレーム生成要素を表していない、及び要素は、ドキュメント内のスペースを占有しませんどちらも）
- インライン行の要素であり、それだけで、インラインに配置することができ、ブロックレベル要素は4つのボックスがページ上のどこにでも配置することが可能です。
- 端的に言えば、単語などのインライン要素;段落のようなブロックレベル要素は、追加の定義ならば、それは別の行に表示されます。
- このよう段落<P>、タイトル<H1> <H2> ...、リストなどの一般的なブロックレベル要素。<のUI> <OL> <LI>表<TABLE>、フォーム<FORM>、DIVの<div>とBODY <body>要素などが挙げられます。そして、インライン要素として：フォーム要素<入力>、ハイパーリンクA、画像<IMG>、<スパン> ........
- 顕著な特徴なしでブロックレベルの要素は、次のとおり各ブロック要素は、新しい行を最初から表示され、後続の非プライムも表示され、新しい行を受けます。
- <スパン> CSS定義のラインに属する元素、及び<DIV>は、ブロックレベル要素です。
CSSを知った人々が理解できるため。初心者のために理解するのが難しいことがあり、私はそれの主なポイントは、初心者による調理を言います！
画像に容易になるだろう彼らの存在とワードコンテナの使用を理解し、インライン要素は非常に小型の容器、および<DIV>は大型コンテナに相当し、当然の大型コンテナは、あなたは小さなコンテナを置くことができます。あなたは大きな容器がインストールされている中で、我々はいくつかの水を考えるならば、それを念頭に置いて、最初の印象があることを言うかもしれないので、<スパン>は、小さなコンテナです。しかし、私はまた、行う方法年間でいくつかのインクをインストールしたいですか？簡単に言えば、私たちは、小さな容器のインクの上にロードされ、その後、あなたがなっていないきれいな水の大きな容器に入れを出します。
ブロック要素（ブロック要素）は、一般的にコンテナ要素の他の要素であります
ブロック要素は、一般に、新しい行を開始し、それは、インライン要素と他のブロック要素を収容することができます。共通ブロック要素は段落タグ「P 『』フォーム「特別なブロック要素である、それだけで、他のブロック要素を収容するために使用することができます。
ノーアクションCSS場合、ブロック要素は、各々が行ダウン別の行を有し、順次あろう。そして、後にCSSで、我々は、デフォルトのレイアウトモードあなたが我慢したいブロック要素のこのHTMLを変更することができます。しかし、別の行に常に愚かではありません。なお、視点は、ページのロード時間に加えて、両方のレイアウトテーブルラベル（等視覚障害、盲目、含まない）通常のユーザーから1つの要素、ブロック、テーブルベースのレイアウトとCSSベースのレイアウトである、ことが留意されます違いのために、他の違いはありません。一般ユーザが誤ってページのソースを表示]ボタンを指している場合でも、違いによって実証さの両方が非常に大きいです。CSSベースのレイアウトページは、少なくとも、優れたデザインコンセプトの元に再構成し、一般のユーザーがコンテンツをすばやく理解するためのWeb開発経験を持っていないことができます。このような観点から、CSSレイアウトのコードは、より良い美的経験、それでなければなりません。
あなたは1箱にブロックコンテナのdiv要素を想像することができ、またはあなたが含まれているクリップを再生した場合、理解しやすいです。新聞や雑誌の様々な記事の総数を削減するために私たち最初の必要性。各ブロックは、ブロックの内容を削減しています。その後、我々は紙の新しい空のシートを貼り付けるために、再利用の糊をレイアウト意向に従った紙のこれらの作品を置きます。この形式の独自のユニークな抄録速報。技術の拡張として、ページレイアウトのデザインは同じパターンに従いました。
インライン要素（インライン要素）は、一般に、セマンティックレベル（セマンティック）基本的な要素に基づいています。インライン要素はテキストのみまたは他のインライン要素、一般的なインライン要素「」を含めることができます。
ブロック要素（ブロック要素）とインライン要素（インライン要素）は概念的なHTML仕様です。差分ブロック要素と実質的にインライン要素は、ブロック要素は、一般的に新しい行を開始します。CSS制御ブロック要素の後に添加して、属性場合、この差インライン要素は、の差ではありません。彼はまた、すべてのプロパティが始まった新しいラインを持っているので、このプロパティブロック：たとえば、私たちは、インライン要素に加えて、ディスプレイを挙げることができます。
可変素子の基本的な概念は、彼のコンテキスト要素は、ブロック要素またはインライン要素であるに応じて決定されます。二つのカテゴリーに属する変数の要素または要素は、決定されたコンテキスト彼のカテゴリたら、彼はルールがブロック要素やインライン要素を制限に従います。おおよその要素の分類の全文を参照してください。
インライン要素、インライン要素、インライン要素、インライン要素のさまざまな中国の用語のインライン要素について。基本的には均一な翻訳、それを呼び出す方法を呼び出す方法の愛はありません。インライン要素を述べた。また、我々は表示されている属性の表示があると思います：インライン;このプロパティはIEに有名な倍精度浮動国境問題を修復することができます。
ブロック要素（ブロック要素）
- 住所 - 住所
- BLOCKQUOTE - ブロック引用
- センター - ブロックの整列のために
- DIR - ディレクトリリスト
- DIV - 簡単に一般的なブロックレベルでなく、メインのCSSレイアウト]タブ
- DL - 定義リスト
- フィールドセット - コントロール群を形成します
- フォーム - インタラクティブフォーム
- H1 - タイトル
- H2 - 字幕
- H3 - レベル3タイトル
- H4 - レベル4タイトル
- H5 - 5レベルの見出し
- H6 - 6レベルの見出し
- 時間 - 水平方向のルール
- ISINDEX - 入力プロンプト
- メニュー - メニューリスト
- NOFRAMES - （このブロックの内容を表示するブラウザのフレームをサポートしていない）フレーム任意コンテンツ
- noscript要素 - オプションのスクリプト内容（スクリプトのブラウザをサポートしていません、このコンテンツを表示します）
- オール - ソートされたリスト
- P - 段落
- 前 - フォーマットされたテキスト
- テーブル - テーブル
- UL - 非ソートリスト
インライン要素（インライン要素）
- - アンカーは、
- 略称 - 略語
- 頭字語 - 最初の単語
- B - 大胆な（推奨されません）
- BDO - BIDIオーバーライド
- 大きな - 大きなフォント
- BR - ラップ
- 引用 - リファレンス
- コード - コンピュータコード（必要な参照源）
- DFN - 定義フィールド
- EM - 強調
- フォント - フォントセット（推奨されません）
- i - 斜体
- IMG - 画像
- 入力 - 入力ボックス
- KBD - 定義されたテキストキーボード
- ラベル - ラベルテーブル
- Q - ショート参照
- S - 下線（推奨されません）
- SAMP - コンピュータコードの定義例
- 選択 - プロジェクトの選択を
- 小さな - 小さなフォントのテキスト
- スパン - テキストブロックが定義され、関連する容器内で使用されます
- ストライキ - 下線
- 強い - 太字で強調
- サブ - インデックス
- SUP - 上付き
- TEXTAREA - 複数行のテキスト入力ボックス
- TT - テレテキスト
- U - 下線
- VAR - 定義された変数
可変要素
可変要素の要素を決定することは、インラインコンテキストベースのブロック要素または要素です。
- アプレット - Javaアプレット
- ボタン - ボタン
- デル - 削除テキスト
- インラインフレーム - インラインフレーム
- イン - 挿入されたテキスト
- マップ - 画像ブロック（マップ）
- オブジェクト - オブジェクトオブジェクト
- スクリプト - クライアントスクリプト
