CSSドキュメントストリーミング、ブロック要素)、インライン要素(インライン)は、多くの記事を読んでいます。 Reillyの権威あるガイド>それに記載されているドキュメントの概念は、私が非常に敏感になったことを発見しましたこの概念は、それを理解した後、CSSレイアウトの束を理解しやすく、私の推測と実験に基づいて、エラーがある場合、それは純粋に正常です。 ドキュメントフローは、フォームを上から下に列に分割し、各行の要素を左から右に並べます。これはドキュメントフローです。 私が理解していない質問がいくつかあります 1.インライン要素として、3つの基本要素の1つとして、それとブロックレベルの要素の主な違いは何ですか? インライン要素とはどういう意味ですか?ブロックレベルの要素とは何ですか。 「CSS権威あるガイド」の中国のテキストは、ブロックレベルの要素ではない目に見える要素がインライン要素であることを示しています。その表現の特徴は、「行レイアウト」の意味です。たとえば、インライン要素の境界線底を設定すると、各ラインで繰り返され、各ラインの下に薄い黒い線があります。ブロックレベルの要素の場合、表示されている黒い線はブロックの下にのみ表示されます。 簡単な実用的な例:たとえば、<div>私はCSS -52css.com </div>が大好きです インライン要素は、一般にセマンティックな基本要素に基づいています。インライン要素は、テキストまたはその他のインライン要素のみに対応でき、共通のインライン要素「A」に対応できます。 ブロック要素 インライン要素 変数要素変数要素は、コンテキストに基づくブロック要素またはインライン要素です。
それぞれの非フロートブロックレベルの要素は1つの行を占め、フローティング要素は規制に応じて行の一方の端に浮かんでいます。
インライン要素は、単一の列(ブロックレベル、インライン、リスト要素を含む)を占有しません。
要素がドキュメントストリームから存在する3つの状況、つまり、フローティング、絶対的なポジショニング、固定されたポジショニングもあります。 。
フローティング要素は通常のドキュメントフロー空間を占有しません。フローティング要素の位置は、通常のドキュメントフローに基づいており、ドキュメントの流れから抽出され、左または右に可能な限り移動します。テキストコンテンツは浮動要素を囲みます。通常のドキュメントストリームから要素が抽出されると、ドキュメントストリーム内の他の要素は要素を無視し、元の空間を埋めます。
浮遊概念の根本的な原因は、ブラウザの理論の解釈です。多くの人がIEを標準として使用しているとしか言えませんが、そうではありません。
ドキュメントの流れに基づいて、次の位置決めパターンを簡単に理解できます。
ただし、ドキュメントストリームの要素の位置に比べて相対的なポジショニング。
絶対的な位置決めとは、ドキュメントストリームから完全に分離されたことを意味し、位置属性の非静的値の最も近い親要素、つまりドキュメントストリームから完全に分離され、ビューポートに対してオフセットされている、オフセットおよび固定位置決めがあります。
2。明確な属性が正しい値をとることを理解する方法は常に理論と一致していないようです。
P、H1、またはDIVなどの要素は、ブロックレベルの要素と呼ばれることが多く、これらの要素は強いコンテンツとして表示され、スパンはインライン要素と呼ばれ、そのコンテンツはラインに表示されます。つまり、「インラインボックス」です。 (display = blockを使用して行の要素をブロック要素に変換できます。ディスプレイ=なしでは、生成された要素にボックスがまったくなく、要素が表示されず、ドキュメント内のスペースを占有することもできません。
A:ラインは線の中での要素であり、ブロックレベルの要素は正方形であり、ページのどこにでも配置できます。
B:ラインの要素は、単語のようなものです。
C:パラグラフ<p>、タイトル<h1> <h2>…、list、<ul> <ol> <li>、table <table>、form <form>、div <div>、div <div>などの一般的なブロックレベル要素<body>などのボディ要素。インライン要素は次のようなものです:フォーム要素<入力>、ハイパーリンク<a>、画像<img>、<span> .....
D:ブロックレベルの不可視性の特徴的な機能は、各ブロックレベルの要素が新しいラインから表示され、その後の不可視性も別の行から表示する必要があることです。
e:<span>は、CSS定義のインライン要素に属し、<div>はブロックレベルの要素です。
CSSを研究した人のために、最初はそれを理解できます。しかし、初心者が理解するのは簡単ではないので、主に初心者にもっと馴染みのあるものに説明します!
ワードコンテナを使用すると、存在と目的を鮮明に理解します。小さな容器。 <span>は小さな容器です。しかし、インクを入れたい場合はどうすればよいですか?それは非常にシンプルです。小さな容器を取り出して、それをインクに入れて、きれいな水に入れてください。
CSSを使用して文字Cのスタイルを定義したいので、<Span>を使用できます。
<div>私はCSSが大好きです - <span> 52css.com </span> w3c標準</div>
通常、ブロック要素は、インライン要素と他のブロック要素に対応できます。
CSSの効果がなければ、ブロック要素は毎回並行して配置されます。 CSSを使用すると、このHTMLのデフォルトレイアウトモードを変更し、ブロック要素を必要な位置に配置できます。毎回愚かに別のラインを開始する代わりに。テーブルタグは、テーブルベースのレイアウトの一種でもあり、CSSベースのレイアウトは、ページの読み込みを除いて、通常のユーザー(視覚障害者、盲人などを除く)の観点から表示されることを指摘する必要があります。速度以外に他の違いはありません。ただし、普通のユーザーが誤って[ページソース]ボタンを表示すると、2つの違いが非常に大きくなります。優れた再構成の概念に基づいて設計されたCSSレイアウトページのソースコードは、少なくともWeb開発のない通常のユーザーがコンテンツを迅速に理解できるようになります。この観点から、CSSレイアウトコードはより良い審美的な体験をする必要があります。
ブロックコンテナ要素divをボックスとして想像できます。または、クリップオン記事で再生された場合は、理解しやすくなります。最初に、さまざまな新聞や雑誌から必要な記事を切り取りました。各ピースカットはブロックです。次に、私たち自身のレイアウトの意図に従って、これらの紙を空白の新しい紙の上に再感作します。これはあなた自身のユニークなダイジェストニュースを形成します。テクノロジーの拡張として、Webレイアウト設計は同じパターンに従います。 。
ブロック要素とインライン要素は、HTML仕様の概念です。ブロック要素とインライン要素の基本的な違いは、ブロック要素が一般的に新しい行で始まることです。ただし、CSS制御が追加されると、ブロック要素とインライン要素の属性の違いは違いになりません。たとえば、ディスプレイ:ブロック属性にインライン要素の引用を追加することができます。これにより、毎回新しいラインから始まる属性を持つことができます。
可変要素の基本概念は、要素がコンテキスト関係に基づいてブロック要素かインライン要素であるかを決定する必要があることです。変数要素は、上記の2つの要素カテゴリに属します。一般的な要素分類については、全文を参照してください。
中国のインライン要素の名前に関しては、多くのインライン要素、埋め込まれた要素、インライン要素、および直接入力要素があります。基本的に統一された翻訳はありません。好きなものは何でも呼んでください。さらに、インライン要素に関しては、ディスプレイ属性があると考えられます。
*アドレス - アドレス * BlockQuote -Block Reference * Center-リフティングのブロックの整列 * dir -Directory List * Div-一般的に使用されるブロックレベルは簡単で、CSSレイアウトのメインタグ * Group* Form -interaction Form* H1-大型タイトル* H2 -Subtitle* H3-レベル3タイトル* H4-レベル4タイトル* H5-レベル5タイトル* H6-レベル6タイトル* HR -HR -HORIZONTAL DIVIDER* ISINDEX-入力プロンプト
*メニュー - メニューリスト * noframes-オプションのコンテンツをフレーム(フレームをサポートしないブラウザのこのブロックコンテンツを表示 * noscript-オプションのスクリプトコンテンツ(スクリプトをサポートしないブラウザのこのコンテンツを表示)
* ol-ソートフォーム * p-段落 * pre-フォーマットテキスト *テーブル - テーブル * ul-非ソリッドリスト
* a-アンカーポイント * abbr-略語 *頭字語 - 最初の単語 * b-太字(推奨されない)
* BDO-ビディはオーバーライドします
* BIG-大きなフォント * BR-ラインブレーク *引用 - 引用 *コード - コンピューターコード(ソースコードを引用するときに必要)
* dfn-フィールドを定義 * em-強調 *フォント - フォント設定(推奨されない)
* i- italic * img -picture *入力 - 入力ボックス * KBD-キーボードテキストの定義 *ラベル - テーブルラベル * Q-ショートリファレンス * S-ミディアムマーク(推奨されない)
* SAMP-サンプルの例を定義するコンピューターコードの定義 *選択 - プロジェクトの選択 *スモール - スモールフォントテキスト *スパン - 一般的に使用されるインラインコンテナ、テキスト内のブロックを定義します *ストライク - ミディアムスコア *ストロング - 大胆な強調 *サブサブサブサブ - superscript * Textarea-マルチラインテキスト入力ボックス * TT -TELETEXT * U -UNDERSCORE * var-変数を定義する
*アプレット-Javaアプレット
*ボタン - ボタン * del-テキストの削除 * iframe-インラインフレーム
* ins-挿入テキスト*マップ - 画像ブロック(マップ)
*オブジェクト - オブジェクトオブジェクト*スクリプト - クライアントスクリプト