前言

作为CSS尺寸的单位，百分比在很多情况下都会使用到，但这个单位有些时候和想象的有点不一样，为了记录一下呢，在这里进行简单的总结。

开始

• 首先看看哪些属性可以使用百分比单位

  width, height, left, top, right, bottom, margin, padding, font-size

• 相对于谁

  首先是width(min-width, max-width) 看一下MDN对 width 的定义: width 属性指定了元素内容区的宽度. 内容区在元素padding，border和margin里面。当这个属性使用百分比时，相对于 父容器的宽度

  height(min-height, max-height) 当使用这个属性时，相对于 父容器的高度

  left, top, right, bottom 这四个属性一样，只是定义不同方向的占的比例，同时，这几个属性的偏移受 position 的影响。当 position 为 static 时，这四个属性无效果，当 position 的值为 sticky 时，效果就分情况了。在viewport内时，表现同 position 为 relative, 在 viewport外时，表现同 position 为 fixed

  1. top: 相对于 父容器的高度
  2. bottom: 相对于 父容器的高度
  3. left: 相对于 父容器的宽度
  4. right: 相对于 父容器的宽度

  margin，比较容易混淆的是 margin-bottom 和 margin-top，都应该是相对于 父容器的宽度， 允许负值

  1. margin-bottom: 相对于 父容器的宽度
  2. margin-top: 相对于 父容器的宽度
  3. margin-left: 相对于 父容器的宽度
  4. margin-right: 相对于 父容器的宽度

  padding，同 margin 一样，比较容易混淆的是 padding-bottom 和 padding-top， 都应该是相对于 父窗口的宽度， 不允许负值

  1. padding-bottom: 相对于 父容器的宽度
  2. padding-top: 相对于 父容器的宽度
  3. padding-left: 相对于 父容器的宽度
  4. padding-right: 相对于 父容器的宽度

  最后是font-size 设置为正值，大小相对于 父元素的字体大小， 由于font-size可继承，因此可能是不断向上查找的过程

尾巴

CSS有时让人感觉简单，有时让人觉得复杂，有时还让人感到困惑，比如 margin-bottom/top 和 padding-bottom/top，是相对于宽度的，基于这种情况，还可以制作响应式的正方形等效果。