「CSS」ボックスモデル

8762 ワード
CSS テキストリンク

ケースモデル


  • コンテンツ:コンテンツを表示する領域
  • padding:コンテンツと枠線の間の余白
  • border:paddingとmarginの境界ロール
  • 余白:ダンボールとその他の要素の間のスペース

    • サイズ

  • 要素の幅と高さを設定するプロパティです.
  • 初期値auto,
  • のプロパティは継承されません.
  • inline要素はwidthおよびheightの影響を受けない.
    (display:block;inline do blockに変更できます.)
    • <div class="block">
  Lorem ipsum dolor sit amet
</div>
<span class="inline">
  Lorem ipsum dolor sit amet
</span>
    .block {
  width: auto;
  height: auto;
  background-color: wheat;
}
.inline {
  width: auto;
  height: auto;
  background-color: yellowgreen;
}

    width

  • 要素の水平方向の長さを指定するプロパティです.

    • height

  • 要素の垂直方向の長さを指定するプロパティです.

    • 最小、最大

  • 反応式Webサイトを作成する場合は、要素の最小、最大幅、または高さを指定できます.

    • min-width, min-height

  • 要素の最小幅と高さのプロパティを設定できます.
    • <div id="container"></div>
    #container {
  width: 50%;
  min-width: 300px; <!-- 창이 줄어들어도 최소 너비 300px 보장! -->
  height: 50%;
  min-height: 500px; <!-- 창이 줄어들어도 최소 높이 500px 보장! -->
  background-color: lightcoral;
}

    max-width, max-height

  • 要素の最大幅と高さのプロパティを設定できます.
    💡 Internet Explorer 7以降.

    • margin

  • ボックスの最も外側のプロパティに対応します.
  • 余白-上部、余白-右側、余白-下部、余白-左側のショートカット(略記).
  • の初期値は0です.
  • 2margin: 30%と入力すると、親の幅の30%を余白に設定できます.
    • /* 네 면 모두 적용 */
margin: 1em;
/* 세로방향 | 가로방향 */
margin: 5% auto;
/* 위 | 가로방향 | 아래 */
margin: 1em auto 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
margin: 2px 1em 0 auto;

    margin collapsing


    境界オーバーラップは、境界相殺と呼ばれ、2つ以上のブロックの上下エッジが場合によっては最大の境界に結合する現象を指す.
  • 隣接兄弟箱の間に上下限が重なる場合
    2つの
  • が重なる余白値を比較して、より大きな余白値でレンダリングします.同じ場合は、重複を除去することによってレンダリングされます.
  • 親箱と第一(最後)子箱の上端(下端)の利益が重なる場合
    親ブロック
  • にborder、padding、inlineの内容が含まれていないため、親ブロックが子ブロックのbounder-topと出会うと、height値とmin-height値が明確に存在していてもboundが折り畳まれる.
  • 親ブロックにはborder、padding、inlineの内容がなく、分離親サブブロックの高さ値が指定されていないため、親と子ブロックのboundが出会うと
  • アイドルブロック
  • 空のブロックは高さ0のブロックです.
  • border、padding、content、heightが存在しない場合、ボックスの余白-上部および余白-下部は、上下の境界が存在しないため相殺されます.

    • padding

  • コンテンツとborderの間の余白.
  • padding-top、padding-right、padding-bowt、padding-leftのショートカットプロパティ(略記).
  • の初期値は0です.
  • 2padding: 30%と入力すると、親の幅の30%をpaddingに設定できます.
    • /* 네 면 모두 적용 */
padding: 1em;
/* 세로방향 | 가로방향 */
padding: 5% auto;
/* 위 | 가로방향 | 아래 */
padding: 1em auto 2em;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
padding: 2px 1em 0 auto;
    💡 padding-top: 10%を入力すると、親のheightではなくpadding-topに値を設定します.

    border

  • 余白とpaddingの間の枠線領域.
  • の初期値がnoneに設定されていない場合は、表示されません.

    • border-style

  • の枠線のスタイルを決定できます.
    • 通常、
  • ソリッドステート(実線)が使用されます.
  • の上部、右側、下部、左側の角度を異なる角度に設定することもできます.
    • /* 네 면 모두 적용 */
border-style: solid;
/* 세로방향 | 가로방향 */
border-style: dashed solid;
/* 위 | 가로방향 | 아래 */
border-style: dashed solid double;
/* 위 | 오른쪽 | 아래 | 왼쪽 */
border-style: dashed solid none dotted;

    border-width

  • の枠線の太さを設定できます.
  • 痩せ、中、厚に設定してもよいし、px単位に設定してもよい.
  • top、right、bottom、leftはそれぞれ異なる設定が可能です.

    • border-color

  • の枠線の色を設定できます.
  • top、right、bottom、leftはそれぞれ異なる設定が可能です.

    • border(shorthand)

  • border-width、border-style、border-colorを1行に書くことができます.
  • が入力されていない場合、初期値が適用され、border-styleが入力されていない場合、枠線は表示されません.
  • の順序.

    • border-radius

  • の枠線のフィレットを指定できるプロパティです.

    • box-sizing


    要素の幅と高さを計算する方法を指定します.
  • content-box:コンテンツ領域に基づいてサイズを決定します.
  • bord-box:枠線に基づいてサイズを決定します.
  • 初期値:デフォルト値に設定します.
  • 継承:親要素の属性値を継承します.
    • 同時:スレッドとロック
    SASS:Variables and Nesting