Box Model

すべてのHTMLの要素には長方形のBox領域があります.Boxはmargin、border、padding、contentからなる.

プライマリ・プロパティ

margin

marginはborderの外部余白を表す.使用auto中央にすることができます.

- margin: top right bottom left;
- margin-top: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- margin-left: 10px;

padding

paddingはborderの内側の空白を表す.

padding: top right bottom left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;

border

borderはmarginとpaddingの境界を表す.

border: 5px solid red;
border-style: none solid dotted dashed;
border-width: 10px 20px 30x 40px;
border-color: red green blue yellow;
border-radius: 10px 20px 30x 40px;

box-sizing

box-sizeでは、高さと幅の値の基準を変更できます.

content-box:コンテンツ領域基準(default)

border-box:content、padding、borderを含む領域を基準とする.

display

要素のレイアウトプロパティを定義します.

block:block特性付与.

inline:inline特性付与.

inline-block:inline-block特性付与.

・none:この要素を消去するスペース自体は、画面に表示されません.

ブロックレベル

以下の特徴を持つ要素を表します.

常に新線から、総幅を占める

高さ、幅、マージン、塗りつぶしを指定可能

inlineレベル要素を含めることができます.

Ex. div , h1~6 , p , ul , ol , li , hr , table , form

インラインレベル

以下の特徴を持つ要素を表します.

新しい線からではなく、前の要素と同じ一線に位置する.

高さ、幅、マージン、塗りつぶしは指定できません

コンテンツ幅がフル幅

inlineレベルの要素の後ろに自動的にスペース(4 px)が指定されます.

Ex. span , a , strong , img , br , input , select , textarea , button

inline-ブロックレベル

blockとinlineレベルの特徴があります.次の特徴があります.

基本的にはinlineレベルと同様に他の要素と同じ行に配置することができる.

blockレベルの場合、高さ、幅、余白、塗りを指定できます.

コンテンツ幅がフル幅

inlineレベル同様、後から自動的にスペース(4 px)を指定します.

background

background: [ color || image || repeat || attachment || position ];
background-image:  url('https://mdn.mozillademos.org/files/7693/catfront.png');
background-repeat: [ repeat || no-repeat || repeat-x || repeat-y ];
background-size : [ width height || cover || contain ];
background-attachment: fixed
background-position: 0px 0px center;
background-color: red;

visibility

要素が画面に表示されるかどうかを指定します.

visible:画面に表示されます.(default)

hidden:画面に隠れる.△スペースは広いですが、見えません.

opacity

要素の透明度(0.0～1.0)を制御します.

opacity : 0.5;

font

font: 2em "Open Sans", serif;
font-size: 16px
font-family: Arial, Helvetica, sans-serif;
font-style: [ italic || light || thick || thicker ]
font-weight: [ 100~900 || normal || bold || lighter || bolder ]

リファレンス

box-model-image: https://hackernoon.com/the-box-model-44fc2c04a935

box-model: https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model