CSS 长度单位详细总结

一、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值都等于这个字体的大小。

<body><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定义的字体大小将会发生什么？看下面代码：因为是继承父元素的高度的所以会带来 逐渐增加 的字体大小。

<body> <div> Test <!-- 14 * 1.2 = 16.8px --> <div> Test <!-- 16.8 * 1.2 = 20.16px --> <div> 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单位的一个总结，也是自己学习的一个过程，如有问题请在评论区讨论，以后学习的路还长，希望大家共同进步，如果喜欢那请留个赞吧，谢谢！

CSS 长度单位详细总结相关推荐

css的长度单位没有哪些,css 长度单位知多少
写在前面:在这个是个 coder 都会写两行前端代码的年代下,几乎都对 css 不是很陌生,但是真正能写好的确需要对 css 深入学习了,做为一个不称职的后端,我觉得我也有必要多了解一下. css 中 ...
dedecms切换模板css,DEDECMS的模板的css的详细解释 -电脑资料
有的比较菜鸟的站长们,常常看到模板文件的CSS的代码密密麻麻的,就有点头晕!我在网上找到一位热心的站长给出了一份织梦模板的CSS详解,以下就是代码和代码的解释! /*---------- import ...
em表示什么长度单位_css中pt、px、em、ex、in等这类长度单位详细说明
在CSS样式表中,我们经常会看到pt, px,em,ex,in等这类长度单位.它们各是什么意思,有什么区别呢? 在CSS样式表中,长度单位分两种: 相对长度单位,如px, em等绝对长度单位,如pt ...
CSS最详细的基础教程
层叠样式表CSS 绝对原创 CSS简介:Cascading Style Sheets(层叠样式表)的缩写,它是一种用来表现HTML或XML等文件样式的计算机语言. CSS的作用: 是定义网页外观(例如 ...
一文搞懂像素（px）、分辨率、CSS长度单位
博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目--多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试.就业.技术问题都可给在文章后 ...
HTML绝对单位,CSS长度单位有绝对单位和相对单位，其中px就是绝对单位，em就是相对单位。...
CSS长度单位有绝对单位和相对单位,其中px就是绝对单位,em就是相对单位. 妊娠12周内,胚胎自然殒堕者称() 某苛性钾样品中含有不与酸反应的杂质,为了测定苛性钾的纯度,取样品0.5600g溶于水制 ...
网络爬虫CSS选择器详细讲解
网络爬虫CSS选择器详细讲解前言使用步骤 1.解析的HTML代码 2.逐层选择节点 3.获取文本(string和get_text()) 4.获取节点的属性值 5.选择单个和多个节点 6.通过cla ...
CSS 长度单位的详解『你还是只会使用PX吗？(╬▔皿▔)╯』
CSS 长度单位的详解『你还是只会使用PX吗?』文章目录 CSS 长度单位的详解『你还是只会使用PX吗?』一.CSS的长度单位
前端4-2-5：关于CSS 长度单位总结，有你就够了！
目录一.长度单位二.简单介绍三.详细介绍 1.相对长度单位 2.绝对长度单位 3.长度单位总结四.五个可能你不太了解的CSS单位 1.em 和 rem 2.对网络布局的好处(对H5页面做兼容) ...
混合app用百分比还是rem_一次搞懂前端所有CSS长度单位，px、em、rem、rpx、%....
前端就是一个大杂烩,做为前端工程师需要掌握的知识点太多了.各种长度单位需要我们去了解除了这些还有印刷单位 pt pc pt cm mm in.... 毫无疑问现在统治前端的长度单位还是px, 一个相 ...

CSS 长度单位详细总结

CSS 长度单位详细总结相关推荐

最新文章

热门文章