一般的に使用される CSS の長さの単位は何ですか?

#CSS 最も一般的に使用される長さの単位は、ピクセル (px)、パーセント (%)、rem、em、vh、vw、pt、cm、mm、in などです。これらの単位は、要素の幅、高さ、境界線のサイズ、フォント サイズなどを設定するために使用できます。

1. ピクセル (px) 単位は、最も一般的に使用される単位の 1 つです。これは、電子画面の物理ピクセルに関連して計算される固定長の単位です。以下にコード例を示します。

div {
    width: 200px;
    height: 100px;
    font-size: 16px;
    border: 1px solid #000;
}

上記のコード例では、width プロパティと height プロパティでピクセル単位を使用して、 div 要素。高さ、font-size 属性はピクセル単位を使用してフォント サイズを定義し、border 属性の幅もピクセル単位を使用します。

2. パーセント (%) 単位は、親要素のサイズを基準にして計算されます。以下にコード例を示します。

div {
    width: 50%;
    height: 50%;
}

上記のコード例では、div 要素の幅と高さが親要素の寸法の 50% に設定されています。

3. rem 単位は、ルート要素 (つまり html 要素) のフォント サイズに応じて計算されます。コード例は次のとおりです。

html {
    font-size: 16px;
}

div {
    width: 10rem;
    height: 5rem;
    font-size: 1.2rem;
}

上記のコード例では、ルート要素のフォント サイズは 16px に設定され、div 要素の幅と高さは、要素のフォント サイズの 10 倍です。ルート要素であり、フォント サイズはルート要素のフォント サイズの 1.2 倍です。

4. em 単位は、要素自体のフォント サイズに応じて計算されます。以下にコード例を示します。

div {
    font-size: 16px;
    width: 2em;
    height: 2em;
}

上記のコード例では、div 要素の幅と高さが要素自体のフォント サイズの 2 倍に設定されています。

上記の単位に加えて、他の長さの単位もあります。

• vh (ビューポートの高さ) は、ビューポートの高さに対する相対的なパーセンテージを表します。
• vw (ビューポート幅) は、ビューポート幅に対する相対的なパーセンテージを表します。
• pt (ポイント) は印刷単位で、1pt は約 1/72 インチに相当します。
• cm (センチメートル) はセンチメートルを意味し、1cm は約 96px/2.54 に相当します。
• mm (ミリメートル) はミリメートルを意味し、1mm は約 96px/25.4 に相当します。
• in (インチ) はインチを意味し、1 インチは約 96 ピクセルに相当します。

つまり、最高の効果を得るには、さまざまな状況に応じて適切な長さの単位を選択する必要があります。

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