CSS表示モードの使い方

今回は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 を除くテキスト要素はインライン要素です)

span buis Strong em ins del

2. ブロックレベル要素とインライン要素の違いは何ですか?

2.1 ブロックレベル要素は 1 行を占有します

幅が異なる場合設定すると、デフォルトで親要素と同じ幅になります

幅と高さが設定されている場合は、設定されたように表示されます

2.2 インライン要素

単独で行を占有することはありません

幅が設定されていない場合は、デフォルトでは、コンテンツと同じ幅になります

インライン要素は幅と高さを設定できません

2.3 インラインのブロックレベル要素
要素が行を占有するだけでなく、幅と高さを設定すると、インラインのブロックレベル要素(imgタグなど)が表示されます

3つのCSS要素の表示モード変換

1. CSS要素の表示モードを変換する方法

要素の表示属性

2. 表示値

block ブロックレベルinline inlineinline-block inline block level

3. ショートカットキー

di 表示: inline;

db 表示: block;

dib 表示: inline-block;

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

iOS WebView で HTMLString をロードする方法

正規表現に関するいくつかの小さな演習

以上がCSS表示モードの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。