CSS属性値の単位

4429 ワード

フロントエンド CSS テキストリンク

①キーワード

これはCSS開発時に既に指定されている単語を意味する.
たとえば、displayプロパティ値として使用できるキーワードは、block、inline、inline-block、noneです.

②大小単位

1.px（画素）

pxが絶対値→ほとんどのブラウザでは1 pxを1/96インチの絶対単位と見なしています

2. em

Emは倍数単位(相対値)→1 emは12 pt、16 px、100%に等しい
親要素のサイズの影響でサイズが変更されます.
ネストされたサブエレメントにemを割り当てると、すべてのサブエレメントのサイズに影響します.

3. %

パーセント単位(相対値).
親要素のサイズの影響でサイズが変更されます.
cssを作成する場合は、デフォルトのフォントを%に設定し、他のcssはemを使用することをお勧めします.

使用例

font-sizeの場合、継承型属性であるため、親の14 pxを継承しdivの番号を適用する.
divはfont-sizeを120%に適用するため、番号は14 px 1.2=16.8 pxである.
次に、emによって幅を計算します.
すなわち、幅は16.8 px 2=33.6 pxである.

<head>
  <style>
    body {
      font-size: 14px;
      text-align: center;
    }
    div {
      font-size: 120%; /* 14px * 1.2 = 16.8px */
      font-weight: bold;
      padding: 2em;    /* 16.8px * 2 = 33.6px */
      background-color: rgba(255, 0, 0, 0.2);
    }
  </style>
</head>