CSS单位

其实CSS中的长度单位一共有8个，分别是px，em，pt，ex，pc，in，mm，cm。（ex：相对长度单位。相对于字符“x”的高度“x-height”。此高度通常为字体尺寸的一半。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。pc：派卡（Pica），绝对长度单位。相当于我国新四号铅字的尺寸。in：英寸（Inch），绝对长度单位。mm：毫米（Millimeter），绝对长度单位。cm：厘米（Centimeter），绝对长度单位。）

1、px：像素（Pixel）,相对长度单位，相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。譬如，WONDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

2、pt：点（Point），绝对长度单位。确切的说法是一个专用的印刷单位“磅”，大小为1/72英寸。用于印刷业。

3、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。任意浏览器的默认字体大小都是16px。em的值并不是固定的；em会继承父级元素的字体大小。

4、rem：使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

5、vw、vh：vh等于viewport高度的1/100.例如，如果浏览器的高是900px,1vh求得的值为9px。同理，如果显示窗口宽度为750px,1vw求得的值为7.5px。

6、vmin、vmax:vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与这次宽度和高度的最大值或最小值有关，取决于哪个更大和更小。例如，如果浏览器设置为1100px宽、700px高，1vmin会是7px,1vmax为11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会等于8px而1vmax将会是10.8px。

在页面上可以看到，72px的字体要比72pt的字体小一些，但96px正好和72pt大小一样。（因为window下，屏幕分辨率一般是96像素/英寸，而1pt大小为1/72英寸）

分别用800×600和1024×768看页面的文字，明显高分辨率下，文字就变小。而且，关键的是，无论用px还是pt，都会变小。pt并没有如有些人所说，是“绝对”的，“固定”的。

但如果用打印机把这页面打印出来，就可以看到：无论屏幕用什么分辨率，打印出来大小都是一样的（这是当然的）。

“屏幕”上的各种信息，包括文字、图片、表格等等，都会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768下，则只占约1/10。所以如果在定义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（自然长度单位）。

那是不是用pt做单位就没这样的问题呢？错！问题同样出现。刚才的例子已经很清楚的说明，在不同分辨率下，无论是px还是pt，都会改变大小。

Mac机怎么情况不清楚，在Windows里，默认的显示设置中，把文字定义为96DPI（PPI，微软都将DPI和PPI混为一体，我们也就无须较真了）。这样的定义，说明了：1px＝1/96英寸。联系pt的概念，1pt＝1/72英寸，可以得出，在这样的设置中，1px＝0.75pt，常见的宋体9pt＝12px。在显示器分辨率不变的基础上（比如现在常用的1024×768），1px大小也就固定不变，改变显示设置，调整为144DPI，可以得出，1px＝0.5pt，常见的宋体9pt＝18px。原先用12px来组成的一个文字，现在需要18px来组成，px多了，文字就“大”了，更易阅读了。

所以，px和pt的使用区别，只有当用户改变默认的96DPI下才会产生：使用px定义文字，无论用户怎么设置，都不会改变大小；使用pt定义文字，当用户设置超过96DPI的值，数值越大，字体就越大。

（附公式：pt = px * dpi / 72)

在网页设计中，面向用户的屏幕的基本单位是px，因此使用px作为单位是最简单也最容易理解的，而pt也不过是通过了Windows的设置乘上了一个比率转变成px再显示，算是绕了个圈子。

但在Word或Photoshop中，使用pt就相当方便。因为使用Word和Photoshop的主要目的都不是为了屏幕浏览，而是输出打印。

PPI（DPI）：pixel（dot）per inch，每英寸的像素（点）数，是一个率，表示了“清晰度”，“精度”。

1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为16px*62.5%=10px, 这样12px=1.2em, 10px=1em,也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

注意：避免字体大小的重复声明。也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

相对单位em是相对于元素本身的字体大小的。在css中唯一例外的是font-size属性，它的em和ex值指的是相对父元素的字体大小。

除了font-size之外其他属性的em计算相对于元素自身字体大小。

可以看出，子元素的字体大小是父元素字体大小的50%，而子元素的margin-right值是自己字体大小的20%。且子元素的宽度用em表示也是基于自己字体大小，而不是父元素的宽度哦！

ex单位被定义为”当前字体的x-height或者一个em的一半”。给定的字体的x-height是指那个字体的小写x的高度。通常，这是这个字体的中间的标志。

x-height:小写字母x的高度

对于这种单位有很多的用途，大多数是用于排版的微调。例如，sup元素,代表上标，可以用相对定位和一个1ex的底部值在行内被推高。类似地，你可以拉低一个下标元素。

PS:calc()= calc(四则运算)

说明：用于动态计算长度值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

任何长度值都可以使用calc()函数进行计算；

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

calc()函数使用标准的数学运算优先级规则；

下面看对于calc()的应用：

此时的效果很简单，就是div.box完全遮盖了div.demo，如下图所示：

下面，在div.box上添加10px的内距padding，同时添加5px的border，div.demo上添加了一个padding：3px 0;

这个时候div.box的宽度大于了其容器div.demo的总宽度，从而撑破容器伸出来了，如图所示：

为了解决撑破容器的问题，以前我们只能去计算div.box的宽度，用容器宽度减去padding和border的值，但有时候，我们苦于不知道元素的总宽度，比如说是自适应的布局，只知道一个百分值，但其他的值又是px之类的值，这就是难点，死卡住了。

有两种解决这个问题的方法：1、box-sizing 2、calc()。随着CSS3的出现，其中利用box-sizing来改变元素的盒模型类型实使实现效果，但今天我们学习的calc()方法更是方便。

1、div.box的box-sizing设置为border-box；

效果：

div.demo:

div.box:

2、使用calc()

知道总宽度是100%，在这个基础上减去boder的宽度（5px * 2 = 10px）,在减去padding的宽度（10px * 2 = 20px），即"100% - (10px + 5px) * 2 = 30px" ，最终得到的值就是div.box的width值：

这样一来，通过calc()计算后，div.box不在会超出其容器div.demo的宽度，如图所示：

rem来做移动端的响应式适配：

参考文献：http://web.jobbole.com/82490/

calc()参考文献：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html