Box

Ⅰ. What is the Box?

→HTMLのすべての要素をCSSで表す場合はBOXで表す.

すべてのBox Element
Content/Padding/Border/Marginからなる.

1. Content

→内容の横はwidth、縦はheight

2. Padding

→ContentとBoorderの間にスペースを残す要素

3. Border

→枠線要素
blackborder-radius:50%はBoxをCircleに変換できます.

4. Margin

→外部余白要素
→要素と要素の間隔

Ⅱ. Box-Sizing

→ Why? paddingを設定するとBox-Sizeが自動的に計算されます.

* {
	box-sizing : content-box;
	/* content-box | border-box */	
}

→HTMLのデフォルト値はbox-size:content-box!
→ styles.cssが最初にやるべきことを開けろ!!

*{
	box-sizing : border-box;
}

私たちの常識に合う箱のための強硬な措置!!

Ⅲ. Box

→BoxモデルをリードするコンセプトBox
Box Type → Display

1.Block→「ロードカーテン」

気性

widthが単独で宣言されていない場合、width=親コンテンツ-boxの100%

幅を個別に宣言すると、余剰スペースは自動的に余白として埋め込まれます.

margin : 0 auto;
→Block内のBlockを中央に揃えます.

親のheightを単独で宣言しない場合、子要素のheightの和=親のheight

2.Inline→「流れ」

∙Block(面)→領域VS Inline(線)→フロー

シリーズ特性

Why? →これらの属性がInlineの流れを妨げるため

3.Inline-block→Blockの利点とInlineの利点が結合しています!

領域をつかんで流れを妨げない

リファレンス

キムバーグのCSSは面白いです。