你是否曾对CSS中的百分比单位非常疑惑？是否简单认为百分比的基准值就是所在元素的的宽高？本文将从包含块角度帮助大家理解记忆百分比单位的计算规则，便于巧妙运用包含块规则解决实际开发中的布局问题！一、确立包含块在我们常用的场景中，position的值有relative、absolute、fixed、static，且这四种属性为代表，浏览器对于这四种属性的包含块确立规则如下：值说明absolute绝对定位，包含块就是由它的最近的position的值不是static的祖先元素的内边距区的边缘组成。fixed固定定位，在连续媒体下(continuousmedia)包含块是viewport（视口），在分页媒体(pagedmedia)下的情况下包含块是分页区域(pagearea)relative相对定位，包含块是最近祖先块级元素或格式化上下文static默认值，没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明），同relative规则根元素()所在的包含块是一个被称为初始包含块的矩形。他的尺寸是视口viewport(forcontinuousmedia)或分页媒体pagemedia(forpagedmedia).二、百分比值计算规则百分比单位计算基数属性当前属性备注包含块的widthwidth、left、right、padding、margin若包含块position值为relative或static，则当前元素的计算值为auto包含块的heightheight、top、bottom则其值为：包含块height值*当前元素height百分比值三、包含块原理的应用场景自己之前一直有个误区，认为padding、margin的百分比单位的计算基数是当前元素矩形区域宽高来算，但是根据包含块的规则，他们的计算基数应该是包含块的width值。之前团队里大佬洪岩问：“如何实现一个高度是自适应宽度3倍的图片？”实现方法1:利用Chrome浏览器最新支持的aspect-ratio属性，其问题就是C端浏览器兼容性不好.box{aspect-ratio:1/3;//width/height宽高比}aspect-ratio实现方法2:巧用包含块规则（padding和width属性百分比值的计算基数是包含块的宽度）+背景图实现1比3的实现
笔记