[🦁FE DAY 8(2)]CSS Boxモデル-ボックスの構成とタイプ

HTML要素にはいくつかの箱が入っています.
そのため、私たちが見たサイトのUIはすべて箱で構成されています!

1.箱の構成

content box
:要素コンテンツの領域になります.width,heightはサイズを調整できます.

padding box
:コンテンツと枠線の間のスペース.<padding>および関連する属性に従ってサイズを調整できます.

border box
:コンテンツとダウンジャケットの枠線を囲みます.<boder>および関連する属性を使用して、サイズおよびスタイルを指定できます.

margin box
:要素と要素の間の空白領域.ビューの外部にあります.<margin>および関連する属性に従ってサイズを調整できます.

(画像出所:済州コード大本営)

2.ケースのタイプ

ボックス

使用可能なスペースの両側は100%使用できます.
(未使用のスペースは余白で埋められます)

サイズはwidth、heightに変更できます.

padding、margin、およびborderを使用して、トレイスタイルを制御することができ、この属性が適用される場合、他の要素を押し出すことができる.

↑h 1は上下左右に1つずつ余白50 pxを与え、底部のp領域を侵さずに押し出す.

インラインボックス

行内ボックスはコンテンツと同じサイズしかないため、1行に複数の行内ボックスを持つことができます.

サイズはwidth、heightに変更できません.

padding、border->利用可能margin->左右利用可能(上x)
これらのアトリビュートの上下(Up Down)値は、他の要素を押し出しません.

↑spanは上下左右にそれぞれ50 pxのpaddingを与え、底部元素の領域を侵犯した(押し開かない).ここで注意すべき点は,上下は他の要素の領域に押し込まず,左右は他の要素の領域に押し込まないことである.

2.1表示属性

ディスプレイアトリビュートは、ボックスの性質を指定できます.
大きく分けて外部表示タイプと内部表示タイプです.

外部表示タイプ
:外部の他の箱との構成に影響します.

「inline」を使用してボックスのタイプを指定します:

div { display: inline }

「block」を使用してボックスのタイプを指定します:

div { display: block }

「inline-block」を使用してボックスのタイプを指定します:

div { display: inline-block }

inline-block
:inlineとblockの両方の特徴を持つboxタイプ

inlineのように、1行に複数の要素を持つことができます.

ブロックのように、幅、高さ、マージン、塗りつぶしなどのすべての値を指定できます.また、paddingプロパティとmarginプロパティを適用すると、他の要素の領域を侵害するのではなく、ストレッチします.

(画像ソース:Winibe)

内部表示タイプ

flex:内部サブエレメントの位置を親エレメント内にx軸またはy軸として配置するプロパティ.

grid:内部サブエレメントの位置を親エレメント内にx軸とy軸で配置するプロパティ.