Box Model

6959 ワード
CSS TIL テキストリンク

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
    • linux crontabは毎秒実行を実現
    JAVA多次元配列