大家有没有对CSS中的百分比是如何工作的感兴趣？有没有想过，为什么它有时会乱七八糟，没啥头绪？反正我是有，所以今天分享这篇文章，对自己来说是加深理解，同时也希望对大家有所帮助。
什么百分比？作为百分比，显然应该有一个目标作为参考源，这个参考一般是父元素。这是正确的，但并不涵盖所有情况。最正确的答案应该是包含块(containingblock)，即包含我们元素的块且它不必是直接的父元素。
看看下面的例子：
代码：
divclass="grandparent"divclass="parent"divclass="child"/div/div/div
.grandparent{position:relative;width:px;height:px;background:#eaeaea;}.parent{width:px;height:px;background:#aaa;}.child{position:absolute;width:50%;height:50%;top:25%;left:25%;background:red;}
在上面的例子中，我创建了3个嵌套div，它们是具有以下特征的3个正方形
最外面的组元div是一个浅灰色，大小为4x4父元素div的颜色为深灰色，大小为2x2以及分配50%大小的红色子div如果百分比单位以父级为来源，则子级的大小应该是它的1/2，但上面的不是，子级的大小实际上等于父级，也就是祖父级的1/2。原因是祖父级div是子级div的真正包含块，因为子级具有position:absolute，对应于在祖父级中设置的position:relative。
因此，为了确定哪个是元素的实际包含块，它完全基于元素本身的position属性。
但是，对于某些属性，百分比单元的引用源既不是父块也不是包含块，而是它本身——自身元素。
百分比的属性width/height如上面的例子中看到的，当一个元素为其宽度分配一个百分比值时，width是基于包含块的width,height是基于包含块的height。
padding对于padding，垂直（padding-top/padding-bottom）或水平（padding-left/padding-right）都是基于包含块的width来计算。
来个例子：
divclass="parent"divclass="child"/div/div
.parent{background:#eaeaea;width:px;height:px;}.child{display:inline-block;background:red;padding-top:50%;padding-left:50%;}.parent{position:relative;}
线上