为一个小前端，最基本的布局应该已经是手到擒来的事情，但是在布局过程中，你是不是经常就使用px、%或者rem？其他的呢？你是否又熟悉？

下面就为同学们说一下css中可能会遇到的单位。

首先就从熟悉的开始：

第一种：px

px（像素）是CSS中最为常用的一种单位，传统上一个像素对应计算机屏幕上的一个点，对于高清屏则对应更多。

第二种：%

百分比也较为常用。其中对font-size设置百分比值时，是以浏览器默认字体大小16px为参照计算的。

第三种：em

em是一种计算方式为相对于父元素的字体大小的单位，1em等于父元素设置的字体大小，如果父元素没有设置字体大小，则继续往父元素查找，直到有设置大小的，若都没有设置大小，则使用浏览器默认大小。

CSS中常用属性里使用em这样计算方式的属性有：

• border

• width

• height

• padding

• margin

• line-height

第四种：rem:

别看rem和em只有一个字母区别，而且也都是相对单位，其他两个是完全不一样的单位概念；rem的参照物是根元素HTML的font-size，因此，如果改变HTML的font-size值，那么所有使用的rem单位大小都会随着改变，适用于移动端。（ps：不支持IE8以下,而且在移动端使用，如果代码冗余，容易看到文字会变大或者变小哦，所以使用的时候一定要处理好。）

第五种：v系单位

v系单位常用于移动端，是基于浏览器用来显示内容的区域大小，也就是视窗大小来就算的。

具体分为4个：

• vw：基于视窗的宽度计算，1vw等于视窗宽度的百分之一

• vh：基于视窗的高度计算，1vh等于视窗高度的百分之一

• vmin：基于vw和vh中最小值来计算，1vmin等于最小值的百分之一

• vmax：基于vw和vh中最大值来计算，1vmax等于最大值的百分之一

这类标签至少我很少使用，所以也不能给同学们建议啦，不过至少以后看到了不用惊讶这个是啥昵

最后单位运算

CSS中可以使用CSS函数calc()来通过计算确定一个属性的值。

际开发中，喜欢用百分比但是发现自己对百分比掌握的不够，经常会出现一些出乎意料的效果，今天整理了CSS中有关百分比单位知识，如果对你有帮助的话请多多支持下小编哈！

效果：

要想理解百分比这样的相对单位，首先要做的事就是找到某个元素的参照物，比如绝对定位的位置参照是已有定位（相对于 static 定位以外的第一个父元素进行定位）,下面我们通过参考物的分类来详细说明css中的百分比应用。

1.相对于参考物宽度的：A.[max/min-]widthB.paddingC.marginD.left(有定位情况)E.right（有定位情况）

效果：

写这个例子的时候突然想试试border能不能用百分比，意料之中，不行。这里的.son元素的参考物是.parent1,而不是离她最近的.parent2。

要成为一名合格的前端工程师，会写页面绝对不能少，而如果想要页面写得出彩，你必须要知道一些网页常用的基本单位。

在传统的项目开发中，我们常常会用到px、%、em这几个单位，因为它能适用于大部分的项目开发，而且拥有比较良好的兼容性。但素，你造吗？从CSS3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vw、vh、vm等一些新的长度单位，我们可以用这些新的单位开发出比较良好的响应式页面，以此可以覆盖多种不同分辨率的设备，包括移动设备等。

那么，接下来我们分别来分析下，这些常用到的单位分别是什么。

1．px

px就是pixel的缩写，像素，相对长度单位，像素是相对于显示器屏幕分辨率而言。比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。再比如，px就可以认为是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的。

2.em

相对长度单位，参考对象是父元素的font-size，具有继承的特点，如果当前行内文本的字体尺寸未被设置，浏览器使用默认字体尺寸（16px），整个页面内1em也不是一个固定的值。

3.%

一般宽泛的讲是相对于父元素，但是并不是绝对的。

1）、对于普通元素就是我们理解的相对于父元素

2）、对于position: absolute;的元素是相对于已定位的父元素

3）、对于position: fixed;的元素是相对于ViewPort（可视窗口）

4.rem

rem是css3的新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。

例如：

p{font-size:14px;?font-size:.875rem;}

但是，需要注意的是：

选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用。一般rem用在移动端可能更多些。

5.vw

vw是css3新单位，viewpoint width的缩写，即视口宽度。何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，是不是很神奇，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。视口宽度被均分为100单位的vw，1vw等于视窗宽度的1%。

举个例子：浏览器宽度1200px, 1 vw = 1200px/100 = 12 px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

6.vh

与vw类似，vh就是可视窗口的高度了。视口高度被均分为100单位的vh，1vh就是高度的1%。看下图：

7.vm

vm也是css3新单位，相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm。

举个栗子：浏览器高度800px，宽度1000px，取最小的浏览器高度，1 vm = 800px/100 = 8 px。

由于现在vm的兼容性较差，现在基本上很少有人用。

除了上述7种单位，css还有哪些长度单位？

例如：

in 寸

cm 厘米

mm 毫米

pt point磅，大约1/72寸

pc pica派卡，大约6pt，1/6寸

1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px