admin管理员组文章数量:1516870
CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc)
像素(px)&百分比(%)
像素(Pixel)
- 长度单位，相对于显示器屏幕分辨率而言，通常在不定义显示缩放比例的情况下，1px对应显示器屏幕上的一个像素点。
- 早年的pc端展示的页面基本都用这个单位。
百分比(%)
-
相对长度单位，指占用的父元素宽度/高度的比例。
-
当指定为100%时，会占据父元素的全部宽度或高度；也可以指定大于100%的数值，这时，子元素会超出父元素的边界。
EM&REM
这两个都是相对长度单位。区别在于：
- EM是相对于父元素
- REM是相对于根元素。REM中的“R”就是ROOT的意思。页面中的根元素是指html标签。
现代浏览器通常默认字体大小是16px，所以rem/em的数值实际上都是16px的倍数。例如，当字体大小为16px时，有：
问题在于，当使用16px做为默认大小时，12px或10px这种数值使用rem/em来表示，会在计算和书写时比较麻烦。所以通常会在css的html选择器中将字体大小进行重置。
html{font-size: 62.5%;
}
也就是说现在默认字体大小不再是16px，而是16px*0.625=10px。这时，在使用rem/em时，就方便多了。此时的12px就是1.2rem, 10px就是1rem，计算和书写更加方便。
这里需要注意一点，虽然在html选择器和其他选择器中都定义了font-size属性，但是要注意区别
html {# 这里是重新设置根字体大小，其含义是16px*62.5%=10px，也就是说将根字体大小设置为10px;font-size: 62.5%;
}
.parent {# 这里是应用根设置的字体大小，20rem = 10px*20 = 200pxwidth: 20rem;height: 20rem;# 指定字体大小是20pxfont-size: 2rem;
}
EM的缺点
-
前面提到，EM是相对于父元素进行计算，所以当页面比较复杂时，计算EM，也就会变的复杂。
-
究其原因，是因为其所有字体大小都相对于父元素的大小决定的，当页面有多层嵌套时，同样是定义2rem/2em，实际显示的字体大小会不同。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>html {font-size: 62.5%;}.parent {width: 600px;height: 600px;background-color: lightblue;}.item_em_1,.item_em_2 {font-size: 2em;background-color: limegreen;}.item_rem_1,.item_rem_2 {font-size: 2rem;background-color: purple;}</style></head><body><div class="parent"><div class="item_em_1">EM_AA（这里EM与REM自动大小相同）<div class="item_em_2">EM_BB（这里字体相对父元素明显变大）</div></div><div class="item_rem_1">REM_AA<div class="item_rem_2">REM_BB（这里字体与父元素相同）</div></div></div></body>
</html>
所以在前端开发时，尽量不要使用EM！容易迷糊！
VW&VH
这两个单位都是相对于页面显示窗口的大小。
- VW：视图宽度(Viewport Width),将页面显示窗口的宽度分成100份，每1vw是视图窗口宽度的1/100。
- VH：视图高度(Viewport Height),将页面显示窗口的高度分成100份，每1vh是视图窗口高度的1/100。
vmax&vmin
- vmax:取当前vw,vh中的最大值
- vmin:取当前vw,vh中的最小值
计算
可在CSS中使用calc进行数值的计算
计算时，要注意±符号前后必须要有空格
calc(100vh - 10px)
calc(100vh - 10rem)
本文标签： CSS中的常见单位（pxemremvw
版权声明：本文标题：CSS中的常见单位（px,%,em,rem,vw,vh,vmax,vmin,calc) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.betaflare.com/web/1687085495a62206.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论