欢迎光临
我们一直在努力

关于width与height的百分比参照对象

基本内容

百分比是实现页面自适应的重要途径,而元素百分比的宿主到底是谁一直是令人困扰的问题。其实CSS对于百分比的定义十分明确:

  • 所有元素的百分比都是相对于其包含块( containing block)width
  • 在盒模型的设置属性中,除了height的百分比是相对于包含块的height,其余的widthmargin(不管是横向的margin-left还是纵向的margin-right)、padding(同上)都是相对于包含块的width

之前因为子元素的百分比参照纠结半天...实属尴尬,最后重要的是我们还需要了解一下如何确定我们的包含快:

包含块的影响

在学习如何确定元素包含块之前,先了解一下它的重要性。

元素的尺寸及位置,常常会受它的包含块所影响。对于一些属性,例如 widthheightpaddingmargin,绝对定位元素的偏移值 (比如 position 被设置为 absolute 或 fixed),当我们对其赋予百分比值时,这些值的计算值,就是通过元素的包含块计算得来。

确定包含块

确定一个元素的包含块的过程完全依赖于这个元素的 position 属性:

  1. 如果 position 属性为 static 、relative 或 sticky,包含块可能由它的最近的祖先块元素(比如说inline-block, block 或 list-item元素)的内容区的边缘组成,也可能会建立格式化上下文(比如说 a table container, flex container, grid container, 或者是 the block container 自身)。
  2. 如果 position 属性为 absolute ,包含块就是由它的最近的 position 的值不是 static(也就是值为fixedabsoluterelative 或 sticky)的祖先元素的内边距区的边缘组成。
  3. 如果 position 属性是 fixed,在连续媒体的情况下(continuous media)包含块是 viewport ,在分页媒体(paged media)下的情况下包含块是分页区域(page area)。
  4. 如果 position 属性是 absolute 或 fixed,包含块也可能是由满足以下条件的最近父级元素的内边距区的边缘组成的:
    1. transform or perspectivevalue other than none
    2. will-change value of transform or perspective
    3. filter value other than none or a will-change value of filter(only works on Firefox).
    4. contain value of paint (例如: contain: paint;)

根据包含块计算百分值

如上所述,如果某些属性被赋予一个百分值的话,它的计算值是由这个元素的包含块计算而来的。这些属性包括盒模型属性和偏移属性:

  1. 要计算 height top 及 bottom 中的百分值,是通过包含块的 height的值。如果包含块的 height 值会根据它的内容变化,而且包含块的 position 属性的值被赋予 relative或 static ,那么,这些值的计算值为 auto。
  2. 要计算 widthleftrightpaddingmargin 这些属性由包含块的 width 属性的值来计算它的百分值。
赞(0) 打赏
未经允许不得转载:散人研 » 关于width与height的百分比参照对象
分享到: 更多 (0)

如果文章有不解或描述错误的地方,欢迎在评论区提问或指正!

评论 抢沙发

7 + 3 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏