CSS における要素の表示モード

CSS では、要素タグは、要素の表示モードの違いに応じて、インラインレベル要素とブロックレベル要素の 2 つのカテゴリに分類されます。

1. まず、インライン要素とブロックレベル要素とは何かを紹介します。

1.1、インライン要素は、span、buis、strong、em、ins、del など、1 行を占有しない要素です。

1.2、ブロックレベル要素は、p div h ul ol dl li dt dd などのように 1 行を占める要素です。

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

2.1、インライン要素は 1 行を占有しませんが、ブロックレベル要素は 1 行を占有します。

2.2. インライン要素の幅と高さは設定できません。テキストが変更されると、幅と高さも変わります。ブロックレベル要素では幅と高さを設定できます。

幅と高さが設定されていない場合、デフォルトでは、幅は親要素と同じになり、高さは 0 になります。

2.3、次の例では、インライン要素spanとブロックレベル要素divのスタイルを設定することで、インラインとブロックレベルの違いを示しています。

 <スタイル>
        スパン{
            高さ: 200px;
            幅: 300ピクセル;
            背景色: 赤;
            フォントサイズ: 40px;
        }
        。父親{
            幅: 300ピクセル;
            高さ: 300px;
            背景色: 緑;
            マージン: 100px 自動;
        }
        。息子{
            背景色: 青;
        }
    </スタイル>

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>CSS 要素の表示モード</title>
</head>
<本文>
    <span>私はspanです</span>
    <div class="父">
        私は父親です
        <div class="son">私は息子です</div>
    </div>
</本文>
</html>

3. 要素の幅と高さを設定するだけでなく、要素が 1 行を占有しないようにする必要がある場合もあります。この場合、インラインブロック要素が使用されます。一般的なインラインブロック要素には、<img>/<input>/<td> などがあります。

4. CSS 要素の表示モードを切り替えるにはどうすればいいですか?

4.1、要素の表示属性を設定する

4.2、表示値: inline (インライン)、block (ブロックレベル)、inline-block (インラインブロックレベル)

4.3、次の例では、spanの表示モードをブロックレベルに変換し、divの表示属性をインラインブロックレベルに変換し、imgの表示モードをブロックレベルに変換します。

<スタイル>
        /*span をブロックレベル要素に変換します--*/
        *{
            マージン: 0;
            パディング: 0;
        }
        スパン{
            表示: ブロック;
            背景色: 赤;
            幅: 400ピクセル;
            高さ: 400px;
        }
        /*div をインライン ブロック レベル要素に変換します*/
        div{
            表示: インラインブロック;
            背景色: 緑;
            幅: 300ピクセル;
            高さ: 300px;
        }
        /*img をブロックレベル要素に変換します*/
        画像{
            表示: ブロック;
            幅: 200ピクセル;
        }
    </スタイル>

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>CSS 要素の表示モード</title>
</head>
<本文>
    <span>私はspanです</span>
    <div>私はdivです</div>
    <img src="https://images.cnblogs.com/cnblogs_com/TomHe789/1652521/o_200222073220ctl.jpg">

</本文>
</html>