CSS魔法堂：小結一下Box Model與Positioning Scheme

前言

 對於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的優先級

 簡單粗暴上規則:)

1. Normal flow做爲默認的定位模式其優先級天然是最低的;
2. 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寬高的設置方式。

1. 當採用Normal flow。inline-level element將在水平方向上一個接一個的排版佈局，而且沒法經過width和height來強制設置寬度和高度；block-level element將在垂直方向上逐一排版。
2. 當採用Float時，display屬性的實際值會被重置爲block。
3. 當採用Absolute positioning時，display屬性的實際值會被重置爲block，而且經過引入top/right/bottom/left這4個margin edge到containing block對應的edge的距離來調整盒子的定位。
4. 因爲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了。由於元素沒有對應的盒子，還說什麼定位，說什麼佈局呢。

總結

尊重原創，轉載請註明來自：http://www.cnblogs.com/fsjohnhuang/p/5377955.html^_^肥仔John

感謝

KB009: CSS 定位體系概述