我要招人

去企业版

首页 > 试题广场 >

说一说CSS尺寸设置的单位

[问答题]

说一说CSS尺寸设置的单位

已注销

1. px：绝对像素 2. rem：相对于根元素像素 3. em：相对于父元素像素 4. vw：视口宽度 5. vh：视口高度

发表于 2022-04-21 18:40:52 回复(5)

牛客556136877号

①共有五个单位，分别是px，em，rem，vw，vh。 ②除了px是绝对单位，其余都是相对单位。 ③em相对于他本身的字体大小（但他本身字体大小是相对于父级字体大小的）。 ④rem相对于根元素的字体大小。 ⑤vw相对于可视化窗口的宽（1vw就是1%窗口宽度）。 ⑥vh相对于可视化窗口的高（1vh就是1%窗口高度）。 ⑦一般采用rem＋媒体查询或者rem＋vw来实现响应式布局。原理是当窗口大小发生变化时，通过媒体查询或vw改变根元素的字体大小，从而改变以rem为单位的元素大小。

发表于 2022-06-09 02:17:16 回复(6)

牛客682857785号

px rem em vw vh

发表于 2022-04-23 20:56:54 回复(0)

牛客150990719号

1.px绝对长度单位，像素大小 2.em根据父元素的字体(font-size)大小决定当前元素em单位的长度 3.rem根据根元素（页面）的字体大小来决定当前元素rem单位的长度 4.vw和vh是根据视口大小的百分比 5.%根据父元素的宽高的百分比

发表于 2022-05-03 10:37:36 回复(0)

edjtu19-软工3班-何江涛

px：常用的单位，可以理解为逻辑像素，css中所有尺寸都是逻辑像素，这跟`分辨率物理像素`有很大的不同，详情看https://zhuanlan.zhihu.com/p/337202411。
em：1em=自己字体大小。由于继承，自己字体大小往往等于父元素字体大小，因此很多人认为 1em=父元素字体大小，这是错的。
rem：1rem=:root{}字体大小。如果没设置:root，1rem=浏览器默认字体大小，一般是16px。

有rem，我们就能通过:root，控制整个页面的字体大小、宽度等。从而达到响应式布局。
一般有两种方法：
1.通过媒介查询或flexible.js感知屏幕尺寸的大小，设置相应的:root{font-size: px}。缺点：要添加挺多代码。
2. 1vw=0.01屏幕宽度，因此可以直接设置 :root{font-size: vw}。用vw自动感知屏幕尺寸，其他元素使用rem单位，达到响应式。
自己ps的图片

发表于 2022-11-10 13:58:48 回复(0)

夏风八分甜

px em rem vh vw %

发表于 2022-04-29 19:26:11 回复(0)

阿巴阿巴啊吧

px,vw,wh,em,rem,% 1.px：物理像素点 2.vm：视图宽度作为基准单位 3.vh：视图高度作为基准单位 4.em：元素字体大小作为基准 5.rem：根元素字体大小作为基准单位 6.%：父元素尺寸为基准计算

发表于 2023-08-17 15:44:15 回复(0)

晚安咯

px绝对箱数 rem根元素

发表于 2022-06-10 23:19:45 回复(0)

牛客663468082号

px:像素||rem:相对于根元素像素||em:相对于父元素像素||vw:视窗宽度||vh：视窗高度

发表于 2022-05-17 21:44:15 回复(0)

图图不秃_

总结： 1. px：绝对单位，取决于屏幕分辨率。2. rem：相对单位，相对于根元素的大小。3. em：相对单位，相对于自身的大小，如果自己没设置font-size，则根据父元素的大小。4. vw：相对单位，相对于视口宽度的1%。5. vh：相对单位，相对于视口高度的1%。

发表于 2024-03-10 10:45:12 回复(0)

拉不乐

px：像素，绝对长度单位，大小取决于屏幕分辨率，是开发中常常使用的单位 em：相对长度单位，如果是font-size，则是相对于父元素字体大小设置；在其他属性中，是相对于自身的字体大小，如width rem：相对于根元素的字体大小设置 vh：相对于视图高度的1% vw：相对于视图宽度的1% 加分回答：在网页开发中，rem、vw、vh都能配合媒体查询，实现响应式布局。

发表于 2023-08-29 00:22:20 回复(0)

牛客114897187号

五种单位每个的特点响应式布局原理共有五个单位非别是px em rem vw vh px是绝对单位，其他的都是相对单位 em是相对于自身的单位自身又是相对于父元素的 rem是相对于根元素的单位 vw和vh分别是相对于视口的宽度和高度的单位响应式是通过rem+媒体查询或者vw实现的，原理是当窗口宽度改变可以通过媒体查询或者vw获取到再改变根元素宽度以改变rem为单位的元素宽度实现响应式

发表于 2023-08-10 11:48:25 回复(0)

牛客96215388号

px rem em vw vh，响应式 rem + flexiable/媒体查询，响应式 px + pxtorem + 媒体查询/flexible

发表于 2023-06-06 11:04:41 回复(0)

爱吃草莓蛋挞

px：绝对像素 2. rem：相对于根元素像素 3. em：相对于自己，自己没有设置font-size时，相对于父类。（因为继承了父类的字体大小，所以还是相对于自己）4. vw：视口宽度 5. vh：视口高度

发表于 2023-02-22 18:35:49 回复(0)

有理想的菜鸡

看不下去了，错误答案也都复制粘贴，em是相对于自己，自己没有设置font-size时相对于父类是因为继承了父类的字体大小

发表于 2022-10-27 17:15:45 回复(4)

牛客47926233号

1.px 绝对像素， 2.em 相对像素，相对于自身元素的字体大小，如果没有设置字体大小，则会通过继承父元素的字体大小 3.rem 相对像素，相对于根元素的front-size大小，可以在根元素修改front-size来调整比例，适用于自适应化 4.vw，相对像素，相对于视窗宽度的1% 5.vh 相对像素，相对于视窗高度的1%

发表于 2022-09-11 16:52:36 回复(0)

乐扣乐扣

尺寸单位分为绝对单位和相对单位。绝对单位：1. px 像素相对单位：1.em 相对html的font-size属性的大小 2.rem相对当前元素的font-size属性的大小（配合媒体查询meta实现响应式布局）3.vw vh 相对当前视图的大小，取百分比

发表于 2022-08-15 15:31:25 回复(0)

牛客377162914号

px,rem,vw,vh,em,rpx,%

发表于 2022-07-25 16:47:14 回复(0)

螺蛳粉加炸蛋加青菜

px:绝对像素；rem:相对于根元素像素； em：相对于父元素像素；vm:视口宽度；vh：视口高度

发表于 2022-07-19 18:54:23 回复(1)

牛客775019124号

1. px:绝对长度单位，像素的缩写；大小取决于屏幕的分辨率 2. pt:绝对长度单位，pt不会随浏览器分辨率变化而发生变化 3. em：相对长度单位，在font-size中使用相对于父元素的字体大小，在其他属性中相对于自身的字体大小 4. rem:相对长度单位，相对于根元素的字体大小、 5. vw:相对长度单位，相对于视窗宽度的1% 6. vh：相对长度单位，相对于视窗高度的1%

发表于 2022-07-03 17:44:54 回复(0)

提交观点

问题信息

HTML与CSS

上传者：real19931

难度：

135条回答 196收藏 839浏览

说一说CSS尺寸设置的单位

问题信息

热门推荐

相关试题