px

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

百分比%

  • 子元素相对父容器的占比

  • 设置子元素的font-size为50%，那么子元素的font-size等于父容器的font-size*50%。

em

  • em是一个相对单位

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

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

  1. <div style="font-size:20px;">
  2.      <div style="height:2em;line-height:2em;background-color:red;>字体是多大呢</div>
  3. </div>

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

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

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

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

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

rem

  • rem是对em的改进，这里我们先讲一下em的一个很烦人的缺陷，就是em具有继承性，子元素的1个em等于父容器的font-size，这样一来，遇到嵌套很深的结构，我们就不容易立刻知道每个子元素的1em等于多个px了，比如下面这个例子：
  1. .outer{
  2.     font-size: 2em;
  3. }
  4. .inner,.text{
  5.     font-size: 0.75em;
  6. }
  1. <div class="outer">
  2.      <div class="articl-title">测试一下，你就知道的点点滴滴多多多多多</div>
  3.      <div id="inner" class="inner">
  4.           <a href="">css中的常见单位</a>
  5.           <p class="text">em和rem有哪些不同</p>
  6.       </div>
  7. </div>

  • .outer的font-size为2em，我们没有给它以上的父容器设置font-size，所以它的font-size为16px*2=32px，但是我们想知道.text的font-size就比较复杂了16px*2*0.75*0.75=18px。

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

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

  1. html{
  2.         font-size:62.5%;
  3. }
  • 这样一来根元素<html>的font-size就变成16px*62.5%=10px,也就是 1rem=10px。这样方便我们计算（与设计稿对照）

vw和vh

名称 解释
vw 1vw = 视口宽度的1%
vh 1vw = 视口高度的1%
vmin 选取vw和vh中最小的那个
vmax 选取vw和vh中最大的那个

  • 这里解释一下视口
    这里视口的宽度和高度不是指屏幕的高宽，更不是浏览器的高宽，而是浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight

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

先写这些有时间再更