今回はCSS表示モードの使い方と、CSS表示モードを使用する際の注意点を紹介します。実際の事例を見てみましょう。
1. タグ補足 div と pan CSS は、Web ページ内の一部のローカル情報を変更します
3. .div と spam の違いは何ですか?3.1.div は単独で行を占有しますが、span は行を占有しません。単独3.2.div はコンテナレベルのタグであり、span はテキストレベルのタグです4. コンテナレベルのタグとテキストレベルのタグの違いは何ですか?他のタグはすべてコンテナ内でネストできます。 -レベルのタグテキストレベルのタグ/ハイパーリンク
コンテナレベルのタグ
div h ul ol dl li dt dd ...
テキストレベルのタグ
span p buis strong em ins del ...
注:
どのタグがテキストレベルでどれがコンテナレベルであるかエンタープライズ開発では一般的に、意図的にそれらを覚える必要はありません ネストするには、それらは div にネストするか、グループタグに従ってネストする必要があります
2. 要素の表示モード
HTML では、HTML は分割しますすべてのタグをコンテナ レベルとテキスト レベルの 2 つのカテゴリに分類しますCSS では、すべてのタグをブロック レベル要素とインライン要素という 2 つのカテゴリに分類します
1. ブロック レベル要素とは何ですか。要素?
ブロックレベルの要素は排他的な行を占有しますインライン要素は排他的に1行を占有しません
コンテナレベルのタグdiv h ul ol dl li dt dd ...
span p buis stong em ins del ...
ブロックレベルの要素
p div h ul ol dl li dt dd
インライン要素(すべてp を除くテキスト要素はインライン要素です)
2. ブロックレベル要素とインライン要素の違いは何ですか? 2.1 ブロックレベル要素は 1 行を占有します
幅が異なる場合設定すると、デフォルトで親要素と同じ幅になります
幅と高さが設定されている場合は、設定されたように表示されます 2.2 インライン要素単独で行を占有することはありません
幅が設定されていない場合は、デフォルトでは、コンテンツと同じ幅になります2.3 インラインのブロックレベル要素
要素が行を占有するだけでなく、幅と高さを設定すると、インラインのブロックレベル要素(imgタグなど)が表示されます
1. CSS要素の表示モードを変換する方法
2. 表示値
block ブロックレベルinline inlineinline-block inline block level
3. ショートカットキー
di 表示: inline;
db 表示: block;dib 表示: inline-block;
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
以上がCSS表示モードの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。