你是否曾对CSS中的百分比单位非常疑惑?是否简单认为百分比的基准值就是所在元素的的宽高?本文将从包含块角度帮助大家理解记忆百分比单位的计算规则,便于巧妙运用包含块规则解决实际开发中的布局问题!
一、确立包含块
包含块是一个非常重要的概念,通常包含块是当前元素的最近祖先元素的内容区,包含块的形成依赖于CSS position属性。
在我们常用的场景中,position
的值有relative
、absolute
、fixed
、static
,且这四种属性为代表,浏览器对于这四种属性的包含块确立规则如下:
值 | 说明 |
---|---|
absolute |
绝对定位,包含块就是由它的最近的 position 的值不是static 的祖先元素的内边距区的边缘组成。 |
fixed |
固定定位,在连续媒体下(continuous media )包含块是 viewport (视口) ,在分页媒体(paged media )下的情况下包含块是分页区域(page area ) |
relative |
相对定位,包含块是最近祖先块级元素或格式化上下文 |
static |
默认值,没有定位,元素出现在正常的流中(忽略 top , bottom , left , right 或者 z-index 声明),同relative 规则 |
根元素()所在的包含块是一个被称为初始包含块的矩形。他的尺寸是视口
viewport
(for continuous media
) 或分页媒体page media
(for paged media
).
二、百分比值计算规则
CSS中例如width
、height
、padding
等属性在设置百分比值时,浏览器会动态计算实际的像素值,百分比的计算基数就是该元素的包含块对应的实际属性值。
百分比单位计算基数属性 | 当前属性 | 备注 |
---|---|---|
包含块的width | width 、left 、right 、padding 、margin |
若包含块position值为relative或static,则当前元素的计算值为auto |
包含块的height | height 、top 、bottom |
例如计算当前元素的百分比值的height
属性
则其值为:包含块height值 * 当前元素height百分比值
三、包含块原理的应用场景
自己之前一直有个误区,认为padding
、margin
的百分比单位的计算基数是当前元素矩形区域宽高来算,但是根据包含块的规则,他们的计算基数应该是包含块的width
值。
之前团队里大佬洪岩问:“如何实现一个高度是自适应宽度3倍的图片?”
实现方法1: 利用Chrome
浏览器最新支持的aspect-ratio属性,其问题就是C端浏览器兼容性不好
.box {
aspect-ratio: 1/3; // width/height 宽高比
}
实现方法2: 巧用包含块规则(padding
和width
属性百分比值的计算基数是包含块的宽度)+ 背景图实现
CodePen地址:https://codepen.io/DYBOY/pen/JjbZgeE
四、总结
熟记包含块规则,有利于在实际开发中解决一些“小块”的布局问题。有需要内推的同学欢迎
版权声明:《 这是你不知道的包含块规则 》为DYBOY原创文章,转载请注明出处!
最后编辑:2021-3-12 14:03:28
2021-03-23 09:17
2021-03-20 21:37
2021-03-14 15:51