em/rem/vh/vw的相关解释

爱发疯的胡萝卜GG

已于 2025-09-02 15:03:44 修改

阅读量140

点赞数

CC 4.0 BY-SA版权

分类专栏：前端CSS 文章标签： css 前端

于 2019-10-29 22:27:15 首次发布

本文链接：https://blog.csdn.net/wjj131419/article/details/102809910

前端CSS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS中修改placeholder样式的技巧，包括通用写法和兼容前缀写法，以及如何使超出宽度的内容显示为省略号。同时，深入解析了em、rem、vh和vw等字体单位的应用场景和特性，帮助读者理解并掌握这些单位在不同布局中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<a href="javascript:history.go(-1)">回到上一个网页</a>

——修改placeholder提示的样式：
1.除IE外通用写法
 类名或标签名::placeholder {color: red;}
2.加兼容前缀写法

css超出一行显示省略号：
给定宽度(width:100px)、
超出隐藏（overflow:hidden）、
强制在同一行显示（white-space: nowrap）、
省略号（text-overflow:ellipsis）

——常见字体单位——
1.em
移动端常用的字体尺寸单位，相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5。
但当div进行嵌套时，em始终按当前div继承的字体大小来缩放。

2.rem
r是root的意思，即相对于根节点html的font-size进行缩放，当有嵌套关系时，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。

3.vh
vh就是当前屏幕可见高度的1%，即 height:100vh == height:100%;
它的好处是当元素没有内容时候，设置height:100%该元素不会被撑开，
但设置height:100vh，该元素会被撑开屏幕高度一致。

4.vw
viewpoint width，视窗宽度，1vw = 视窗宽度的1%。
vw就是当前屏幕宽度的1%，
当设置width:100%，被设置元素的宽度是按照父元素的宽度来设置，
但100vw是相对于屏幕可见宽度来设置，所以会出现50vw 比50%大的情况。