ホームページ > 記事 > ウェブフロントエンド > CSSで長さを設定する単位は何ですか?

CSSで長さを設定する単位は何ですか?

青灯夜游オリジナル: 2022-09-21 17:02:574770ブラウズ

css の長さの単位は次のとおりです: 1. em、相対的なフォント長の単位、その単位の長さは要素のテキストの垂直の長さに基づいて決定されます; 2. rem、相対的なフォントの長さの単位、相対的なフォント長の単位のみルート要素、つまり長さを決定するための HTML 要素のフォントサイズ、3. %、親要素の幅またはフォントサイズに対する相対値 (パーセンテージとして表示)、4. px、ピクセル、モニター画面の解像度に対する相対値、5. vw、相対値ブラウザウィンドウの幅; 6. vh、ブラウザウィンドウの高さに対する相対値; 7. ch、使用されているフォントの数字 0 の高さに対する相対値。

CSSで長さを設定する単位は何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&HTML5 バージョン、Dell G3 コンピューター。

CSS スタイルは、セレクター、属性、値の 3 つの部分で構成されます (例: p{width: 100px;}) 特定の属性値を設定する場合、その値に対応する単位が関与する場合があります。 CSS はさまざまな長さの単位をサポートしており、タイプに応じて、絶対的な長さの単位 (インチ、センチメートル、ポイントなど) と相対的な長さの単位 (パーセンテージなど) の 2 つのカテゴリに分類できます。

1. 相対長さの単位

相対長さの単位は、この単位に固定値がなく、その値は次の影響を受けることを意味します。他の要素の属性 (ブラウザウィンドウのサイズ、親要素のサイズなど)、相対的な長さの単位は、レスポンシブレイアウトに非常に適しています。

次の表に、CSS でサポートされている相対長単位を示します。

#remp{font-size: 1.2rem;}ex英語の小文字 x の高さに相対使用されるフォントで、x の高さが決定できない場合、高さは 0.5emp{font-size: 1ex;}ch## を使用して計算されます。 ## を計算します。 #vw ブラウザウィンドウの幅に対する相対値、1vw = ウィンドウ幅の 1%p{font-size: 5vw;}vh ブラウザウィンドウの高さに対する相対値、1vh = ウィンドウの高さの 1%p{font-size: 5vh;}vminvw と vh の間の小さい値 p{font-size: 5vmin;}vmaxvw と vh の間の大きい値p{ font-size: 5vmax;}%親要素の幅またはフォントサイズdiv{width: 55%}[例] 以下では、包括的な例を使用して、の使用法を示します。相対長さの単位:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS中的单位</title>
        <style>
            .box{
                width: 60vw;
                height: 88vh;
                border: 1ex solid black;
                font-size: 16px;
            }
            .info{
                font-size: 2em;
            }
            .ex > span{
                font-size: 3ex;
            }
            .ch > span{
                font-size: 4ch;
            }
        </style>
    </head> 
    <body>
        <div class="box">
            这是 16px 的字体
            <p class="info">这是 2em 的字体</p>
            <p class="ex">
                x：<span>这是 3ex 的字体</span>
            </p>
            <p class="ch">
                0：<span>这是 4ch 的字体</span>
            </p>
        </div>  
    </body>
</html>

Unit	Description	Example
em	相対フォント長単位。その単位の長さは、要素のテキストの垂直方向の長さに基づいて決定されます。独自の font-size (フォントサイズ) 属性の値に関して、設定されていない場合は、親要素の font-size 属性の値を継承します。1em は、次の値と同等です。 font-size などの font-size 属性。値が 16px の場合、1em は 16px に等しく、2em は 32px	p{line-height:2em;}## に等しくなります。
	相対フォント長単位。長さはルート要素、つまり html 要素のフォントサイズを基準にしてのみ決定されます。ルート要素の font-size 属性のサイズを基準にします `たとえば、ルート要素の font-size が 100px の場合、1.2rem に相当します。～ 120px`

# 使用されているフォントの数字 0 の高さを基準にします。0 の高さが決定できない場合は、0.5em を使用して	p{line-height: 3ch}

実行結果は以下のとおりです:

CSSで長さを設定する単位は何ですか?

2. 絶対長さの単位

絶対長さの単位は実際の物理的なサイズを表し、そのサイズは固定されており、他の要素のサイズの変化によって変化することはありません。次の表に、CSS でサポートされている絶対長単位を示します。

#UnitDescriptionExampleCMMMインチ (1in = 96px = 2.54cm)##pxピクセルはモニター画面の解像度を基準にしています (1px = 1/96インチ) p{font-size: 16px;}point は、特殊な印刷単位「Point」であり、「」とも呼ばれます。 point" (1pt = 1/72in) p{font-size: 16pt;}pcpica、「」と呼ぶことができます。中国語の「ピカ」は、印刷業界でフォントサイズを表すために使用される単位で、我が国の新しい 4 号活字のサイズ (1pc = 12pt) p{font-size: 5pc に相当します。 ;}

<!DOCTYPE html>
<html>
    <head>
        <title>CSS中的单位</title>
        <style>
            .box{
                width: 4in;
                height: 4.5cm;
                border: 2mm solid black;
                font-size: 16px;
            }
            .pt{
                font-size: 2pt;
            }
            .pc{
                font-size: 3pc;
            }
        </style>
    </head> 
    <body>
        <div class="box">
            这是 16px 的字体
            <p class="pt">这是 2pt 的字体</p>
            <p class="pc">这是 3pc 的字体</p>
        </div>  
    </body>
</html>

		#cm
p{font-size: 0.5cm;}		mm
p{font-size: 5mm;}		in
p{ font -size: 1in;}
	pt

	#[例] 以下では、絶対的な長さ単位の使用を示す包括的な例を使用しています。	実行結果は、下の図:

(学習ビデオ共有:

Web フロントエンド

)

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

html5 css css3 html 继承选择器

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：CSS言語のどの項目がフローティング構文ですか?次の記事：CSS言語のどの項目がフローティング構文ですか?

続きを見る