HTML インライン要素と HTML ブロックレベル要素の概要と違い

HTML インライン要素と HTML ブロックレベル要素の概要と違い
ブロックレベル要素の機能:
• 常に新しい行から始まり、それ自体で 1 行を占め、後続の要素も新しい行に表示される必要があります。
•幅、高さ、パディング、マージンをすべて制御できます。

インライン要素のプロパティ:
• 隣接するインライン要素と同じ行に配置する
• 幅 (width)、高さ (height)、内側余白の上/下 (padding-top/padding-bottom)、外側余白の上/下 (margin-top/margin-bottom)、つまり内部のテキストや画像のサイズは変更できません。

主なブロックレベル要素は次のとおりです

コードをコピー
コードは次のとおりです。

アドレス、blockquote、center、dir、div、dl、fieldset、form、h1、h2、h3、h4、h5、h6、hr、isindex、menu、noframes、noscript、ol、p、pre、table、ul

主なインライン要素は次のとおりです

コードをコピー
コードは次のとおりです。

a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、
テキストエリア、tt、u、var

可変要素(コンテキストに基づいて要素がブロック要素かインライン要素かを判断する) :

コードをコピー
コードは次のとおりです。

アプレット、ボタン、del、iframe、ins、マップ、オブジェクト、スクリプト

CSS におけるブロックレベル要素とインライン要素の適用:
CSS を使用すると、上記の表の HTML タグ分類の制限を取り除き、さまざまなタグ/要素に必要な属性を自由に適用できます。

主に使用される CSS スタイルは次の 3 つです
•display:block -- ブロックレベル要素として表示
•display:inline -- インライン要素として表示
• dipslay:inline-block -- インライン ブロック要素として表示され、同じ行に表示され、幅、高さ、内側と外側の余白などのプロパティを変更できます。多くの場合、display:inline-block スタイルを <ul> 要素に追加して、元々垂直なリストを水平に表示できるようにします。

話題外: 最近、ブロックレベル要素とインライン要素の違いについて知識を整理しました。インターネットで関連記事をたくさん見つけましたが、みんなの理解が間違っているようでした。自分でテストしてみたところ、多くの問題が見つかりました:
1. インライン要素の margin-left / margin-right と padding-left / padding-right を制御できるため、この 4 つのプロパティによってインライン要素の幅を制御できます。
2. ブロックレベル要素タグはインライン要素内にも配置でき、内部のブロックレベル要素タグは外部のインラインタグを拡張するため、ブロック要素を配置することでインライン要素の高さを制御できます(インライン要素にはテキストと他のインライン要素のみを保持できるとインターネット上で紹介されています)
例えば:

コードをコピー
コードは次のとおりです。

<あ>
<div style="width:100px;height:100px;">テスト</div>
</a>

<<:  CSS での配置の使用方法の詳細な研究 (要約)

>>:  http-proxy-middlewareを使用してNodeでプロキシクロスドメインを実装する方法と手順

推薦する

LNMP を展開して HTTPS サービスを有効にする方法に関するチュートリアル

LNMP とは: Linux+Nginx+Mysql+(php-fpm、php-mysql)つまり、...

Docker インストール rocketMQ チュートリアル (最も詳細)

RocketMQ は、Alibaba が設計した分散型のキューベースのメッセージング ミドルウェア...

子コンポーネントを通じて親コンポーネントのプロパティを変更するための Vue のさまざまな実装方法

目次序文一般的な方法1. 親コンポーネントを介して子コンポーネントの発行イベントをリッスンしてpro...

MySQLデータベースの使用仕様の概要

導入: MySQL データベースの仕様に関しては、皆さんも何らかのドキュメントを読んだことがあると思...

なぜ IE6 が最も多くの人に使用されているのでしょうか?

まず第一に、私はウェブデザイナーです。具体的には、私は XHTML フロントエンド デザイナーです。...

MySQLデータベースを定期的に自動バックアップする方法

データは貴重なものであることは誰もが知っています。データをバックアップしなければ、データをそのまま放...

HTML コードを書くための 30 のヒント

1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...

jar パッケージを Docker コンテナに変換する方法

jar パッケージを Docker コンテナに変換する方法1.まずJavaイメージをダウンロードする...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

HTMLテーブルレイアウトの実践的な使い方の詳しい説明

テーブルはいつ使用されますか?最近では、Web ページの全体的なレイアウトにテーブルが使用されること...

Javascriptでシングルトンパターンを実装する方法

目次概要コードの実装シングルトンパターンの簡易版改良版プロキシバージョンシングルトンモード遅延シング...

フロントエンドJavaScriptは関数のカリー化を完全に理解している

目次1. カレーとは何か2. カレーの用途3. カリー化ユーティリティ関数をカプセル化する方法 1....

Linux での Tomcat8 のインストールとアンインストールに関する詳細なグラフィック チュートリアル

[ Tomcat8 の Linux インストール ] Tomcat をアンインストールする - まず...

HTML でスクロールバーを使用する際のヒントを共有する

今日、牛南ニュースリリースシステムについて学んでいたとき、牛南先生はスクロールバーに関するいくつかの...

Linux での sshd サービスとサービス管理コマンドの詳細な説明

sshd SSH は Secure Shell の略で、アプリケーション層のセキュリティ プロトコル...