CSS Box
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→「ロードカーテン」
気性
* {
box-sizing : content-box;
/* content-box | border-box */
}*{
box-sizing : border-box;
}widthが単独で宣言されていない場合、width=親コンテンツ-boxの100%
幅を個別に宣言すると、余剰スペースは自動的に余白として埋め込まれます.
margin : 0 auto;
→Block内のBlockを中央に揃えます.
2.Inline→「流れ」
∙Block(面)→領域VS Inline(線)→フロー
Why? →これらの属性がInlineの流れを妨げるため
3.Inline-block→Blockの利点とInlineの利点が結合しています!
領域をつかんで流れを妨げない
リファレンス
Reference
この問題について(CSS Box), 我々は、より多くの情報をここで見つけました https://velog.io/@yunkuk/CSS-Boxテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol