css的常用长度单位有哪些?

css的常用长度单位有哪些?下面本篇文章就来给大家介绍一下CSS常用长度单位。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

px(像素)

px 是 CSS 中最常用的长度单位,可以用来指定字体大小,元素的宽度、高度、边框、内边距,外边距的大小等等, 它是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI

px 单位的值必须是整数值

与px相关的一些单位

in - 表示英寸,是一个物理单位,在CSS中被直接映射成为px; 转换的方法是 1in = 96px

cm - 表示厘米,在生活中常用的单位,同样被映射为 px; 转换方法为 1cm = 37.8px

mm - 表示毫米,与cm类似,转换方法为 1mm = 0.1cm = 3.78px

百分比/strong>

常见 相对长度单位,相对于父元素的尺寸的取值,实际使用中,如果父元素是一个非稳定的取值,可能会导致父元素被撑开,而实际值取决于其祖先元素中最近的一个拥有稳定取值的元素。整数取值,并不适用于解决自适应问题。

em

常见 相对长度单位,取决于目标元素字体尺寸。

em 单位的值等于基本元素或父元素的字体大小。

例如,如果父元素的字体大小为16px,则所有直接子元素中的1em值将计算为16px。基于基本单元的知识,可以很方便的增大或减小子元素的字体大小。 这里的值不需要是整数。

使用em可以轻松地将各种元素的字体大小保持在固定比例。

例如,如果父元素的font-size的值为50px,则将子元素的字体大小设置为2em, 相当于设置为100px。 类似的,将它设置为0.5em将使得子元素的字体大小为25px。

另外有一点需要注意:如果想要通过 em 设置当前元素的大小值,并且不是相对于直接父元素,而是相对父元素的父元素或者根元素,就会变得很复杂,因为每一层都要进行计算

例如:

<div class="parent">
    <div class="child1">
        <div class="child2"></div>
    </div>
</div>

.parent {
    font-size: 20px;
}

.child1 {
    font-size: 1.5em;
}

.child2 {
    font-size: 1.2em;
}

那么就需要经过计算: child1的字体大小为 20 x 1.5 = 30px , 而 child2 的字体大小就等于 20 x 1.5 x 1.2 = 36px

rem

CSS3中加入的 相对长度单位,取决于文档根元素(通常为:root)的字体尺寸,适用于依据字体尺寸进行的排版,适用于自适应。

rem 也是一个相对单位,与 em 的不同点在于rem的长度总是相对于根元素, 而不是像 em 使用级联的方式来计算尺寸。这种单位使用起来就简单很多

同样是上面的例子,不过使用的单位是 rem

<div class="parent">
    <div class="child1">
        <div class="child2"></div>
    </div>
</div>

.parent {
    font-size: 20px;
}

.child1 {
    font-size: 1.5rem;
}

.child2 {
    font-size: 1.2rem;
}

那么就需要经过计算: child1的字体大小为 16 x 1.5 = 24px , 而 child2 的字体大小就等于 16 x 1.2 = 19.2px ; 这里为什么是使用 16 来乘而不是 20 呢?这就是因为rem的长度总是相对于根元素, 就是指 html, 而 html文档中默认字体大小为 16px, 因此这里使用 16来计算

vw和vh

CSS3中加入的 相对长度单位,取决于浏览器视窗的宽(高),1vw 即为浏览器视窗宽度的1/100,适用于依据屏幕宽或高进行的排版,适用于自适应。

vmin和vmax

CSS3中加入的 相对长度单位,取决于浏览器视窗的宽或高中最小(最大)尺寸的轴,适用于依据屏幕最值宽或高进行的排版,适用于自适应。

pt (点)

绝对长度单位,多用于字体尺寸,1px = 0.75pt。

附:

绝对长度单位换算公式: 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

以上就是css的常用长度单位有哪些?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读