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

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つのトリックを学びましょう: この属性を使用して要素を非表示にすると、ページ上のスペースを占有しなくなります。

小さなケース:シンプルなナビゲーションの制作

<<:  HTML コメント HTML 内のテキストコメントをマークするための記号

>>:  IE で ClearType をオンにした後の透明フォントの問題の解決方法

ブログ    

推薦する

表のセル間の境界線/区切り線を非表示にする方法

上の境界線のみを表示する <table frame=above>下の境界線のみを表示する...

どのような種類の MYSQL 接続クエリを知っていますか?

序文クエリ情報が複数のテーブルから取得される場合、クエリのためにこれらのテーブルを結合する必要があり...

MySQL の無効な左結合の問題を解決する方法とその使用上の注意

MySQLの左結合が無効であり、その使用方法今日SQLを書いていたとき、左結合を使用すると左のテーブ...

Linux のスケジュールタスク Crontab コマンドの使用に関する詳細な説明と概要

crontab コマンドは、Unix および Linux で定期的な実行命令を設定するために使用され...

Vueライフサイクルの詳細な説明

目次ライフサイクルを理解する理由ライフサイクルとはライフサイクルフック関数作成され、マウントされたフ...

雨滴効果を実現する JavaScript キャンバス

この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...

Zabbix の psk 暗号化と zabbix_get 値の組み合わせ

Zabbix バージョン 3.0 以降、Zabbix サーバー、Zabbix プロキシ、Zabbix...

MySQLはデフォルトのエンジンと文字セットの詳細を変更します

目次1. データベースエンジン1.1 ビューデータベースエンジン1.2 デフォルトのデータベースエン...

2つのウェブサイトページ翻訳プラグインの共有

TranslateThis URL: http://translateth.is Google 翻訳...

テキストエリアタグはサイズ変更できず、マウスでドラッグすることもできません

テキストエリアタグのサイズは不変ですコードをコピーコードは次のとおりです。 <textarea...

Windows で MySQL のルート パスワードをリセットする方法

今日、WordPress がデータベースに接続できないことがわかりました。ウィンドウ サーバーにログ...

Linux nohup はプログラムをバックグラウンドで実行し、表示します (nohup と &)

1. バックグラウンド実行一般的に、Linux 上のプログラムは .sh ファイル (./sh フ...

Ubuntu Server のターミナルのウェルカム メッセージで広告を無効にする方法

最新の Ubuntu Server バージョンを使用している場合、ようこそメッセージに、Ubuntu...