CSSタグの表示モードの詳細な説明

ケース図

ここに画像の説明を挿入

コード

<!DOCTYPE html>
<html>
<ヘッド>
	<メタ文字セット="utf-8">
	<タイトル></タイトル>
	<スタイル タイプ="text/css">
		{
            表示:インラインブロック;
            幅:100ピクセル;
            高さ:50px;
            背景:#f00;
            テキスト配置:中央;
            テキスト装飾:なし;
            色:#fff;
            行の高さ:50px;
        }
		本文{text-align:center;}
	</スタイル>
</head>
<本文>

<a href="">ナビゲーション</a>
<a href="">ナビゲーション</a>
<a href="">ナビゲーション</a>
<a href="">ナビゲーション</a>
<a href="">ナビゲーション</a>
<a href="">ナビゲーション</a>

</本文>
</html>

要約する

CSS タグの表示モードに関する記事はこれで終わりです。CSS タグの表示モードに関するより詳しい内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

ラベル表示モード（重要） divタグとspanタグ 1. スタイルはまったく同じですが、ラベルが異なり、表示される結果もまったく異なります。 2. 各divは1行を占め、複数のspanは1行に配置される。 1. ブロック要素特徴: デフォルトの幅は 100%、デフォルトの高さは 0 です。幅と高さは設定可能で、親の幅を継承し、改行で表示されます (div ul li ph)。概略図要約: ブロック要素は幅と高さの属性を追加し、1行を占めることができます。 2. 行要素特徴: デフォルトの幅と高さは両方とも0で、幅と高さは設定できず、1行表示----- span biua 概略図概要: 幅と高さに左右されず、1行を占めることはできません 3. 行内の要素をブロックする機能: 幅と高さのみ設定可能、表示を折り返すことはできません - 画像入力概略図もう 1 つのトリックを学びましょう。一般的に、行内のブロック要素はインライン要素でもあります。インライン要素に対する一部の操作は、行内のブロック要素にも適用できます。例: text-align:center;line-height:1000px; 4. モード変換構文: `display:值` 値: block はブロック要素になり、inline は行要素になり、inline-block は行内のブロック要素になり、none は要素を非表示にします。もう1つのトリックを学びましょう: この属性を使用して要素を非表示にすると、ページ上のスペースを占有しなくなります。小さなケース：シンプルなナビゲーションの制作

ラベル表示モード（重要）

divタグとspanタグ

1. スタイルはまったく同じですが、ラベルが異なり、表示される結果もまったく異なります。

2. 各divは1行を占め、複数のspanは1行に配置される。

1. ブロック要素

特徴: デフォルトの幅は 100%、デフォルトの高さは 0 です。幅と高さは設定可能で、親の幅を継承し、改行で表示されます (div ul li ph)。

概略図

ここに画像の説明を挿入