IT工程師數位筆記本

前言

 對于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 定位體系概述