Dotcpp  >  编程教程  >  CSS语法  >  CSS长度单位详细总结

CSS长度单位详细总结

点击打开在线编译器,边学边练

⼀、CSS中的长度单位

在CSS中以不少值是以长度作为值的,盒⼦模型的属性就是⼀些明显的值属性:width、height、margin、padding、border。除此之外还有很多的css属性的值同样也是长度值,像偏移量offset、box-shadow的⼤⼩或字体⼤⼩、间距等,在CSS中存在众多的长度单位,下⾯我们就来说⼀下长度单位以及它们的⽤途。


⼆、简单的介绍(长度单位都有哪些:)

在CSS的长度单位分为两种:绝对长度相对长度

绝对长度:px、in、cm、mm、pt、pc;

相对长度:em、rem、ex、vh、vw、vmin、vmax、%、fr。


三、详细的介绍

1. 绝对长度单位

绝对长度单位表示一个真实的物理尺寸,它的大小是固定的,不会因为其它元素尺寸的变化而变化。下表中列举了 CSS 中支持的绝对长度单位。

px:表⽰像素,像素是相对于屏幕 分辨率 的,页⾯按照精确像素展⽰,不会因为其它元素的尺⼨变化⽽变化,像素仍然是最典型的度量单位,例如: windows 的⽤户所使⽤的 分辨率96像素/英⼨ ,⽽ mac 的⽤户所使⽤的分辨率⼀般是 72像素/英⼨ ,⼀般javascript语⾔⾥的单位就是使⽤的像素。

div {
width: 200px;
}

in:英⼨(inch)是⼀个物理度量⽂件,但是在CSS领域,英⼨只不过被直接映射成像素罢了。(1in == 2.54cm == 96px)

div {
width: 2in;
}

cm:厘⽶是⽐较熟悉有⽤的物理度量单位。它也映射成像素。(1cm == 37.8px)

div {
width: 20cm;
}

mm:毫⽶是个⼩数量级的物理度量单位。(1mm == 0.1cm == 3.78px )

div {
width: 200mm;
}

pt:点(Points)也是物理长度单位。(1pt == 1/72in == 96/72px)

div {
width: 20pt;
}

pc:派卡(Pica)和points⼀样,只不过(1pc == 12pt)。

div {
width: 20pt;
}

举例:

<!DOCTYPE html>
<html>
    <head>
        <title>绝对长度单位</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>

呈现出来的结果如下:

绝对长度单位


2. 相对长度单位

相对长度单位指的是这个单位没有一个固定的值,它的值受到其它元素属性(例如浏览器窗口的大小、父级元素的大小)的影响,在响应式布局方面相对长度单位非常适用,下表中列举了 CSS 中支持的相对长度单位。

em:em是⼀个相对单位,相对于当前对象内⽂本的字体尺⼨,如当前对⾏内的字体尺⼨未被⼈设置,则相对于浏览器 的默认字体尺⼨。起初排版度量时是基于当前字体⼤写字母 M 的尺⼨的,当改变font-family时,它的尺⼨不会发⽣改变,但在改变font-size的⼤⼩时,它的尺⼨就会发⽣改变, em 会继承 ⽗级元素 的字体⼤⼩。(下⾯有关于 em 和 rem 的例⼦)

在没有任何CSS规则的前提下:(1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm)

div {
width:40em;
}

rem:rem 和 em ⼀样是⼀个相对单位,但是和 em 不同的是 rem 总是相对于 根元素 (如:root{}),⽽不像em⼀样使⽤级联的⽅式来计算尺⼨。这种相对单位使⽤起来更简单。

div {
width:40rem;
}

ex:相对长度单位,相对于字符 "x" 的⾼度,此⾼度通常为字体尺⼨的⼀半,如当前对⾏内的⽂本的字体尺⼨未被⼈为设置,这相对于浏览器的默认字体尺⼨。和 em 不同,当改变 font-family 时 em 不会改变,⽽ ex 单位会变化,因为⼀个单位的值和那个字体是特殊的约束关系。

div {
width:40ex;
}

ch:ch的内涵和ex相对于x的⾼度相似,只是 ch 是基于字符 0 的宽度的⽽不是基于字符 x ⾼度的。1ch也就是数字0的宽度,当 fontfamily 改变的时候 ch 也会随着改变。

div {
width:40ch;
}

vw:vw(viewpoint width)是 可视宽度 单位(视窗宽度), 1vw 等于可视区宽度的 百分之⼀ ,vw单位跟百分⽐很相似,不同的是vw所有的值对所有的元素都⼀样,与他们⽗元素 或 ⽗元素的宽度 ⽆关,有点像rem单位那样总是相对于根元素。(下⾯有关于 vh 和 vw 的例⼦)

div {
width:40vw;
}

vh:vh(viewport height)和vw(viewport width)单位⼀样,不同的vh是相对于可视区的⾼度(视窗⾼度)。

div {
width:40vh;
}

vmin:vmin的值是当前vw和vh中较小的值,在标准 尺⼨类型的使⽤实例中,和由⾃⼰确定屏幕大小的vw、vh单位相⽐,vmin是⼀个更有⽤的度量标准。

div {
width:40vmin;
}

vmax:vmax的值是vw和vh中 较⼤ 的那个值。

div {
width:40vmax;
}

%:百分比,以百分⽐为单位的长度值 是基于具有相同属性的 ⽗元素 的长度值,例如:如果⼀个元素呈现的宽度是450px,子元素的宽度设为50%,那么⼦元素呈现的宽度为225px。(如果所有的⽗级元素都没有设置具体的值,那么设置百分⽐⾼度那会导致所有的元素的值都为0)。

div {
width:40%;
}

fr:gird布局中利⽤的⼀个长度单位,在gird布局中,我们经常会利⽤fr来进⾏计算。

下⾯这句语句则是声明三⾏的gird,第⼀⾏的⾼度为30px,第⼆⾏的同样为30px,第三⾏的为60px。

grid-template-rows: 30px 1fr 2fr;

举例:

<!DOCTYPE html>
<html>
    <head>
        <title>相对长度单位</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>

展示如下:相对长度单位


3. 长度单位的总结:

(1)⾸先要明⽩⼀点,那就是屏幕分辨率究竟是什么,我们知道在不同的分辨率下 ,像素点的⼤⼩是不同的,所以同⼀个⽹页,以 px 作长度单位时,在不同的分辨率下显⽰的⼤⼩是不同的,在低分辨率下,像素点较⼤,细节不够清晰,虽然显⽰的页⾯也⼤,但模糊不清。

(2)实际上,所有的单位,⽆论是相对还是绝对单位,(在屏幕上的显⽰时)最终都是转化为px单位的,所以⼀般来说,在⽹页制作时,基本单位都选择 px ⽽不是 pt,因为 pt 也是通过浏览器的 DPI 转成 px 显⽰(⽐如FireFox的DPI是96,则有9pt = 12px)。不仅pt,cm、in、mm等单位也是转换成px的,所以⽆论⽤绝对还是相对,在不同的分辨率下都是会变的,不要以为把长度设置为3cm,它就会在不同的分辨率下保持3cm不变。

(3)我觉得 pt 还是很有⽤的⼀个单位,在打印时尤其如此,现在有的⽹页以及经实现了显⽰是⼀个页⾯,打印⽤另⼀种⽅式,我想在打印上就采⽤ pt 吧,因为针对不同的分辨率,打印出来的页⾯都是⼀样的⼤⼩,这就是绝对单位的第⼀特征,但是依然要记住,在显⽰上,这个单位代表的不是真实物理长度,它也是要根据像素的实际⼤⼩(这个跟分辨率有关)进⾏调整的。

(4)实际上我们可以这样理解,将px看做绝对单位(显⽰上的绝对单位),其它的单位都是以 它为基础的,⽐如em,它就是相对当前⽂本字体的⾼度(假设当前⽂本字体的尺⼨是12px,我们设置新的字体为1.5em,则新的字体尺⼨转换为12 * 1.5 = 18px),要记住的就是em是相对于 ⽗级元素的⾼度 ,假设第⼀个div中我们设置了字体为12px,第⼆级我们设置1.5em,第三级我们设置1.5em,实际上字体的显⽰是:第⼀级12px,第⼆级18px,第三级18 * 1.5 = 27px。


本文固定URL:https://www.dotcpp.com/course/1129

上一课:

CSS选择符

下一课:

CSS注释语法

CSS教程
第一章 CSS简介
第二章 CSS语法
Dotcpp在线编译      (登录可减少运行等待时间)