ホームページ > 記事 > ウェブフロントエンド > 実際のケース: DIV namesting_html/css_WEB-ITnose
実際のケース: DIV namesting_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:021396ブラウズ
ページ構造のセマンティクスを考慮して、2 つの共通要素 div と span は注意して使用する必要があります。div 要素は、ページ構造モジュールを分割する場合にのみ使用されます。モジュール自体は分割しないためです。セマンティクスを持ちます。構造の独立した部分のみを表します。段落内の一部のインライン要素またはテキストに特別なスタイルを適用する場合は、span 要素を使用してそれらをコンテナ内で個別にカプセル化できます。
レイアウト要素として、div はテーブルのようにネストできます。ブラウザはどの要素も同じ方法で解析するため、通常は最も内側の層から開始して、外側に向かって解析を続けます。ネスト レベルが非常に深い場合、ブラウザはネストされた関係を解析するためにより多くのリソースを消費するため、必然的にブラウザの速度に影響します。
上下3行のレイアウト構造の場合:
<div id="header"></div><div id="main"></div><div id="footer"></div>
ページ上で固定幅と中央揃えの表示効果を実現するには、3つのdivにそれぞれCSSスタイルを設定するのは少し面倒です。 div レイヤーをネストすることができます :
<div id="wrap"> <div id="header"></div> <div id="main"></div> <div id="footer"></div></div>
実際、div ネストのレイヤーを追加するこの方法は、間違いなくブラウザの表示に負担をもたらします。そのため、body 要素をコートとして使用できます。身体を最大限に活用して無駄を省きます。
<body id="wrap"> <div id="header"></div> <div id="main"></div> <div id="footer"></div></body>
別の例: 上のヘッダー部分にナビゲーション バーを追加する場合:
<div id="wrap"> <div id="header"> <div id="logo"></div> <div id="banner"></div> <div id="nav"> <ul> <!--导航列表--> <li></li> <!--导航列表项--> <li></li> <!--导航列表项--> <li></li> <!--导航列表项--> </ul> </div> </div> </div>
上記のコードは最も最適化されていますか?もちろんそうではありません。ul 要素と div 要素はどちらもブロック要素です。外側に 2 つの要素がネストされているナビゲーション メニューでは、特別なスタイルが定義されていない場合、次のように記述できます。
<body id="wrap"> <div id="logo"></div> <div id="banner"></div> <div id="nav"> <ul> <!--导航列表--> <li></li> <!--导航列表项--> <li></li> <!--导航列表项--> <li></li> <!--导航列表项--> </ul> </div> </body>
この状況が最適です。ただし、これには一定のリスクがあり、要素全体の表示を制御するには、より多くの CSS スタイルを使用する必要がある場合があります。もう 1 つのレイヤーをネストすると、ページ レイアウトがより便利になり、不要な CSS コントロール コードが大幅に節約されます。現時点では、レイアウトの機能の重要性は構造の機能よりもはるかに大きくなります。
つまり、div 要素の複数のネストを削減することを強く主張するとき、私たちは Web デザインでデザイナーが div 要素をいじる現状について話しているのですが、必要なネストについて話しているのではありません。それはそうすべきであり、そうしなければなりません！
補足: ページのセマンティック操作:
1. XHTML 構造のセマンティック性
2. セマンティックなページ操作の構築