元素的 “包含块” 如何确定？Containing Block

元素的位置(position)和大小（dimensions） 需要根据元素的包含块（containing block）来确定。那么，谁是元素的包含框？

有以下对应规则：

元素	对应的包含块
根元素root element(例如document)	初始包含块 initial containing block
position 为 static, relative 的元素	display 属性为以下值（block,inline-block,list_item,table,table-cell,run-in） 之一的最近祖先元素(nearest ancestor element)的内容框(content box)
position 为 absolute的元素	position属性为absolute,fixed,relative之一的最近祖先元素的padding edge.

 

 

 

 

 

 

有了这样的规则，就能理解一个元素 样式中  “width:80%” 代表谁的80%了：代表这个元素的包含块的有效宽度的80%。