CSS単位

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

絶対値absoluteと相対値rerative


✅絶対値の代表ユニット,px


1) px

  • 画面に表示される最小単位.
    最も一般的な単位
    しかし、pxには欠点があります.

  • コンテナ内で寸法を変更した場合、内容は変更されません.

  • ユーザーがブラウザでフォントサイズの設定を変更すると、ユーザーは反応しません.
    • したがって、多くの場合、大きい時間を指定すると、固定値pxよりも
    流れの%を利用する.
    body{
width : 80%;
}

    瓇相対値の代表ユニット


    1) em
  • フォントレイアウトで現在指定するポイントサイズを表す単位
  • は、選択したフォントのタイプにかかわらず、常に固定されたフォントサイズを有します.
  • 親のフォントサイズ、子供のフォントサイズに対して
    • を計算する
    div{
background-color:#ffffff;
}

.parent{
font-size : 3em;
//기본 단위가 16px = 1em 이므로 부모의 폰트 사이즈는 16 * 3 = 48px
}
.child{
font-size : 0.5em;
//부모의 폰트 사이즈가 기본 값이 되어 48 * 0.5 = 24px
}
    2) rem
  • 本に指定するフォントサイズでサイズを決める単位
    • .
  • ブラウザのデフォルト値に従うため、親値は子
    • には適用されません.
    3) vw,vh
  • ビューポート(画面表示部)の幅と高さの単位
    • 4) %
  • 親要素計算子要素相対サイズ
  • emに似た感覚
    • [アルゴリズム]-白準15988号:1、2、3プラス3(JAVA)
    Flex Boxクリア