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 をオンにした後の透明フォントの問題の解決方法

推薦する

.Net Core を使用して数千万のデータを MySQL にインポートする手順

目次事前準備実施方法: 1. 単一のデータを挿入する2. マージデータ挿入3. MySqlBulkL...

バックエンド管理システムを構築するためのvue-element-adminの実装手順

最近、カンファレンスの健康申告システムに取り組んでいたとき、バックエンドを構築する必要があり、vue...

MySQL データベースのホットスタンバイにおける問題点の分析

以前、MySQL データベースのデュアルマシン ホット スタンバイの設定方法を紹介しました。ご興味の...

純粋な CSS3 を使用して、円の動的な光る特殊効果アニメーションを実装するためのサンプル コード

この記事では、主に、円形のダイナミックな光る特殊効果アニメーションを実現するための純粋な CSS3 ...

Vue+SpringBoot のフロントエンドとバックエンドの分離におけるクロスドメインの問題

フロントエンドとバックエンドを分離した開発では、フロントエンドがバックエンドの API を呼び出して...

CentOS7にNginxをインストールして自動起動を設定する方法

1.公式サイトからインストールパッケージをダウンロードするhttp://nginx.org/en/d...

Dockerコンテナ監視とログ管理の実装プロセス分析

Docker の導入規模が大きくなると、コンテナを監視する必要があります。一般的に、Docker に...

Linux システムでの vim プラグインのインストールの概要

目次vimプラグインマネージャーをインストールするプラグインデモを追加プラグインを削除するには: v...

Vue3 Vue イベント処理ガイド

目次1. 基本的なイベント処理2. 親コンポーネントにカスタムイベントを送信するマウス修飾子4. キ...

Jenkins初心者のためのDockerデプロイメントチュートリアルの詳細な説明

この記事では、docker 経由で Jenkins+Maven+SVN+Tomcat をデプロイし、...

CSS の高さの崩壊問題の解決

1. 崩壊度が高いドキュメント フローでは、親要素の高さはデフォルトで子要素によって拡張されます。つ...

Docker で Elasticsearch Kibana と ik Word Segender をデプロイする詳細な説明

esインストール docker pull elasticsearch:7.4.0 # -d : バッ...

Firebug ツールを使用して iPad でページをデバッグする

iPad でページをデバッグするにはどうすればいいですか? iOS 5 をご利用の場合、iPad の...

Windows プラットフォームでの MySQL のインストールと設定方法と注意事項

2.1、msiインストールパッケージ2.1.1、インストール特に重要なのは、インストール前に、元の ...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...