CSS 仕組みについて学習を続け、CSSがWebサイトをどのようにレンダリングするかを見てみましょう。

4. CSSがWebサイトをレンダリングする方法：視覚フォーマットのモデル

ビジュアルフォーマットモデルとは何ですか？
ページの最終的なレイアウトを決定するために、Render Treeの各要素について、
ボックスを計算してボックスのレイアウトを決定するアルゴリズム。主な成分を含む：
•箱のサイズ：箱モデル。
•ボックスタイプ：インライン、ブロック、インラインブロック。
•配置図：フロートと位置。
•スタッキングコンテキスト。
•Render Treeの他の要素。
•ビューポートサイズ、画像サイズ、…

4.1。ボックスモデル

•コンテンツ：テキスト、画像、…;
•パディング：ボックス内のコンテンツの周囲の透明な領域。
•ボーダー：パディングとコンテンツを移動します。
•マージン：ボックス間のスペース。
•塗りつぶし領域：領域は背景色または背景画像で塗りつぶされます。

4.2。ボックスタイプ
ブロックレベルのボックス
•要素はブロックとして視覚的にフォーマットされます
•親要素の幅100％
•垂直方向に1つずつ

display: block
(display: flex)
(display: list-item)
(display: table)

インラインブロックボックス
•ブロックとインラインを組み合わせる
•コンテンツに十分なスペースをとる
•改行なし

display: inline-block

インラインボックス
•コンテンツはストリームで配信されます
•コンテンツに十分なスペースをとる
•改行なし
•高さと幅なし
•パディングとマージンは、水平方向（左と右）でのみ使用できます。

display: inline

ポジショニングスキーム
•デフォルトの配置スキーム
•フロートなし
•絶対配置しないでください
•要素は固有の順序で配置されます

position: relative

浮く
•要素が元の順序に従っていない
•フロート要素を囲むインラインテキストと要素
•コンテナは要素によって幅と高さを調整しません

float: left;
float: right;

絶対配置
•要素は通常のスレッドから削除されます
•コンテンツと周囲の要素には影響しません
•上、下、左、右を使用して、要素の周りにコンテナを定義します

position: absolute
position: fixed

SEファンティトゥハンから提供された情報を使用して、情報技術を学び始めた人、
または情報技術産業で働いている人が、CSSの仕組みを理解できれば幸いです。
何か提案があれば、下にコメントを残してください。