3. CSS レイアウトの重要なタグ??div_html/css_WEB-ITnose

冒頭でも述べたように、CSSを理解するには、divタグを理解することから始めます。実際、レイアウトの中核となるタグは div であり、次のステップで最も頻繁に使用するタグでもあります。
1. div の意味:
div はコンテナであり、使用時は

の形式で存在します。
XHTML では、各タグをコンテナと呼ぶことができ、コンテンツを配置できます。ただし、div は、XHTML のレイアウト設計に特に使用されるコンテナ オブジェクトです。
従来のテーブル レイアウトでは、テーブル オブジェクト テーブルに完全に依存して、ページ上に複数のセルを描画し、テーブルにコンテンツを配置してレイアウトの目的を達成します。
div オブジェクトを核としたページレイアウトでは、DIV と css を使用するだけでレイアウトを実装できるため、css レイアウト div+css レイアウトと呼ぶのが一般的です。

2. div は単なる領域識別子です。div が使用されていても、div の CSS スタイルが適用されていない場合、スタイルは変更されずに div のコンテンツのみが表示されることを意味します。これは、テーブル レイアウトの使用とは少し異なります。たとえば、左側と右側の列を実装する場合、テーブルでは列の効果が確認できますが、CSS を使用しない div は領域識別子としてのみ使用され、変更はありません。次のコードの効果を見てください:

プログラム コード

& & lt;

& lt; table width = "100%" border = "1" & gt;あなたのデフォルトのスタイル* /
& lt & lt & lt & lt & lt & lt & lt ;tr>
ステップバイステップの実践的な div+css シリーズ チュートリアル

スーパーベイビー、ステップバイステップ、実践的な div+css シリーズチュートリアル

/*この div にはスタイルが追加されていません*/

スーパーベイビー、ステップバイステップ、実践的div +css シリーズのチュートリアル

表示レンダリング:

テーブルには、デフォルトの境界線の太さ 1 に従って表示されます。
CSS スタイルは div に適用されず、2 つの行は列に表示されず、目に見える効果はありません。上で述べたように、div は領域を区切る単なる領域識別子であり、スタイルの責任は css に渡されます。

では、どうすれば並べ替えの効果を発揮できるのでしょうか?
注意深い人なら div コンテナの内容が変わっていないことに気づくでしょうが、DW エディタでは、div がデフォルトで行全体を表示し、その下に別の div が配置され、各 div が 100% であることがわかります。幅。 W3C の公式声明によると、XHTML では、div はブロック オブジェクト (ブロック オブジェクト) です。
ブロック ブロック オブジェクト: ブロック オブジェクトは、ブロックとして表示されている現在のオブジェクトを指します。行全体が表示され、次のオブジェクトが次の行に表示されます。
インライン オブジェクト (インライン オブジェクト): このタイプは前者とは逆で、次のオブジェクトをそれ自体と一列に並べて表示できます。

div のコンテンツには影響がなく、スタイルの実装には CSS が必要であるからこそ、コンテンツとスタイルの分離が実現され、CSS によって記述された div の最終的な効果が決まります。 CSS では、上下の列だけでなく、左右の列も実現できますが、テーブルにはそれほど大きな柔軟性はありません。 CSS と div コンテンツの間には関連性がないため、div は設計に大きな柔軟性があり、セルの固定モードに制約されません。
したがって、CSS レイアウトを実装するには、まず XHTML でコンテンツを div でマークし、次に CSS を使用してスタイルを記述します。