一、CSS中的长度单位：
在CSS中以不少值是以长度作为值的，盒子模型的属性就是一些明显的值属性：width、height、margin、padding、border。除此之外还有很多的css属性的值同样也是长度值，像偏移量offset、box-shadow的大小或字体大小、间距等，在CSS中存在众多的长度单位，下面我们就来说一下长度单位以及它们的用途。

二、简单的介绍：（长度单位都有哪些：）
在CSS的长度单位分为两种： 绝对长度 和 相对长度 。
绝对长度： px、in、cm、mm、pt、pc
相对长度： em、rem、ex、vh、vw、vmin、vmax、%、fr

三、详细的介绍： 参考文章
1、绝对长度单位：
px： 表示像素，像素是相对于屏幕 分辨率 的，页面按照精确像素展示，不会因为其它元素的尺寸变化而变化，像素仍然是最典型的度量单位，例如： windows 的用户所使用的 分辨率96像素/英寸 ，而 mac 的用户所使用的分辨率一般是 72像素/英寸 ，一般javascript语言里的单位就是使用的像素。

div {
  width: 200px;
in：英寸（inch）是一个物理度量文件，但是在CSS领域，英寸只不过被直接映射成像素罢了。（1in == 2.54cm == 96px）
 
div {
  width: 2in;
cm：厘米是比较熟悉有用的物理度量单位。它也映射成像素。（1cm == 37.8px）
 
div {
  width: 20cm;
mm：毫米是个小数量级的物理度量单位。（1mm == 0.1cm == 3.78px ）
 
div {
  width: 200mm;
pt：点（Points）也是物理长度单位。（1pt == 1/72in == 96/72px）
 
div {
  width: 20pt;
pc：派卡（Pica）和points一样，只不过（1pc == 12pt）。
 
div {
  width: 20pt;
2、相对长度单位：
 em：em是一个相对单位，相对于当前对象内文本的字体尺寸，如当前对行内的字体尺寸未被人设置，则相对于浏览器 的默认字体尺寸。
 起初排版度量时是基于当前字体大写字母 M 的尺寸的，当改变font-family时，它的尺寸不会发生改变，但在改变font-size的大小时，它的尺寸就会发生改变，em 会继承父级元素的字体大小。(下面有关于 em 和 rem 的例子)
 在没有任何CSS规则的前提下：（1em == 16px == 0.17in == 12pt == 1pc == 4.2mm == 0.42cm）
 
div {
  width:40em;
rem：rem 和 em 一样是一个相对单位，但是和 em 不同的是 rem 总是相对于根元素（如：root{}），而不像em一样使用级联的方式来计算尺寸。这种相对单位使用起来更简单。
 
div {
  width:40rem;
ex：相对长度单位，相对于字符 "x" 的高度，此高度通常为字体尺寸的一半，如当前对行内的文本的字体尺寸未被人为设置，这相对于浏览器的默认字体尺寸。和 em 不同，当改变 font-family 时 em 不会改变，而 ex 单位会变化，因为一个单位的值和那个字体是特殊的约束关系。
 
div {
  width:40ex;
ch：ch的内涵和ex相对于x的高度相似，只是 ch 是基于字符 0 的宽度的而不是基于字符 x 高度的。1ch也就是数字0的宽度，当 font-family 改变的时候 ch 也会随着改变。
 
div {
  width:40ch;
vw：vw（viewpoint width）是 可视宽度 单位（视窗宽度），1vw 等于可视区宽度的 百分之一 ，vw单位跟百分比很相似，不同的是vw所有的值对所有的元素都一样，与他们父元素 或 父元素的宽度 无关，有点像rem单位那样总是相对于根元素。(下面有关于 vh 和 vw 的例子)
 
div {
  width:40vw;
vh：vh（viewport height）和vw（viewport width）单位一样，不同的vh是相对于可视区的高度（视窗高度）。
 
div {
  width:40vh;
vmin：vmin的值是当前vw和vh中 较小 的值，在标准 尺寸类型的使用实例中，和由自己确定屏幕大小的vw、vh单位相比，vmin是一个更有用的度量标准。
 
div {
  width:40vmin;
vmax：vmax的值是vw和vh中 较大 的那个值。
 
div {
  width:40vmax;
%：百分比，以百分比为单位的长度值 是基于具有相同属性的父元素的长度值，例如：如果一个元素呈现的宽度是450px，子元素的宽度设为50%，那么子元素呈现的宽度为225px。（如果所有的父级元素都没有设置具体的值，那么设置百分比高度那会导致所有的元素的值都为0）。
 
div {
  width:40%;
fr：gird布局中利用的一个长度单位，在gird布局中，我们经常会利用fr来进行计算。
 下面这句语句则是声明三行的gird，第一行的高度为30px，第二行的同样为30px，第三行的为60px。
 
grid-template-rows: 30px 1fr 2fr;
3、长度单位的总结： 参考文章
 
1）首先要明白一点，那就是屏幕分辨率究竟是什么，我们知道在不同的分辨率下 ，像素点的大小是不同的，所以同一个网页，以 px 作长度单位时，在不同的分辨率下显示的大小是不同的，在低分辨率下，像素点较大，细节不够清晰，虽然显示的页面也大，但模糊不清。
 
2）实际上，所有的单位，无论是相对还是绝对单位，（在屏幕上的显示时）最终都是转化为px单位的，所以一般来说，在网页制作时，基本单位都选择 px 而不是 pt，因为 pt 也是通过浏览器的 DPI 转成 px 显示（比如FireFox的DPI是96，则有9pt = 12px）。不仅pt，cm、in、mm等单位也是转换成px的，所以无论用绝对还是相对，在不同的分辨率下都是会变的，不要以为把长度设置为3cm，它就会在不同的分辨率下保持3cm不变。
 
3）我觉得 pt 还是很有用的一个单位，在打印时尤其如此，现在有的网页以及经实现了显示是一个页面，打印用另一种方式，我想在打印上就采用 pt 吧，因为针对不同的分辨率，打印出来的页面都是一样的大小，这就是绝对单位的第一特征，但是依然要记住，在显示上，这个单位代表的不是真实物理长度，它也是要根据像素的实际大小（这个跟分辨率有关）进行调整的。
 
4）实际上我们可以这样理解，将px看做绝对单位（显示上的绝对单位），其它的单位都是以 它为基础的，比如em，它就是相对当前文本字体的高度（假设当前文本字体的尺寸是12px，我们设置新的字体为1.5em，则新的字体尺寸转换为12 * 1.5 = 18px），要记住的就是em是相对于 父级元素的高度，假设第一个div中我们设置了字体为12px，第二级我们设置1.5em，第三级我们设置1.5em，实际上字体的显示是：第一级12px，第二级18px，第三级18 * 1.5 = 27px。（下面有具体的例子）
 
5）分享一个来自前端大佬张鑫旭制作的一个测试长度单位的网页：http://www.zhangxinxu.com/study/201103/css-length-value-test-demo.html
 
四、七个你可能不是很了解的CSS单位： 参考文章
 1、em 和 rem：
 我们将从你已经熟悉的东西开始，em 单位被定义为当前字体大小，首先我们先对上面说到的 em 是相对于 父元素高度 的，
 例如：如果你在body元素上设置一个字体大小，那么在body元素内的子元素中的em值都等于这个字体的大小。
 
	<div class="test">Test</div>
</body>
body {
	font-size: 14px;
div {
	font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px 
在这里，我们说这个 div 将有一个 1.2em 的 font-size 。它是所继承的字体大小的 1.2 倍，在这个例子中父元素为 14px，结果为16.8px 。
 
但是如果你在每个元素内都级联em定义的字体大小将会发生什么？看下面代码：因为是继承父元素的高度 的所以会带来 逐渐增加 的字体大小。
 
		Test <!-- 14 * 1.2 = 16.8px --> 
			Test <!-- 16.8 * 1.2 = 20.16px --> 
				Test <!-- 20.16 * 1.2 = 24.192px --> 
			</div> 
		</div> 
	</div>
</body>
虽然，在某些情况下可能需要这个，但是通常你可能想基于一个 唯一 的度量标准来按比例缩放，在这种情况下，你应该用 rem ，rem中的 r 代表 root；这等同于 font-size 基于 根元素 进行设置，在大多说情况下根元素为 html 元素。
 
2、对网络布局的好处：（这个对H5页面做兼容非常以后用）
 rem不是只对定义字体大小有用，比如，你可以使用rem把 整个网格系统 或者 UI样式库 基于HTML根元素字体大小上，然后在特定的地方使用em比例缩放，这将带给你更加可预测的字体大小和比例缩放。点击此处查看：rem(root em)单位的兼容性列表
 
.container{
	width : 70rem;	//70 * 14px = 980px
从概念上讲，像这样一个策略背后的想法是为了允许你的界面随着你的内容按比例缩放，然而，这可能不一定对每个案例都有意义。
 
3、vh 和 vw：
 响应式网页设计技术很大程度上依赖于比例规则，然而，CSS比例不总是每个问题的最佳解决方案。CSS宽度是相对于最近的包含父元素。如果你想使用 显示窗口 的 宽度 或 高度 而不是父元素的宽度将会怎么样？这正是 vh 和 vw 单位所提供的。
 
vh 等于viewport高度的1/100，例如：如果浏览器的高是900px，1vh求得的值为9px，同理如果显示窗口的宽度为750px，1vw求得的值为7.5px。
 
这些规则表面上看起来有无尽的用途，例如，做一个占满高度的或者接近高度的幻灯片，可以用一个非常简单的方法实现，只要用一行CSS：
 
.slide {
    height: 100vh;
设想你要一个占满屏幕宽度的标题。为做到这一点，你将会用 vw 来设置一个字体大小。这个大小将会随着 浏览器的宽度按比例缩放。点击查看：视窗单位：vw、vh的兼容性列表
 
4、vmin 和 vmax：
 vw 和 vh 总是与视窗的 高度 和 宽度 有关，与之不同的，vmin 和 vmax 是与这次 宽度 和 高度 的 最大值 或 最小值 有关，取决于哪个更大和更小，例如：如果浏览器设置为1100px宽、700px高、1vmin会是7px，1vmax 为 11px，然而，如果宽度设置为800px、高度设置为1080px，1vmin将会等于8px，1vmax将会是10.8px。
 
所以你什么时候可能用到这些值？
 
设想你需要一个总是在屏幕上可见的元素，使用高度和宽度设置为低于100的vmin值将可以实现这个效果，例如：一个正方形的元素总是至少接触屏幕的两边可能是这样定义的：
 
.box {
	height: 100vmin;
	width: 100vmin;
效果图：因为屏幕的高一定是比宽大的，所以设置100vmin一定是100%的宽的值，然后将height也设置为100vmin保证是正方形。
 
 如果你需要一个总是覆盖可是窗口的正方形（一直接触屏幕的四条边），使用相同的规则只是把单位换成vmax。
 
.box {
	height: 100vmax;
	width: 100vmax;
效果图：其实和上面的例子相同，只是屏幕的宽度有限超出的部分也看不到了，但是也实现了覆盖整个屏幕的效果。
 
 这些规则的组合提供了一个非常灵活的方式，用新的、令人兴奋的方式利用你的可视窗口的大小。Viewport units：vmin，vmax的兼容列表
 
5、ex 和 ch：
 ex 和 ch 单位，与em 和 rem 相似，依赖于当前字体和字体大小。然而，与 em 和 rem 不同的是，这两个单位也依赖于font-family，因为它们被定义为基于特殊字体的法案。
 
ch单位，或者字符单位被定义为0字符的宽度的 " 先进的尺寸 " 。在 Eric Meyer’s的博客 中可以找到一些非常有趣的讨论关于这意味着什么，但是基本的概念是，给定一个等宽字体的字体，一个N个字体单位宽的盒子，比如width：40ch；可以容纳一个有40个字符的应用那个特定字体的字符串。虽然这个特殊规则的传统用途与列出盲文有关，但是这里创造性的可行性一定会超越这些简单的用途。
 
ex 单位被定义为 " 当前字体的 x-height 或者一个 em 的一半"，给定的字体的 x-height 是指那个字体的小写 x 的高度。通常，这是这个字体的中间的标志。
 
x-height：小写字母x的高度（阅读更过关于 The Anatomy of Web Typography ）
 
 对于这种单位有很多用途，大多数是用于排版的微调。例如：sup元素，代表上标，可以用相对定位和一个1ex的底部值在行内被推高。类似地，你可以拉一个下标元素。浏览器 支持这些利用上标和下 标特性的vertical-align规则，但是如果你想要更精细的控制，你可以想这样更明确的处理样式：
 
sup { 
	position: relative; 
	bottom: 1ex; 
sub {
	position: relative; 
	bottom: -1ex; 
ex单位在CSS1中已经存在，但是你不会找到对ch单位有像这样坚实的支持，具体支持，在Eric Meyer’s 的博客中查看 CSS单位和值。
 
五、CSS/CSS3中的时间、频率、角度： 该部分参考：旭哥的文章
 
下面很多单位都是伴随着CSS3的诞生而诞生的：
 
单位
含义
deg
degress，角度
grad
grads，百分度
rad
radians，弧度
turn
turn，圈数
ms
milliseconds，毫秒数
s
seconds，秒数
Hz
Hertz，赫兹
kHz
kilohertz，千赫
 
旋转效果牵扯到角度，动画效果牵扯到时间，声音效果牵扯到赫兹，选几个代表性的举例：
 
1、角度（Degress）：点击查看：旭哥原例子连接
 角度范围从 0~360度（deg），当然 ，也可以是负数，如果是 负数 则 逆时针，看下面代码：
 
HTML代码：
 
<img class="image_test_1" src="//image.zhangxinxu.com/image/study/s/s256/mm1.jpg" />
<img class="image_test_2" src="//image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
<img class="image_test_3" src="//image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
<img class="image_test_4" src="//image.zhangxinxu.com/image/study/s/s256/mm4.jpg" />
<img class="image_test_5" src="//image.zhangxinxu.com/image/study/s/s256/mm5.jpg" />
CSS代码：
 
.image_test_1, .image_test_5 {
    -moz-transform: rotate(-5deg);
    -webkit-transform: rotate(-5deg);
    -o-transform: rotate(-5deg);
    transform: rotate(-5deg);
.image_test_2, .image_test_4 {
    -moz-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    -o-transform: rotate(5deg);
    transform: rotate(5deg);
展示效果：
 
 2、百分度（Grads）：
 一个分度，或者说是 百分度 相对于 1/400 个整圈，跟角度单位一样，支持负值，负值 表示 逆时针 方向。（100grad = 90deg）
 
3、弧度（Rads）：
 1弧度 等于 180π度，或者大致等于 57.3度，1.570796326794897rad 相当于 100grad 或是 90deg。
 
 4、圈数（Turns）：
 这个很好理解，1圈360度，平时体操或跳水中出现的后空翻 720°，也就是后空翻两圈的意思啦。于是有了等式 1turn = 360deg，2turn = 720deg。
 
5、时间（Times）：
 这个单位也应该很熟悉，初中物理很早就接触这个单位了，秒 就是 s，毫秒 就是 ms，1s = 1000ms，此单位一般用在CSS3动画中，例如transition或是animate中，这个就不多说了，可以查看鑫哥的文章或者其它的资料。
 
6、频率（Frequencies）：
 频率值使用在听（或说）级联动样式表中，有两个单位值，即 赫兹 和 千赫 ，有点毫秒和秒的感觉。频率可以被用来改变一个语音阅读文本的音调。低频率是低音，高频率是高音，例如下面代码：
 
p.low { pitch: 105Hz; }
q.squeal {pitch: 135Hz;}
上面就是关于CSS单位的相关内容，网上的文章零零散散，这篇文章主要目的是对CSS单位的一个总结，也是自己学习的一个过程，如有问题请在评论区讨论，以后学习的路还长，希望大家共同进步，如果喜欢那请留个赞吧，谢谢！
                                    层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
本资源是CSS 面试知识点总结合集，有需要的朋友可以下载学习。
                                    Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。
Css的优势：
格式和结构分离：有利于格式的重用以及网页的修改与维护。
精确控制页面布局：对网页实现更加精确的控制，如网页的布局，字体，颜色，背景等。
实现多个网页同时更新。
本资源完整详细的记录了CSS 面试知识点总结，有需要的朋友可以下载学习。
说到css的单位，大家应该首先想到的是像素单位px，我们在网页布局中一般都是用px，但是近年来自适应网页布局越来越多，em和百分比也经常用到了。然后随着手机的流行，web app和hybrid app的开发，都用到了css3技术，在css3中，新增了许多单位，rem、vw和vh、vmin和vmax、ch和ex等等，那现在对这些单位分别做一下详细的介绍吧。
一、CSS单位
CSS 有几个不同的单位用于表示长度，一些设置 CSS 长度的属性有 width，margin，padding，font-si
                                    在CSS中，经常会使用到各种计量单位来设定各种模块的长宽、大小比例 、边距大小 及 定位等。 常用的计量单位有：`px、%、em` 这几个，它们已经适用于大部分项目情景的开发中，且拥有比较好的兼容性。
但是从 `CSS3` 开始，浏览器对计量单位的支持又提升到了另外一个境界，新增了`rem、vh、vw、vm（vmin、vmax）`等一些新的计量单位。利用这些新的计量单位能更好的开发出比较良好的响应式页面，适应多种不同分辨率的终端，包括移动设备等。
接下来，小温将给大伙简单阐述下常用的计量单位及用法！
                                    1、deg度(Degress)。一个圆共360度90deg = 100grad = 0.25turn ≈ 1.570796326794897rad-moz-transform: rotate(2deg);-webkit-transform: rotate(2deg);transform: rotate(2deg);2、grad梯度(Gradians)。一个圆共400梯度90deg = 100gra...
                                    长度单位
像素 px
- 像素是我们在网页中使用的最多的一个单位，			  				一个像素就相当于我们屏幕中的一个小点，我们的屏幕实际上就是由这些像素点构成的但是这些像素点，是不能直接看见。			  			- 不同显示器一个像素的大小也不相同，显示效果越好越清晰，像素就越小，反之像素越大。			  
			  		百分比 %
			  			- 也可以将单位设置为一个百分比...
                                    line-height用来设置元素的行高。 
  该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
css里的line-height默认单位是em，相对于父级设置的高度。若是自适应建议是用em单位，比如：line-height: 1em,代表行高是16px;若要精确距离建议用px单位，比如：line-height: 1px,代表行高1px;不带单位
                                    CSS中的长度单位
CSS中的单位最常用的是px，但是肯定也会遇到em，cm等其他单位，掌握这些单位的特质才能灵活运用这么多不同的单位。
长度单位包括包括：
相对单位
em,ex,ch,rem,vw,vh,vmax,vmin
绝对单位
cm,mm,q,in,pt,pc,px
                                    CSS 长度单位的详解『你还是只会使用PX吗？』
文章目录CSS 长度单位的详解『你还是只会使用PX吗？』一、CSS的长度单位🥣二、绝对长度单位三、相对长度单位四、相对长度的应用参考资料🥪相关博客
一、CSS的长度单位🥣
CSS中有相当一部分属性的值是需要使用到长度，而说到长度就一定会有长度单位的出现，长度单位在CSS中并不是统一的。CSS的长度单位主要分为绝对长度单位和相对长度单位。
1、in（英寸）
2、cm 厘米
3、mm 毫米
                                    css单位一、绝对单位：px in cm mm1、px2、in3、cm4、mm二、相对单位：em rem  pt pc ex ch1、em2、rem3、pt4、pc5、ex6、ch百分比单位：vw vh vm %1、%2、vh/vm/vmin/vmax
一、绝对单位：px in cm mm
即像素pixel，它是最基础也是最常用的一个长度单位，绝对单位，页面按精确像素展示
相对长度单位，浏览器的度量单位，相对于物理像素（显示器屏幕分辨率），1px在高清屏幕下可能占用2个物理像素、甚至3个物理像素，
2.rem
相对长度单位，相对于根元素（html元素）字体的尺寸，不会受父元素的大小的影响。根元素的字体大小为16px，父元素的字体大小为20px，当前元素字体大小2em=2*16px=32px；
3.vw和vh
vw、vh全称viewport width、viewport height，视口的宽度和高度。相当于视口宽度、高度的1%。