问题的提出

在开发的时候难免会使用到宽高的百分比来表示，一般都不会出现什么问题，但是在引入position定位的时候，可能会出现跟预想效果的宽高发生了一些变化，这是怎么回事呢？

一般的开发情况

我们在一般开发时，一般都是这样使用的

 <div class="parent">
    <div class="son"></div>
 </div>

 .parent {
   width: 600px;
   height: 400px;
   background-color: red;
 }
 .son {
    width: 50%;
    height: 50%;
    background-color: blue;
  }

效果图

没有任何问题，而且也不会随着窗口的变化而变化，当我们引入position后

 .parent {
    width: 600px;
    height: 400px;
    background-color: red;
  }
  .son {
    width: 50%;
    height: 50%;
    background-color: blue;
    position: relative;
 }

诶！这也没有发生变化啊，这时你可能就会说子元素的宽高百分比都是根据父元素来计算的，但是这句话正确吗？可能会打破你的常识，我认为子元素的宽高百分比并不是参考它父元素来进行计算的，而是根据子元素的包含块来计算的，只不过现在父元素内容区域的这个范围大小刚好是它子元素的包含块，所以才参考它父元素来进行计算。不信？我们继续往下看

当我们把定位设置为绝对定位后，再看看效果呢

 .parent {
    width: 600px;
    height: 400px;
    background-color: red;
  }
  .son {
    width: 50%;
    height: 50%;
    background-color: blue;
    position: absolute;
  }

效果图

发现这子元素的宽高怎么变了，而且随着窗口的改变还不停地变化，可见这子元素的百分比并不是按照它父元素的宽高来计算的。其实这跟元素的包含块有关，现在开始介绍CSS包含块。

包含块

概念

页面上的元素，排列在包含块里面，包含块是一个区域，元素在这个区域里面进行排列，这个区域包含了这个元素，所以我们把这个区域叫做这个元素的包含块。某个元素的包含块，就是指这个元素的排列区域，该元素只能在这个包含块里排列。

包含块有几种情况，各个情况的宽高都不相同

情况一

如果元素的position是relative或static(默认值)，其包含块则是：离它最近的块容器的内容区域(content area)

这种情况就是开始说的那两种情况，因为默认的position为static，所以子元素的宽高是它父元素的的宽高的一半，不会随着窗口发生变化。

 <div class="parent">
   <div class="son">
     <div class="grandson"></div>
   </div>
 </div>

 .parent {
   width: 600px;
   height: 400px;
   background-color: red;
 }
 .son {
   width: 50%; /* 300px */
   height: 50%; /* 200px */
   background-color: blue;
 }
 .grandson {
   width: 50%; /* 150px */
   height: 50%; /* 100px */
   background-color: chocolate;
   position: relative;
  }

效果图

当把子元素改为span元素后 效果图

孙元素的宽300px高200px，刚好为父元素的一半

情况二

如果元素使用了absolute定位，则包含块为离它最近的position值不为static的祖先元素的内边距区域(padding+content区域)

没设置padding

 <div class="parent">
   <div class="son">
     <div class="grandson"></div>
   </div>
 </div>

 .parent {
   width: 600px;
   height: 400px;
   background-color: red;
   position: relative;
 }
 .son {
   width: 60%; /* 360px */
   height: 60%; /* 240px */
   background-color: blue;
 }
 .grandson {
   width: 50%; /* 300px */
   height: 50%; /* 200px */
   background-color: chocolate;
   position: absolute;
 }

效果图

这孙元素明显不是子元素宽高的50%，这时孙元素的包含块是父元素的内容区域，因为没有设置padding

当设置padding后呢？

 <div class="parent">
   <div class="son">
     <div class="grandson"></div>
   </div>
 </div>

 .parent {
   width: 600px;
   height: 400px;
   padding: 100px;
   background-color: red;
   position: relative;
 }
 .son {
   width: 60%; /* 360px */
   height: 60%; /* 240px */
   background-color: blue;
 }
 .grandson {
   width: 50%; /* 400px */
   height: 50%; /* 300px */
   background-color: chocolate;
   position: absolute;
 }

效果图

可以看见，孙元素的宽高已经覆盖了子元素

这时可能会出现，父元素并没有设置相对定位呢？

 <div class="parent">
   <div class="son">
     <div class="grandson"></div>
   </div>
 </div>

 .parent {
   width: 600px;
   height: 400px;
   background-color: red;
 }
 .son {
   width: 60%; /* 360px */
   height: 60%; /* 240px */
   background-color: blue;
 }
 .grandson {
   width: 50%; /* 759.600px */
   height: 50%; /* 200px */
   background-color: chocolate;
   position: absolute;
 }

效果图

这时的孙元素的包含块又是那个区域呢？可能你已经猜到了是窗口，没错就是窗口，它的尺寸会随窗口的变化而变化。

孙元素的包含块是根元素(htnl元素)所在的包含块，它被称为初始包含块，对于浏览器来说，初始包含块大小等于视口viewport的大小。

情况三

如果position是fixed则包含块由视口建立

 <div class="parent">
   <div class="son">
     <div class="grandson"></div>
   </div>
 </div>

 .parent {
   width: 600px;
   height: 400px;
   background-color: red;
 }
 .son {
   width: 60%; /* 911.513px */
   height: 60%; /* 240px */
   background-color: blue;
   position: fixed;
 }
 .grandson {
   width: 50%; /* 455.750px */
   height: 50%; /* 120px */
   background-color: chocolate;
   position: absolute;
 }

效果图

孙元素的宽高又是第二种情况了

总结

除了宽高的百分比之外，margin,padding,left,top也是在元素的包含块内变化的，可以自己尝试下。

可以发现元素的百分比并不受父元素的影响，而是收到元素自身的包含块的影响。

以后给元素设置百分比的时候就需要这个细节了!!!