css的常见单位
前言
以前刚学的时候不懂事感觉css特简单，就是给一些盒子加长宽，设置一下颜色之类的。
现在css有好多没接触过的属性，一般就只能要用的时候临时学，就像css的单位属性，以前就是全部都用 xx px ，管它是盒子还是字体还是其他，统一用 px ，但有的时候改代码的时候就特别麻烦，所以就知道了 有 em，vw 等之类的单位。
css单位其实不少，只是很多比较偏僻很少用到
现在我来讲一下常见单位，为什么图片里这么多我只讲常见的？
我摊牌了，原因就是那些单位我也不会，至少现在也很少用到，所以先摆烂。
css常见单位
1.相对单位
相对单位，顾名思义，它的大小就是相对于另一个单位（父容器或者根容器）的大小发生同步改变。CSS中的相对单位主要分为两大类：
- 字体相对单位，他们都是根据font-size来进行计算的。常见的字体相对单位有：em、rem；
- 视窗相对单位，他们都是根据视窗大小来决定的。常见的视窗相对单位有vw、vh 、vmax和vmin。
em
相对于当前DOM元素的font-size。
如果设置当前元素的font-size为0.75em，而其父元素的font-size是16px时，则当前元素的font-size是0.75 * 16px = 12px;
如果设置当前元素的width是10em，而当前元素的font-size是16px（无论是继承自父容器还是设置的）时，则当前元素的width是10 * 16px = 160px;
注意1：任意浏览器的默认字体高都是16px，如果给body元素的font-size设置为62.5%，那body的font-size实际大小是 16px*62.5%=10px，如果所有子元素都以该字体大小使用em作为尺寸单位，相当于1em=10px，这样设置em就非常简单，只要将实际px数值除以10，就是em单位值。
注意2：em相对于px的值并不是固定的，是会随着父元素或者当前元素的font-size不同而变化。
em是相当于父元素的单位
上面的子盒子宽高都设置为 4 em，父元素font-size属性为20px，可以看到子盒子的宽高为80px
rem
em是CSS3新增的一个相对单位（root em，根em），相对于根节点(一般为html节点)的font-size，如果html节点设置font-size = 100px，那么文档中的元素设置为0.3rem，则计算为：0.3 * 100px = 30px。
这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
目前，除了IE8及更早版本外，所有浏览器均已支持rem。
rem相对于根元素
rem相对于根元素（html元素），它的优点是可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应，一般情况下浏览器按 ctrl 缩放 页面，页面所有元素都是等比例缩放 （包括行与行之间的间隔），这里的使用的属性应该是rem（我猜的）
vh、vw
这两个个单位都是视窗单位，所谓的视窗，在web端指的就是可视区域，移动端的视窗指的就是布局视窗。如果视窗大小发生了变化，那么这些值都会随之变化。这四个单位指的是：
- vw：视窗宽度的百分比；
- vh：视窗高度的百分比；
假如一个浏览器的高度是800px，那么1vh的值就是8px（1/100 * 800px）。vh和vw的大小总是和视窗的高度和宽度有关。
视窗:是指浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
1vh 等于1/100的视窗高度，1vw 等于1/100的视窗宽度。
vmin/vmax
CSS3新增样式，部分浏览器（IE8）不支持。
vmin：取视窗高度和宽度的最小值作为基准。
vmax：取视窗高度和宽度的最大值作为基准。
例如：浏览器视窗大小为 window.innerWidth=1000px，window.innerHeight=800px，那么，1vmin=800px/100=8px; 1vmax=1000px/100=10px。
使用场景：做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致
vmin 和 vmax 与视窗宽度和高度的最大值和最小值有关。假如一个浏览器高度为500px，宽度为1200px，那么1vmin就是5px，1vmax就是12px。
这些单位都是长度单位，所以可以在任何允许使用长度单位的地方使用。这些单位比较适合用于创建全视区界面，例如移动设备的界面，因为元素是根据视区的尺寸而变化的，与文档树中的任何元素都没有关系。
2.绝对单位
px
px 全称为 Pixels，表示像素，它并不严格等于显示器的像素，尤其在高清屏下。尽管CSS单位会根据浏览器、操作系统或者硬件适当缩放，在某些设备或者用户的分辨率设置下也会发生变化，但是96px通常等于一个物理英寸的大小。
CSS 将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为1px。 一个“600x400”解析度的照片的长宽分别为“600px”和“400px”，所以照片本身的像素并不会与显示装置像素一致，而是与 px 单位一致。如此就可以将图像完整的与网页的其它元素排列起来。
很多时候， px 也常被称为 CSS 像素。它是一个绝对单位，但也可以被视为相对单位，因为像素单位相对的是设备像素。在同一个设备上，每 1 个 CSS 像素所代表的物理像素是可以变化的；在不同的设备之间，每 1 个 CSS 像素所代表的物理像素是可以变化的。
相对长度单位，浏览器的度量单位，相对于物理像素（显示器屏幕分辨率），1px在高清屏幕下可能占用2个物理像素、甚至3个物理像素，有关物理像素和px之间转换比，
css 还有其他很多绝对单位，如pt、pc、cm、mm、in等，（这里就不多说了，因为用的比较少，我也不太会 ）
本人是初入前端的小菜鸟，文章如有错误，恳请大家提出问题，本人不胜感激
文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力 长路漫漫，道阻且长
转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/124511147?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124511147%22%2C%22source%22%3A%22qq_52855464%22%7D&ctrtid=C7RET