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

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>

要約する

CSS の要素の表示モードに関する記事はこれで終わりです。CSS の表示モードに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  JavaScriptのイベントループの仕組みの分析

>>:  MIME エンコーディングの概要 (オンライン情報と実際の経験から統合)

推薦する

MySQL 8.0.21 のインストール手順と問題解決

公式サイトをダウンロードまず公式ウェブサイトにアクセスしてMySQLをダウンロードしてくださいリンク...

XHTML ドキュメントで JavaScript と CSS を正しく使用する方法

ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しか...

Linux で SSH 経由でリモート ファイルシステムをマウントする方法の詳細な説明

SSHFS の機能: FUSE(Linux向けの最高のユーザー空間ファイルシステムフレームワーク)を...

Ubuntu での CUDA と CUDNN のインストールとアンインストールの実装

目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...

Angularの動的コンポーネントの詳細な説明

目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...

高い同時実行性の下でNginxのパフォーマンスを最適化する方法をまとめます

目次特徴利点インストールとコマンド設定ファイルプロキシモードとリバースプロキシ構成フォワードプロキシ...

行の高さと垂直方向の配置に関する包括的な理解

前の単語line-height、font-size、vertical-align は、インライン要素...

MYSQL スロークエリとログ設定とテスト

1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...

Vue はアップロードした画像に透かしを追加できるようになりました (アップグレード版)

vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...

Docker stopはすべてのコンテナを停止/削除します

この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...

Dockerを使用してSonarQubeをインストールする詳細なチュートリアル

目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...

Linux ディスクとディスク パーティションを理解するための記事

序文Linux システムのすべてのハードウェア デバイスは、ファイルの形式で表現され、使用されます。...

js を使用して 2 つの HTML ウィンドウ間で通信する方法

シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...

Nodejsはgitee実装コードに自動的に同期するドキュメント同期ツールを作成します

本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...

MySQL8のパスワードを忘れた場合の簡単な解決策

序文MySQL データベースのパスワードを忘れると、データベースに正常にアクセスできなくなり、パスワ...