HTML インライン要素と HTML ブロックレベル要素の概要と違い_HTML/Xhtml_Web ページの制作

ブロックレベルの要素 (ブロック) の特性 :
•常に別の行を占有し、新しい行で開始することを意味し、後続の要素も新しい行に表示する必要があります。
•幅。 (幅) 、高さ、パディング、およびマージンはすべて制御できます。

インライン要素 (インライン) プロパティ :
• および隣接するインライン要素は同じ行にあります。 • 幅、高さ、パディングの上下 (padding-top/padding-bottom)、およびマージンの上下 (margin-top/margin -bottom) は変更できません。つまり、内部のテキストまたは画像のサイズは変更できません。


主要なブロックレベル要素は です:

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

address、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 、
textarea 、 tt 、 u 、 var

変更可能な要素 (要素がブロックであるかインライン要素であるかはコンテキストに基づいて決定されます) :

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

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

CSS ミディアムブロックのアプリケーション-level、インライン要素 : CSS を使用すると、上記の表の HTML タグ分類の制限を取り除き、必要な属性をさまざまなタグ/要素に自由に適用できます。


使用される主な CSS スタイルは次の 3 つです : •display:block - ブロックレベルの要素として表示されます
•display:inline - インライン要素として表示されます
•dipslay:inline-block -- インライン ブロック要素として表示され、並列に表示され、幅、高さ、内側と外側のマージンなどの属性を変更できます
よく

に display:inline-block を追加します。要素スタイルを使用すると、本来縦方向のリストを横方向に表示できます。


オフトピック: 最近、ブロックレベル要素とインライン要素の違いについて関連する知識をまとめました。インターネット上で多くの関連記事を見つけましたが、皆さんは理解しているようです。私自身がそれをテストした後、多くの問題を発見しました: 1. インライン要素の margin-left / margin-right および padding-left / padding-righttht は次のとおりです。これらの 4 つのプロパティはインライン要素の幅を制御します。
2. ブロックレベル要素タグはインライン要素内に配置することもでき、内部ブロックレベル要素タグは外部インラインタグを拡張するため、ブロック要素を配置することでインライン要素の高さを制御できます (オンライン入門唯一のことは、インライン要素はテキストと他のインライン要素のみを保持できるということです)
例:



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


テスト