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 をよろしくお願いいたします。 |
>>: MIME エンコーディングの概要 (オンライン情報と実際の経験から統合)
公式サイトをダウンロードまず公式ウェブサイトにアクセスしてMySQLをダウンロードしてくださいリンク...
ますます多くのウェブサイトで、XHTML が HTML4 に取って代わって急速に普及しています。しか...
SSHFS の機能: FUSE(Linux向けの最高のユーザー空間ファイルシステムフレームワーク)を...
目次序文グラフィックドライバーをインストールするCUDAをアンインストールするCUDAをインストール...
目次使用シナリオ達成方法1. 動的コンポーネントを配置する場所2. コンポーネントのインスタンスを取...
目次特徴利点インストールとコマンド設定ファイルプロキシモードとリバースプロキシ構成フォワードプロキシ...
前の単語line-height、font-size、vertical-align は、インライン要素...
1. はじめにスロークエリログを有効にすると、MySQL は指定された時間を超えるクエリステートメン...
vueプロジェクトでは、アップロードした画像に透かしを追加して参照できるようにするアップグレード版...
この記事では主に、すべてのコンテナを削除する Docker stop/remove を紹介し、皆さん...
目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...
序文Linux システムのすべてのハードウェア デバイスは、ファイルの形式で表現され、使用されます。...
シナリオ: ページAがページBを開くと、ページBで操作した後、ページAは変更されたデータを同期する必...
本来の意図このツールを作った理由は、コンピューターを使用しているときにいつでも毎日の仕事や生活を記録...
序文MySQL データベースのパスワードを忘れると、データベースに正常にアクセスできなくなり、パスワ...