CSSの基本ルール（ノーマルフロー、BFC、IFC）

HTMLとCSSをコーディングしていると、レイアウトが思ったように構成されない

そんな経験はありませんか？

最近、ジェロチョさんの開発者トーク動画を見て、CSSの基本について調べてみることにしました。

- ブロック要素、インライン要素、marginと整列を理解したいです。

経験的に知っていることですが、整理しておく必要があると感じています。

■ cssを変更する必要があるのに、経験的にあれこれ適用して見た目通りに実装すると、レスポンシブデザインで問題が発生したり、後々のメンテナンスが複雑になります。

- 特に考えることはありません。すべての要素は上から下へ、左から右へ配置されます。

* ドゥルミスで記事を作成するときに、htmlタグを貼り付けると消えてしまうのですが、解決策をご存知ですか？;;

- pタグで2つのブロックが生成され、spanタグは1行で描画されます。

- 主にレイアウトを構成する際に使用されます。（ブロックを構成し、その中にインラインを構成します。）

- ブロックレベル要素が積み重ねられる方式です。

- ブロックレベル要素は以下の通りです。

- 要素内の内容の長さに関係なく、親要素の全体の幅を占めます。（1行）

- ブロックの中にブロックを入れたり、インライン要素を入れることができます。

- width、height、margin、paddingを設定できます。

- divタグの中に2行が生成されます。

- BFCが生成されるタイミングは以下の通りです。都度確認すればOKです。

floatプロパティがnoneではない場合
positionがabsoluteまたはfixedの場合
displayがinline-block、table-cell、table-caption、flex、inline-flex、grid、inline-gridの場合
overflowがvisibleではない場合など

- ブロック要素内で構成されます。（行単位X）

- widthとheightを直接設定できません。（内容のサイズ分だけ占有します。）

- 水平方向のpaddingとmarginのみ適用できます。

- インライン要素の中にインライン要素のみ含めることができます。

<span>, <a>, , <img>, <input>など

では、いつ使うのでしょうか？

- bfcは、floatの相互作用やmarginの打ち消しを処理するために使用されます。

- 子要素に自由奔放なスタイルを適用すると、親要素は包含できません。

(float、position absolute、fixed、display inline-blockなど...)

- この時、親要素にbfcを付与してレイアウトを構成します。

(親タグにdisplay: inline-block、overflow: auto、float: leftなどを適用します。)

- cssでは、隣接する2つのタグの上下マージンが重なります。

例）以下の2つのdivタグ間の上下間隔は150pxではなく100pxになります。

- 上記の状況で、2つのタグ間に新しいbfc要素を追加します。

ps. ドゥルミスのhtmlをコピー＆ペーストする方法をご存知ですか？;;