CSS padding和margin百分比的使用和细节

padding和margin作为CSS最常用的属性之一，它的用法想必大家都不陌生，但它的值除了数值之外，还有一个百分比！

数值很简单，输入多少那么padding和margin的值就是多少。那么百分比呢？
百分比对应的值是根据父元素的宽度来决定的，如果没有就继续往上级去查找，注意：不管是水平还是垂直的padding和margin都是由父辈的宽度来决定。

下面以padding来举个例子：

<style>
    .box {
      width: 200px;
      height: 200px;
      padding: 20px;
	  background-color: #red;
    }
    .innerbox {
      width: 100px;
      height: 100px;
	  padding: 10%;
	  /* 200 * 10% = 20px */
	  background-color: #000;
    }
  </style>
  
	<div class="box">
	    <div class="innerbox">
	    </div>
	</div>

也就是说，上述子元素的padding为父元素宽度的10%，即200 * 10% = 20px。
那么百分比用法很简单，它有没有一些要注意的地方呢？答案是有的。

注意点

1. 如果 position 属性为 static 、 relative 或 sticky，包含块就是该元素最近的祖先块级元素的 content 决定
2. 如果 position 属性为 absolute、fixed，包含块还要额外算上 padding，即 content + padding。

下面再来贴两个例子：

<style>
   .box {
     position: relative;
     width: 200px;
     height: 200px;
     padding: 20px;
  	 background-color: #red;
   }
   .innerbox {
     position: relative;
     width: 100px;
     height: 100px;
  	 padding: 10%;
  	 background-color: #000;
   }
 </style>

<div class="box">
    <div class="innerbox">
    </div>
</div>

可以看到padding是父元素的宽200px*10%=20px。

那么当子元素的position为absolute时，再来看看结果：

<style>
   .box {
     position: relative;
     width: 200px;
     height: 200px;
     padding: 20px;
  	 background-color: #red;
   }
   .innerbox {
     position: absolute;
     width: 100px;
     height: 100px;
  	 padding: 10%;
  	 background-color: #000;
   }
 </style>

<div class="box">
    <div class="innerbox">
    </div>
</div>

padding变成了父元素的(content+padding)*0.1了。

所以各位，细节一定要拿捏住了。