你有没有对CSS中的百分比单位很迷茫？你是不是简单的认为百分比的基准值就是它所在元素的宽高？本文将从包含块的角度帮助大家理解内存百分比单位的计算规则，方便在实际开发中使用包含块规则解决布局问题！1.建立包含块。包含块是一个非常重要的概念。通常包含块是当前元素最近的祖先元素的内容区域。包含块表单依赖于CSSposition属性。在我们常用的场景中，position的取值有relative、absolute、fixed、static，这四个属性具有代表性。浏览器对这四个属性的包含块制定了如下规则：根元素()所在的包含块是一个矩形，称为初始包含块。它的大小是viewport视口（对于连续媒体）或者pagemedia（对于分页媒体）。2.百分比值计算规则CSS如width、height、padding等属性在设置百分比值时，浏览器会动态计算出实际的像素值，百分比的计算基数是该元素的包含块对应的实际属性值元素。例如计算当前元素百分比值的height属性的值是：包含块的高度值*当前元素高度的百分比值。计算的是当前元素的矩形区域的宽和高，但是根据包含块的规则，它们的计算基础应该是包含块的宽度值。那么请看下面的问题。之前组长洪岩问：“如何实现一张高度是自适应宽度3倍的图片？”想了想，大致有以下几种实现方式。可以参考实现方式一：Chrome浏览器浏览器支持的最新的aspect-ratio属性，问题是C端浏览器兼容性不好。box{aspect-ratio:1/3;//width/heightaspectratio}aspect-ratio实现方法二：巧妙使用contains块规则（padding和width属性的百分比值的计算基数是包含块的宽度)+背景图片实现
