CSS魔法堂："那不是bug，是你不懂我!" by inline-block

最新推荐文章于 2025-09-04 16:13:54 发布

转载最新推荐文章于 2025-09-04 16:13:54 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/348796

文章标签：

#测试 #前端 #操作系统 #ViewUI

本文深入探讨了CSS中三种定位模式的优先级及它们与Box Model之间的关系，详细解析了Normal Flow、浮动和绝对定位的工作原理及其对元素布局的影响。

前言

对于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之间存在千丝万缕的关系，必须以俯瞰的角度捋一下。

Positioning Scheme的优先级

简单粗暴上规则:)

Normal flow作为默认的定位模式其优先级自然是最低的;
Absolute positioning相比Float，与Normal flow关联性更弱，优先级最高;
优先级从低到高: Normal flow < Float < Absolute positioning

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宽高的设置方式。

当采用Normal flow。inline-level element将在水平方向上一个接一个的排版布局，并且无法通过width和height来强制设置宽度和高度；block-level element将在垂直方向上逐一排版。
当采用Float时，display属性的实际值会被重置为block。
当采用Absolute positioning时，display属性的实际值会被重置为block，并且通过引入top/right/bottom/left这4个margin edge到containing block对应的edge的距离来调整盒子的定位。
由于Normal flow和Float则需要通过position:relative来引入top/right/bottom/left来提供盒子定位微调的功能。

** 注意：无论采用哪种定位模式，盒子依然由margin/border/padding/content4个框组成 **

Positioning Scheme将影响`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了。因为元素没有对应的盒子，还说什么定位，说什么布局呢。