「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」。

最近小舅子找了个前端方面的实习工作，奈何他学的是移动通信，虽说这家公司号称零基础也要，有老人带，但从来没接触过前端开发的他，一脸懵逼，这几天他学了标签，刚开始写布局，问道我一个盒子的长度是咋定义的？与是我就稍微总结了以下内容

1711635869231_.pic.jpg

web前端长度单位

长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位

绝对长度

绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。例如 cm、mm、in（英寸，1in = 96px = 2.54cm）、pt（1/72英寸）、pc（1/6英寸、1pc = 12pt）

相对长度都有一个基准

例如 em 是描述相对于应用在当前元素的字体尺寸

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

px就是设备或者图片最小的一个点，比如我的浏览器像素大小是1792x1087的，表示的是水平方向是1792个像素点，垂直方向是1087个像素点。

px是我们网页设计常用的单位，也是基本单位，通过px可以设置固定的布局或者元素大小。需要注意的是：px 的最小单位是1，所以小数的度量没有意义。

rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为10px，到时设置1.2rem就是12px.以此类推

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。用来适配不同屏幕的，最终也会换算成px来进行布局因此对于精确度没有限制

所占百分比

vw和vh是css3新单位

vw是 view width的简写，是指可视窗口的宽度。也算是百分比单位，假如宽度是1920px的话。那100vw就是1920px,10vm就是192px

vh是 view height的简写，是指可视窗口的高度，也算是百分比单位，假如高度度是720px的话。那100vw就是720px,10vm就是72px

vim使用最小那边的比例。也就是说，如果浏览器窗口的高度小于他的宽时，1vmin将等价于1vh；如果浏览器的宽度小于他的高度时，1vmin等价于1vw。

vmax则相反：它使用最大的那一边。因此当viewport的宽大于高时，1vmax等价于1vw；如果浏览器的高大于宽时，1max将等价于1vh。

calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

calc()函数支持 "+", "-", "*", "/" 运算；