CSS標準ドキュメントフロー

CSS標準ドキュメントフロー

ドキュメントフローとは、要素のレイアウトプロセス中に、デフォルトで要素を左から右、上から下に配置することを指します。

ドキュメントフローは、ブロック要素とインライン要素に分けることができます。

ブロック要素

ブロック要素の特徴：

• ブロック要素は独自の行にあります。
• 高さ、幅、内側と外側のマージンをすべて制御できます。
• 幅のデフォルトは親コンテナの100％です。
• 内部では、内部要素とブロック要素を解放できます。

注意：

• ブロック要素はテキスト要素では使用できません。
• <p>ラベルは主にテキストを格納するために使用され、ブロック要素は配置できません。

行内元素

インライン要素の機能：

• 隣接する行の要素は1行にあり、複数の要素を1行に表示できます。
• 幅と高さは設定できません。
• デフォルトの幅は、それ自体のコンテンツの幅です。
• インライン要素は、テキストまたはインライン要素のみを保持できます。

注意：

• <a>中に入れることはできません<a>。
• <a>その中<a>にブロック要素を入れることができますが、それらをブロック要素に変換するのが最も安全です。

インラインブロック要素

インラインブロック要素の機能：

• インラインブロック要素は、ブロック要素とインライン要素の特性を同時に備えています。
• 隣接するインライン要素（インラインブロック）と1つの線上にありますが、それらの間にギャップがあります。1行に複数のインライン要素（インライン要素の特性）を表示できます。
• デフォルトの幅は、それ自体のコンテンツの幅（インライン要素の特性）です。
• 高さ、幅、内側と外側のマージンをすべて制御できます（ブロック要素の特性）。

块元素：
<h1>~<h6> <p> <div> <ul> <ol> <li>

行内元素：
<a> <strong> <b> <em> <i> <del> <s> <ins> <u> <span>

行内块元素：
<img> <input> <td>