- 半数以上的
css值都需要用到各种各样的单位，下面就开始讲讲 单位。
一、单位总结图
二、绝对单位
2.1 px
px是pixels（像素）的缩写，是一种绝对单位，用于屏幕显示器上，传统上一个像素对应于计算机屏幕上的一个点，而对于高清屏则对应更多。
- 任何现代显示屏，不管是手机，平板，笔记本还是电视都是由成千上万的像素组成的，所以我们可以使用这些像素来定义长度。
- 另外
CSS将光栅图像(如照片等)的显示方式定义为默认每一个图像大小为“1px”。
- 一个“
600x400”解析度的照片的长宽分别为“600px”以及“400px”，所以照片本身的像素并不会与显示装置像素(可能非常小)一致，而是与px单位一致。- 如此就可以将图像完整的与网页的其它元素排列起来。
三、相对单位
3.1 %
- 如果对
html元素设置font-size为百分比值，则是以浏览器默认的字体大小16px为参照计算的（所有浏览器的默认字体大小都为16px），如62.5%即等于10px（62.5% * 16px = 10px）。
3.2 em
em也是一种相对单位，既然是相对单位，那么肯定有一个参照值。- 不过其参照值并不是固定不变的，而是不同的属性有不同的参照值。
- font-size
em的计算方式是相对于 父元素的字体大小，1em等于父元素设置的字体大小。- 如果父元素没有设置字体大小，则继续往父级元素查找，直到有设置大小的，如果都没有设置大小，则使用浏览器默认的字体大小。
.parent {
font-size: 14px;
}
.child1 {
font-size: 1em; /* 1em = 1*14px*/
}
.child2 {
font-size: 1.5em; /* 1.5em = 1.5*14px */
}
/* 父级元素都没有设置大小的 */
.no-parent-font-size {
font-size: 0.8em; /* 0.8em = 0.8*16px */
}
- border, width, height, padding, margin, line-height
- 使用
em单位的计算方式是参照该元素的font-size，1em等于该元素设置的字体大小。- 同理如果该元素没有设置，则一直向父级元素查找，直到找到，如果都没有设置大小，则使用浏览器默认的字体大小。
p {
font-size: 14px;
width: 20em; /* 20em = 20*14px */
padding: 1.5em; /* 1.5em = 1.5*14px */
}
/* 元素本身没有设置字体大小且父级元素也没有设置 */
.no-font-size {
width: 40em; /* 40em = 40*16px */
margin-bottom: 2em; /* 2em = 2*16px */
}
3.3 rem
rem是一种相对单位，rem是相对于 根元素html的font-size来计算的，所以 其参照物是固定的。
- 由于
rem是基于跟元素html的font-size来计算的，所以如果改变html的font-size值，那么所有使用的rem单位的大小都会随着改变，这对于 移动端适应各种屏幕大小 来说还是有点作用的。
html {
font-size: 625%; /* 相当于100px = 625% * 16px */
}
div {
font-size: 20px;
width: 2rem; /* 2rem = 2 * 100px(根元素的font-size) */
height: 4rem; /* 4rem = 4 * 100px(根元素的font-size) */
padding: 0.1rem; /* 0.1rem = 0.1 * 100px(根元素的font-size) */
}
3.4 vw和vh
- 请查看：css - vw和vh