先看一下例子,某个元素的尺码和岗位的计算往往是由该因素所在的带有块决定的

那怎么知道一个元素的包含块在哪呢,先看一下例子

包含块(Containing Block)
某个成分的尺码和地点的测算往往是由该因素所在的蕴涵块决定的,包蕴块不会特指某个成分区域,而是一块视觉假想出来的一块区域,驾驭了他就足以方便的为因素举行定点。
那怎么通晓一个要素的包括块在哪呢?

看到习大大纯属定位bottom值为0的岗位难题一文,了然了以下包涵块的文化,在那里记录一下。
先看一下例子:
Demo1

  • 千帆竞发包括块
    用户代理(比如浏览器)拔取根成分作为 containing block(称之为初步containing
    block)。当html的子成分没有任何跟亲近的带有块时,会借助开始包罗块进行定位、
    始发包罗块的分寸?即视口大小,,高度不会趁机html的附加而增大。
  • 非相对定位的因素,其含有块为眼前的块级祖先成分盒子的内容边界组成。
    转变成分也是这么,从内容边界早先。
  • 相对成分的蕴藏块由多年来的 position 不是 static 的先世建立
    实则那一个相比较复杂,需要考虑该相对元素的含有块是内联依旧块级元素创设的。内联的情事包容性比较差,所以一般都幸免让内联成分里面去涵盖块级成分,所以大多数还都以由块级元素成立包罗块。
    其containing block 由祖先的border内边界形成。
  • 一旦成分有总体性 ‘position:fixed’,containing block 由视口建立

图片 1

Demo1

当相对定位的成分,bottom为0时,元素会一定到如今视口的左下角,望着像fixed嘿嘿,我也觉得,但实际上那只是临时的,但他何以会在这几个地点,就要看看包含块的文化了。

10.1 Definition of “containing block”
The position and size of an element’s box(es) are sometimes calculated
relative to a certain rectangle, called the containing block of the
element. The containing block of an element is defined as follows:
1.The containing block in which the root element lives is a rectangle
called the initial containing block. For continuous media, it has the
dimensions of the viewport and is anchored at the canvas origin; it is
the page area for paged media. The ‘direction’ property of the initial
containing block is the same as for the root element.

root要素所在的containing block称为initial containing block大小同viewport原点与canvas重和。
那里出现了initial containing block下边,来总括一下

  • 初阶包涵块
    用户代理(比如浏览器)选拔根成分作为 containing block(称之为开始containing
    block)。当html的子成分没有此外跟亲近的包罗块时,会凭借起头包涵块举行固定、
    起来包涵块的大大小小?即视口大小,,高度不会趁着html的叠加而增大。
  • 非相对定位的成分,其包蕴块为近期的块级祖先成分盒子的内容边界组成。
    转移成分也是那样,从内容边界发轫。
  • 纯属成分的含有块由多年来的 position 不是 static 的祖辈建立
    事实上这几个相比复杂,须要考虑该相对成分的带有块是内联如故块级元素创制的。内联的情状包容性比较差,所以一般都幸免让内联成分里面去涵盖块级元素,所以一大半还都以由块级成分成立包蕴块。
    其containing block 由祖先的border内边界形成。
  • 假使成分有品质 ‘position:fixed’,containing block 由视口建立