CSS长度单位总结

之前的研究表明，CSS样式由三部分组成：选择器、属性和值（例如p{width: 100px;} ），并且在设置值时，可能会涉及到该值对应的单位。我知道。属性。 CSS 支持各种长度单位。这些长度单位可以分为两种类型：绝对长度单位（例如英寸、厘米和磅）和相对长度单位（例如百分比）。在本节中，我们将快速浏览一下 CSS 中的一些度量单位。

1. 相对长度单位

当该单位没有固定值并且其值受其他元素的属性（例如浏览器窗口的大小或父元素的大小）影响时，使用相对长度单位就非常合适。对于响应式布局。下表显示了 CSS 支持的相对长度单位。

单元	解释	例子
嗯	如果没有设置自己的font-size属性的值，则继承父元素的font-size属性的值，例如，如果font-size值为16px。，1em 等于 16px，2em 等于 32px	p{行高:2em;}
雷姆	基于根元素`<html>`的 font-size 属性的大小。例如，如果根元素的 font-size 为 100px，则 1.2rem 相当于 120px。	p{字体大小：1.2rem;}
前任	如果您不知道所用字体中小写字母x的高度，则按0.5em计算。	p{字体大小：1ex;}
ch	如果您不知道所使用的字体中0的高度，则将其计算为0.5em。	p{行高：3ch}
大众汽车	对于浏览器窗口宽度，1vw = 窗口宽度的 1%	p{字体大小：5vw;}
维赫	对于浏览器窗口高度，1vh = 窗口高度的 1%	p{字体大小：5vh;}
最小电压	vw 和 vh 中较小的一个	p{字体大小：5vmin;}
最大速度	vw 和 vh 中较大的一个	p{字体大小：5vmax;}
%	父元素宽度或字体大小的百分比	div{宽度：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>

执行结果如下图所示。

[标题id =“attachment_480”对齐=“aligncenter”宽度=“1024”]

图 1：应用相对长度单位[/caption]

2.绝对长度单位

绝对长度单位代表实际的物理尺寸；它们的尺寸是固定的，不会因为其他元素尺寸的变化而改变。下表显示了 CSS 支持的绝对长度单位。

单元	解释	例子
厘米	厘米	p{字体大小：0.5cm;}
毫米	唔	p{字体大小：5mm;}
在	英寸（1 英寸 = 96 像素 = 2.54 厘米）	p{字体大小：1in;}
像素	像素（1 像素 = 1/96 英寸）	p{字体大小：16px;}
点	点是一种特殊的印刷单位“磅”，也称为“点”（1pt = 1/72in）	p{字体大小：16pt;}
个人电脑	Paika，日语可称为“paika”。这是印刷行业用来表示字体大小的单位，相当于我国新的4号铅字尺寸（1pc=12pt）。	p{字体大小：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>

执行结果如下图所示。

[标题id =“attachment_481”对齐=“aligncenter”宽度=“1024”]

图 2：应用绝对长度单位[/caption]

JSON

之前的研究表明，CSS样式由三部分组成：选择器、属性和值（例如p{width: 100px;} ），并且在设置值时，可能会涉及到该值对应的单位。我知道。属性。 CSS 支持各种长度单位。这些长度单位可以分为两种类型：绝对长度单位（例如英寸、厘米和磅）和相对长度单位（例如百分比）。在本节中，我们将快速浏览一下 CSS 中的一些度量单位。

1. 相对长度单位

当该单位没有固定值并且其值受其他元素的属性（例如浏览器窗口的大小或父元素的大小）影响时，使用相对长度单位就非常合适。对于响应式布局。下表显示了 CSS 支持的相对长度单位。

单元	解释	例子
嗯	如果没有设置自己的font-size属性的值，则继承父元素的font-size属性的值，例如，如果font-size值为16px。，1em 等于 16px，2em 等于 32px	p{行高:2em;}
雷姆	基于根元素`<html>`的 font-size 属性的大小。例如，如果根元素的 font-size 为 100px，则 1.2rem 相当于 120px。	p{字体大小：1.2rem;}
前任	如果您不知道所用字体中小写字母x的高度，则按0.5em计算。	p{字体大小：1ex;}
ch	如果您不知道所使用的字体中0的高度，则将其计算为0.5em。	p{行高：3ch}
大众汽车	对于浏览器窗口宽度，1vw = 窗口宽度的 1%	p{字体大小：5vw;}
维赫	对于浏览器窗口高度，1vh = 窗口高度的 1%	p{字体大小：5vh;}
最小电压	vw 和 vh 中较小的一个	p{字体大小：5vmin;}
最大速度	vw 和 vh 中较大的一个	p{字体大小：5vmax;}
%	父元素宽度或字体大小的百分比	div{宽度：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>

执行结果如下图所示。

[标题id =“attachment_480”对齐=“aligncenter”宽度=“1024”]

图 1：应用相对长度单位[/caption]

2.绝对长度单位

绝对长度单位代表实际的物理尺寸；它们的尺寸是固定的，不会因为其他元素尺寸的变化而改变。下表显示了 CSS 支持的绝对长度单位。

单元	解释	例子
厘米	厘米	p{字体大小：0.5cm;}
毫米	唔	p{字体大小：5mm;}
在	英寸（1 英寸 = 96 像素 = 2.54 厘米）	p{字体大小：1in;}
像素	像素（1 像素 = 1/96 英寸）	p{字体大小：16px;}
点	点是一种特殊的印刷单位“磅”，也称为“点”（1pt = 1/72in）	p{字体大小：16pt;}
个人电脑	Paika，日语可称为“paika”。这是印刷行业用来表示字体大小的单位，相当于我国新的4号铅字尺寸（1pc=12pt）。	p{字体大小：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>

执行结果如下图所示。

[标题id =“attachment_481”对齐=“aligncenter”宽度=“1024”]

图 2：应用绝对长度单位[/caption]

JSON