CSS常见单位总结 px，%，em，rem，vw，vh

已于 2022-04-06 20:43:46 修改
阅读量1.4k 收藏 11
点赞数 5
分类专栏： css 文章标签： 前端 css3
于 2022-04-06 15:21:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Allurewuhui/article/details/123990712
版权
本文详细介绍了CSS中的常见长度单位，包括绝对单位px，相对单位%、em、rem以及视口单位vw和vh。px保持固定大小，%基于父元素尺寸，em根据父元素字体大小计算，rem参照根元素字体大小。vw和vh则随视口变化。理解这些单位有助于创建响应式网页设计。

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

  • 1.px
    • px是绝对单位，不会随浏览器页面大小的变化而变化
    • px其实就是像素点，相对于自身屏幕尺寸。
  • 2. %
    • 相对单位
    • % 相对于其父元素的宽高进行百分比分配，若父元素宽高改变，子元素设置了 % 则也会随之改变
  • 3.vw 和 vh
    • 相对单位
    • vw 和 vh 是相对于视口宽高的单位
    • 视口就是目前能看到的整个展示内容的屏幕大小
    • vw 和 vh 只有0-100的取值，类似于 百分比 %
    • vw 和 vh 会随视口的变化而变化
  • 4.em
    • em是相对单位，最终大小由计算得出
    • 计算规则是相对于其父元素预先设定好的 font-size 大小去计算的
      • 比如父元素设置了 font-size ：40px；
      • 子元素中字体大小设置为 font-size：2em；
      • 则子元素字体最终展示的大小为 40 * 2 = 80px
    • 使用em单位如果出现嵌套关系，字体大小会不断累乘
    • 如果没有特定的父元素设置 font-size 属性，则默认根据 body 标签内设置的 font-size 进行计算，默认值是16px
  • 5.rem
    • rem是相对 HTML 根标签元素中设置的 font-size 大小来进行计算
    • 通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
      • 如HTML标签设置 font-size：20px；其他元素内使用了rem单位 如 width：10rem；
      • 则最终计算得出 width ：200px；（20px*10rem）
px % em rem vw / vh 区别
m0_38066007的博客
05-19 174
px 基本单位，绝对单位 （其他的都是相对单位） % 相对于父元素的 宽度/高度 比例 em 相对于当前元素的 font-size rem 相对于根节点的 font-size vw / vh 1vw 是屏幕宽度的 1% 1vh 是屏幕高度的 1% vmin 两者的最小值 vmax 两者的最大值 1 ...
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
11-21
1 、px px就是pixel（像素）的缩写，相对长度单位，相对于屏幕分辨率。 2、em 参考物是父元素的font-size，具有继承的特点。浏览器默认字体是16px，整个页面内1em不是一个固定的值。 字体大小同样都是1.5em，但是效果却截然不同，按照W3C提供的公式，我们可以计算下： class为id1的div字体大小继承自父元素body：16px*1.5em = 24px class为id2的div字体大小继承自父元素id1：24px*1.5em = 36px class为id3的div字体大小继承自父元素id2：36px*1.5em = 54px 3、rem rem是CSS3新增的一
css 布局 单位 vh
qq_35226176的博客
01-28 480
vh 可视区域单位 vh：1vh等于视口高度的1%，100则满屏，50则半屏 详细请看 css3自适应布局单位vw,vh详解
CSS样式中长度单位含义解析：rpx、px、vw、vh、em、rem、pt
Front end development engineer
02-10 4260
CSS样式中长度单位含义解析：rpx、px、vw、vh、em、rem、pt
CSS3 使用 calc() 计算高度 vh px
热门推荐
Ranx的博客
09-28 13万+
1、px     像素，我们在网页布局中一般都是用px。 2、百分比    百分比一般宽泛的讲是相对于父元素，自适应网页布局越来越多，百分比也经常用到了。 3、Viewport     viewport：可视窗口，也就是浏览器。     vw Viewport宽度， 1vw 等于viewport宽度的1%     vh Viewport
css实现自适应之单位vh
weixin_52418790的博客
12-26 2435
vh（Viewport Height）是前端开发中的一个动态单位，是一个相对于网页视口（Viewport）的单位。（与vh一起的还有vw（Viewport Width）） 在桌面端，视口指的是浏览器的可视区域即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。 系统会将视口的高度分为100份，1vh就占用视口高度的百分之一（宽度同） 1vh等于视口高度的1%（1vw等于视口宽度的1%）。 vw和vh与百分比不同的是，百分比永远
css单位——vh vw em rem等详解
weixin_30379531的博客
07-21 278
最近看别人写代码，用到了height:100vh;当时感觉很有意思，以前没有见过vh这个单位，于是乎就到CSS3参考手册找答案了。。。自己顺便做了下总结： 1.vh vw:相对于视口的高度，宽度。视口被均分为100单位的vh,vw，神马意思呢？看个demo 1 <!DOCTYPE html> 2 <html lang="Zh-cn"> 3 4 ...
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
09-24
CSS3中的长度单位用于表示网页中元素的尺寸、间距、位置等属性，主要包括像素单位(px)、相对长度单位(em、rem)、视口单位(vh、vw、vmin、vmax)以及其它一些单位(如%、in、cm、mm、pt、pc、ex、ch等)。以下是对这些...
px、em、rem、%、vw、vh单位之间的区别
01-08
本文将详细介绍px、em、rem、%、vw和vh这六个单位的区别及其应用场景。 1. **px (像素)**：像素是绝对长度单位，代表显示器上的最小物理点。1px始终表示相同大小的点，不会随浏览器窗口或用户设置变化。它适用于...
CSS3新增的视口单位Vh、Vw单位
weixin_42274805的博客
02-27 1109
讲解vw vh
CSS单位之vw、vh、vmin、vmax、%
时光清浅处，一步一安然
02-14 4067
视窗(Viewport)是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。position:absolute时，将相对于其相对的元素宽度（递归父元素直到第一个设置了position的元素）。注意：position:fixed时，无论当前元素放在哪里，将相对于窗口宽度。1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。下面通过一个例子来说明。下面是用一个例子来说明。
CSS中的单位px、em、rem、vh、vw、vmin、vmax
Vincent的博客
10-18 1333
1、px 相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 2、em 相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。 看下面例子： HTML:: <body>body <div class="div1">div1 <div class="div2">div2 &l...
CSS尺寸单位 % px em rem vw/vh 详解
莹莹同学
11-27 1275
在CSS中，尺寸单位分为两类：相对长度单位和绝对长度单位。相对长度单位按照不同的参考元素，又可以分为字体相对单位和视窗相对单位。字体相对单位有：em、ex、ch、rem；视窗相对单位有：vw、vh、vmin、vmax几种。绝对长度单位则是固定尺寸，它们采用的是物理度量单位：cm、mm、in、px、pt以及pc。但在实际应用中，我们使用最广泛的则是em、rem、px以及百分比（%）来度量页面元素的尺寸。 px 为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位，是不能变动的；它的
CSS中的px、rem、em、vw/vh 总结
前端学习博客
01-16 1587
文章目录一.px1. 像素二.百分比(1)子元素height和width的百分比(2)top和bottom 、left和right(3)padding、margin(4)border-radius三.自适应场景下的rem解决方案四.通过vw/vh来实现自适应五.混合使用calc()语法 一.px 在静态网页中，我们经常用像素（px）作为单位，来描述一个元素的宽高以及定位信息。在pc端，通常认为css中,1px所表示的真实长度是固定的。 在pc端，字体通常为16px。 1. 像素 像素是网页布局的基础，一个像
Css单位px，rem，em，vw，vh的区别
ZhiShiCaiFu的博客
03-31 463
px px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对与屏幕分辨率而言的。 这就是为啥我们在项目中使用px作为单位，在各种设备上也不会发生比例失调的原因 em em是相对长度单位。相对当前节点的字体大小（font-size）。如果本节点没有font-size，那么就取父节点的。 em适用于小区域的环境 rem rem是CSS3新增的一个相对单位，rem是相对HTML根元素()的字体大小(font-size)来计算长度单位的 html{font-size: 20px } d
解密CSS单位：px、em、vh的区别与应用
todoitbo的博客
04-09 2705
本文将深入探讨CSS中常用的单位px、em、vh的区别与应用场景。我们将详细解释这些单位的特点，以及在实际开发中如何选择合适的单位来实现设计需求。
对px、rpx、 em、rem、vw、vh 的了解，px 和 em 的区别？在网页中的使用奇数还是偶数的字体?自定义字体的使用场景？如何实现小于12px的字体效果？实现多行文本溢出省略效果，考虑兼容性
星辰迷上大海的博客
01-05 1304
px是最常用的单位，rpx用于小程序中的自适应布局，em和rem用于相对于父元素和根元素的字体大小，vw和vh用于相对于视窗宽度和高度的单位。
css样式中的vw什么意思,css中的px,em,rem,vw,vh的用法与区别
weixin_32546235的博客
08-03 1165
1、px：绝对单位，页面按精确像素展示2、em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算(浏览器默认字体是16px)，整个页面内1em不是一个固定的值。em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小...
CSS单位px、rem、em、vw、vh的区别
zheshiyangyang的博客
05-22 1604
这几天在写个人网站，因为要适配和，因此了解到了一个：“”()，现在我们来讨论一下中的单位，只有掌握好了这些单位，我们才可以熟练使用“不同的单位修改盒子的宽度。
rem和em和px vh vw和% 移动端长度单位
最新发布
04-03
### 移动端开发中的长度单位及其区别 #### 一、基本概念 在移动端开发中，不同的长度单位具有各自的特点和适用场景。以下是 `rem`、`em`、`px`、`vh`、`vw` 和 `%` 的定义： - **Rem**: 基准点为根元素 `<html>` 的字体大小，始终相对于文档的根元素计算尺寸[^3]。 - **Em**: 相对于其父节点的字体大小来计算尺寸。如果未指定，则基于浏览器默认字体大小 (通常是 16px)[^4]。 - **Px**: 是一种绝对长度单位，在屏幕上的表现固定不变，不随其他因素变化而改变[^1]。 - **Vh/Vw**: 分别表示视口高度和宽度的百分之一。例如，`1vh` 表示视口高度的 1%，`1vw` 则代表视口宽度的 1%。 - **Percent (%)**: 百分比是一种相对单位，通常用于相对于容器的宽高或其他属性的比例设定。 --- #### 二、具体差异分析 ##### 1. Rem vs Em 两者均为相对单位，但它们的主要区别在于参照物的不同： - `em`: 参照的是最近父级元素的字体大小，容易受到嵌套层次的影响，可能导致复杂布局下的不可预测性[^2]。 - `rem`: 总是依据 HTML 文档根元素 (`<html>`) 的字体大小，因此更加稳定且易于维护。 ##### 2. Px 对比 Relative Units 像素是一个固定的物理单位，无论设备如何它都不会发生变化；然而，响应式设计提倡使用灵活可变的单位以适应多种分辨率需求。相比而言，`rem`, `em`, `vh/vw` 能够更好地满足跨屏适配的要求。 ##### 3. Vh & Vw 特殊用途 这些单位特别适合创建全屏覆盖效果或者动态调整组件大小的应用场合。比如实现图片轮播器的高度自适应等功能时非常有用。 ##### 4. Percent (%) 主要用于子元素相对于父元素某些维度比例关系的确立上。当涉及到复杂的网格系统构建或是流体布局规划的时候尤为常见。 --- #### 三、最佳实践建议 为了提高用户体验并简化样式管理流程，在实际项目操作过程中可以遵循如下原则： - 尽量采用 `rem` 来代替传统的 `px` 定义文字及其他UI控件的基础尺度，因为前者能更方便地通过修改全局变量统一控制整个网站风格的一致性和缩放行为。 - 如果需要局部微调某部分区域内的子项间距或边距等细节参数，可以选择利用 `em` 单位完成相应处理工作，因为它会自动跟随上级设定做出同步变动从而减少额外配置负担。 - 当遇到涉及屏幕整体范围的操作任务如背景图填充、弹窗定位等情况之下优先考虑运用 `vh`/`vw` 类型指令达成目标效果。 - 关于百分比率方面的应用则多见于弹性盒子模型(Flexbox)以及栅格化框架结构之中用来分配空间份额等问题解决之上。 --- ```css /* 示例代码 */ :root { --base-font-size: 16px; } body { font-size: var(--base-font-size); /* 设置基础字号 */ } .container { width: 80%; /* 使用百分比设置宽度 */ padding: 2rem; /* 使用 rem 设定内边距 */ } .item { margin-bottom: 1em; /* 使用 em 添加底部外边距 */ height: 50vh; /* 让元素占据一半视口高度 */ } ``` --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值