css中常见的单位

px

这个就不多说了，中最为常用的一种单位，传统上一个像素对应计算机屏幕上的一个点。

百分比%

子元素相对父容器的占比

设置子元素的为50%，那么子元素的等于父容器的。

em

是一个相对单位

等于其父元素设置的字体大小

例如下边这段代码，子元素的高度为也就是。

如果父元素没有设置字体大小，则继续查找父元素的父元素，直到有设置字体大小的父元素为止。如果都没有设置大小，则使用浏览器默认大小，例如Chrome默认字体大小为。

为什么使用，或者说相较于的好处

用户可以设置字体大小

如果使用为单位，用户在浏览器中设置字体大小，我们的页面字体也会相应的改变，使用则没有任何改变（很多国外的网站是这样做的，国内这样做的很少）

2.修改方便快捷

修改父容器的字体大小子元素的字体大小都会跟着改变，这一点是无法做到的

举一个例子可能更好理解，比如我们写一片文章的样式，有标题，二级标题，大纲，文本，现在要整体将字体放大，我们只需要修改或者的就可以了,如果使用作单位就需要每一处分别修改了。

rem

是对的改进，这里我们先讲一下的一个很烦人的缺陷，就是具有继承性，子元素的1个等于父容器的，这样一来，遇到嵌套很深的结构，我们就不容易立刻知道每个子元素的等于多个了，比如下面这个例子：

的为，我们没有给它以上的父容器设置，所以它的为，但是我们想知道的就比较复杂了。

如何解决这问题呢？这里css3引入了 的概念，与非常相似，最重要的不同是，不论在那一级元素上1个都等于跟元素的，这样不仅具有的优点，还不会造成混乱，不论结构嵌套多复杂我们都能轻松换算出当前元素的对应多少个px。

这里有一点建议,给根元素添加如下的样式：

这样一来根元素的就变成,也就是 。这样方便我们计算（与设计稿对照）

vw和vh

这里解释一下视口

这里视口的宽度和高度不是指屏幕的高宽，更不是浏览器的高宽，而是浏览器内部的可视区域大小，即

目前使用的场景并不多，因为使用百分比也可以实现相同的效果，我个人在制作幻灯片效果时，会选择使用,比较方便。

先写这些有时间再更