对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考。 《CSS魔法堂:重新认识Box Model、IFC、BFC和Collapsing margins》 《CSS魔法堂:你一定误解过的Normal flow》 《CSS魔法堂:Absolute Positioning就这个样》 《CSS魔法堂:说说Float那个被埋没的志向》 深入细节后会发现3中定位模式之间,Box Model和Positioning Scheme之间存在千丝万缕的关系,必须以俯瞰的角度捋一下。
简单粗暴上规则:)
之前我总觉得Box Model是一个随定位模式变化的结构,但其实我是被一些表象给蒙蔽了而已。
首先我们要坚定不移地记住:每一个元素只要不是display:none
,则它必定会产生一个遵循Box Model的盒子,而这个盒子不管任何情况均由margin box、border box、padding box和content area这4个框组成。(因此说每一个元素会生成0~N个框是正确的哦^_^)
而Positioning Scheme则决定盒子间布局关系,并通过影响display
属性影响Ccontent area宽高的设置方式。
position:relative
来引入top/right/bottom/left来提供盒子定位微调的功能。** 注意:无论采用哪种定位模式,盒子依然由margin/border/padding/content4个框组成 **
display
的结果值当采用Float和Absolute positioning时,display属性值将根据下列规则被重置:
设定值
inline-table
实际值
table
设定值
inline, run-in, table-row-group, table-column, table-column-group, table-header-group,
table-footer-group, table-row, table-cell, table-caption, inline-block
实际值
block
另外当设置display:none
,就不再考虑Positioning scheme了。因为元素没有对应的盒子,还说什么定位,说什么布局呢。
尊重原创,转载请注明