CSSのサイズ単位は何ですか?

WBOY
リリース: 2024-02-21 21:54:03
オリジナル
1141 人が閲覧しました

CSSのサイズ単位は何ですか?

CSS にはさまざまなサイズ単位があり、それぞれの単位には適用可能なシナリオと用途があります。以下では、一般的に使用される CSS サイズ単位を詳しく紹介し、対応するコード例を示します。

  1. ピクセル (px)
    ピクセルは、最も一般的に使用されるサイズの単位の 1 つです。これは画面の物理ピクセルを基準にして測定され、サイズは固定されています。 CSS スタイルを記述するときは、幅、高さ、境界線、内側と外側の余白などのプロパティの値としてピクセルを直接使用できます。例:

    div {
      width: 200px;
      height: 100px;
      border: 1px solid #000;
      padding: 10px;
      margin: 20px;
    }
    ログイン後にコピー
  2. パーセント (%)
    パーセントは、親要素のサイズに対する相対的な測定単位です。幅、高さ、内側と外側のマージン、境界線などの属性に使用できます。パーセンテージを設定することで、レスポンシブなレイアウトを実現できます。例:

    div {
      width: 50%;
      height: 50%;
    }
    ログイン後にコピー
  3. em
    em は、現在の要素のフォント サイズに対する相対的な測定単位です。フォント サイズが明示的に設定されていない場合、em 単位のサイズは親要素のフォント サイズと等しくなります。幅、高さ、内側と外側のマージン、境界線などの属性に使用できます。例:

    div {
      width: 2em;
      height: 2em;
      padding: 1em;
      border: 0.5em solid #000;
    }
    ログイン後にコピー
  4. rem
    rem は、ルート要素 (つまり、html 要素) のフォント サイズに対する相対的な測定単位です。幅、高さ、内側と外側のマージン、境界線などの属性に使用できます。グローバルなサイズ制御は、ルート要素のフォント サイズを設定することで実現できます。例:

    html {
      font-size: 16px; /* 设置根元素的字体大小为16px */
    }
    div {
      width: 20rem;
      height: 10rem;
      padding: 4rem;
      border: 2rem solid #000;
    }
    ログイン後にコピー
  5. vw および vh
    vw はビューポートの幅のパーセンテージ、vh はビューポートの高さのパーセンテージです。これらは、ブラウザのビューポートの寸法を基準にして測定されます。幅、高さなどのプロパティに使用できます。 vwとvhを設定することでレスポンシブレイアウトを実現できます。例:

    div {
      width: 50vw; /* 视口宽度的50% */
      height: 50vh; /* 视口高度的50% */
    }
    ログイン後にコピー

概要:
この記事では、ピクセル、パーセンテージ、em、rem、vw、vh など、CSS で一般的に使用されるサイズ単位を紹介します。サイズ単位を合理的に選択して使用すると、Web ページを適応性と応答性に優れたものにすることができます。実際の開発では、ニーズやシナリオに応じて適切な単位を選択して設定することで、ページのレイアウトをより柔軟で美しくすることができます。

以上がCSSのサイズ単位は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート