CSS长度单位：vh、vw、vmin、vmax、em、rem、ex、ch、px

最新推荐文章于 2024-06-03 20:51:13 发布

blinkbean

最新推荐文章于 2024-06-03 20:51:13 发布

阅读量8.1k

点赞数 3

分类专栏： CSS 文章标签： css3长度单位 vh vmin rem vmax

本文链接：https://blog.csdn.net/liyuxing6639801/article/details/70941068

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS的长度单位。

一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。
长度单位包括包括：相对单位和绝对单位。
相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
绝对长度单位包括有： cm, mm, q, in, pt, pc, px

1、vh、vw

有点像width和height属性，v（viewpoint）也就是说vh、vw直接对应的是当前视口的尺寸。

width:100vh;
height:100vh;

width:100%;
height:100%;

以上两种表达有什么区别呢。如果浏览器高度为1000px，宽度为800px，那么1vh=1000/100=10px，1vw=800/100=8px；而 %要受到父元素的约束，并不能直接根据浏览器的尺寸计算。

2、vmin、vmax

vmin表示当前宽和高的小者，vmax则表示当前宽和高的大者。

3、em、rem

em同样是个相对大小的单位，下面是css3参考手册中的解释

相对长度单位。相对于当前对象内文本的字体尺寸。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

rem

相对长度单位。相对于根元素(即html元素)font-size计算值的倍数

来自梦柯网的例子
body {
    font-size: 14px;
}
div {
    font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}

<body>
    <div>
        Test <!-- 14 * 1.2 = 16.8px -->
        <div>
            Test <!-- 16.8 * 1.2 = 20.16px -->
            <div>
                Test <!-- 20.16 * 1.2 = 24.192px -->
            </div>
        </div>
    </div>
</body>

也就是说这样设置的话，每层都要看它的父元素，而这并不总是我们想要的，rem可以来补充em不足。

r（root）通常指<html>标签，也就是只要用rem作为单位，都会以<html>标签的设置为基础。

4、ex

相对长度单位。相对于字符“x”的高度。通常为字体高度的一半。

如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

5、ch，是CSS3新增单位，有少部分浏览器不支持，如Android browser

数字“0”的宽度

6、px

相对长度单位。像素（Pixels）。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

7、q

1/4毫米（quarter-millimeters）。绝对长度单位。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

8、in

英寸（Inches）。绝对长度单位。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

9、pt

点（Points）。绝对长度单位。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

10、pc

派卡（Picas）。绝对长度单位。相当于我国新四号铅字的尺寸。

1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px

11、cm/mm

厘米/毫米

blinkbean

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
CSS长度单位：vh、vw、vmin、vmax、em、rem、ex、ch、px

CSS的长度单位。一些属性可能允许有负长度值，或者有一定的范围限制。如果不支持负长度值，那应该变换到能够被支持的最近的一个长度值。长度单位包括包括：相对单位和绝对单位。相对长度单位包括有： em, ex, ch, rem, vw, vh, vmax, vmin绝对长度单位包括有： cm, mm, q, in, pt, pc, px1、vh、vw有点像width和heig
复制链接

扫一扫