1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > CSS的px em rem % vw vh vm 单位区别

CSS的px em rem % vw vh vm 单位区别

时间:2022-03-01 15:57:36

相关推荐

CSS的px em rem % vw vh vm 单位区别

1.px

px就是像素,也是我们现在经常使用的基本单位,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。

2.em

em参考物是父元素的font-size,默认字体大小是16px,所以1em不是固定值,因为它会继承父元素的字体大小

3.rem

rem参考物是相对于根元素,我们在使用时可以在根元素设置一个参考值即可,相对于em使用,减少很大运算工作量,例:html大小为10px,12rem就是120px

4.%

% 是相对于父元素的大小设定的比率,position:absolute;的元素是相对于已经定位的父元素,position:fixed;的元素是相对可视窗口

5.vm

vm相对于视口的宽度。视口被均分为100单位

h1 {font-size: 8vw;}再举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px

6.vh

vm相对于视口的宽度。视口被均分为100单位

h1 {font-size: 8vh;}css3新单位,viewpoint height的缩写,视窗高度,1vh等于视窗高度的1%。举个例子:浏览器高度900px, 1 vh = 900px/100 = 9 px。

7.vw

css3新单位,viewpoint width的缩写,视窗宽度,1vw等于视窗宽度的1%。

举个例子:浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。

/post/6844903849153527815

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。