CSS单位：em、rem、%、vh、vw、vmin、vmax

最新推荐文章于 2025-06-29 18:11:31 发布

乖乖我左边的房子在动

最新推荐文章于 2025-06-29 18:11:31 发布

阅读量700

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/Gong_01/article/details/125666973

前端专栏收录该内容

6 篇文章

订阅专栏

浏览器默认的字号是16px

改变该设定：

html {
    font-size: 62.5%;
}
//此时的浏览器默认字号为10px

相当于：

px	rem
10px	1rem 1em
12px	1.2rem 1.2em
14px	1.4rem 1.4em
16px	1.6rem 1.6em

1. em：相对于父元素长度单位，1em=元素中文本的1个垂直高度

如果元素自身设置了font-size，那么参考文本大小就是自身的font-size大小
如果元素自身没有设置font-size，那么参考文本大小就是父元素的font-size大小
为元素设置font-size时，如果使用em作为单位，那么参考文本大小是父元素的font-size大小
子元素中除了font-size的em是根据父元素的font-size确定的，其他所有em都是根据自身的font-size确定的

(最后一点举例：)

<style>
    body {
        font-size: 12px;
    }
    div {
        font-size: 2em; /* 2em = 12px * 2 = 24px */
        width: 10em;    /* 10em = 24px * 10 = 240px */
    }
</style>
<body>
    <div></div>
</body>

2. rem：相对于根元素长度单位

3.vh and vw： 相对于视窗（浏览器实际显示内容的区域，即网页浏览器不包括工具栏和按钮的部分）的高度和宽度，1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度

比如：浏览器高度900px，宽度为750px, 1 vh = 900px/100 = 9 px，1vw = 750px/100 = 7.5 px

4.vmin and vmax：关于视口高度和宽度两者的最小值或者最大值（vmin：取当前vw和vh中较小的那一个值，vmax：取当前vw和vh中较大的那一个值）

5、%：百分比，相对长度单位，相对于父元素的百分比值，使用时必须从根容器就设置好百分比

div{
  height：100%；
}
//该百分比要有效，父级标签的高度必须要设定（父元素的高度没有设置，则height只是一个默认值：height: auto; 当浏览器根据这样一个默认值来计算百分比高度时，只能得到undefined的结果），如果高度要等于浏览器的高度，必须同时设置html，body{ height：100%;}然后目标标签div每一个父级标签的高度都必须是100%

关于CSS中所有可以使用 % 作为属性值的样式属性，他们的基数取决于什么：

https://blog.csdn.net/weixin_45092437/article/details/123167480