資訊專欄INFORMATION COLUMN
摘要：魔法堂重新認識和魔法堂你一定誤解過的魔法堂就這個樣魔法堂說說那個被埋沒的志向深入細節后會發現中定位模式之間，和之間存在千絲萬縷的關系，必須以俯瞰的角度捋一下。當采用時，屬性的實際值會被重置為。由于和則需要通過來引入來提供盒子定位微調的功能。
前言
?對于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之間存在千絲萬縷的關系，必須以俯瞰的角度捋一下。
?簡單粗暴上規則:)
Normal flow作為默認的定位模式其優先級自然是最低的;
Absolute positioning相比Float，與Normal flow關聯性更弱，優先級最高;
優先級從低到高: Normal flow < Float < Absolute positioning
?之前我總覺得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了。因為元素沒有對應的盒子，還說什么定位，說什么布局呢。
總結尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/537...肥仔John
感謝KB009: CSS 定位體系概述
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115199.html
摘要：更多關于的信息可參考魔法堂不得不說的因此的實際值則是相對于而言，我們可以通過來獲取和的實際值。對于由于自身有固有的，因此當設置時，其實際值就是元素固有的。結果就是除均不為，而為時，會自動計算以滿足等式。兩條不滿足外，其他情況均一致。 前言 當我們以position:absolute之名讓元素脫離Normal flow的控制后，以為通過left和top屬性值即可讓元素得以無限的自由時，卻...
摘要：后來終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純設置效果與采用是一樣的魔法堂就這個樣，而浮動定位也是基于。相對定位的最強武器就是個屬性了，好明顯它們默認值均是。 前言 ?剛接觸CSS時經常聽到看到一個詞文檔流，那到底什么是文檔流呢？然后會看到絕對定位和浮動定位能脫離文檔流，從這句可以看到文檔流和絕對定位、浮動定位是同一個范疇的概念，再后來在W3C標準文檔找到關于Absolu...
摘要：時其寬度始終保持占滿寬度的態度。清除浮動就是為浮動影響的范圍劃邊界。那么可歸結為的父容器包裹所有子元素。注意屬性值不能為空白，否則無法清除浮動。 前言 ?定位系統中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開頭我們就用錯了；2. 它跟Normal flow靠得太近了。本文嘗試理清Float的特性和行為特征，若有紕漏望各位指正...
摘要：前言魔法堂重新認識和中提到在沒有兄弟盒子時，的左右邊框會與所屬的的左右相接觸。對于的元素若不存在的為的父，其為。正常情況若子尺寸尺寸，則子溢出溢出后的顯示效果由屬性值決定。異常情況下當時，若子的尺寸大于的尺寸而城撐大。 前言 ?《CSS魔法堂：重新認識Box Model、IFC、BFC和Collapsing margins》中提到在沒有floated兄弟盒子時，line box的左右邊...
閱讀 1846·2021-11-22 15:25
閱讀 3912·2021-11-17 09:33
閱讀 2506·2021-10-12 10:12
閱讀 1801·2021-10-09 09:44
閱讀 3235·2021-10-08 10:04
閱讀 1312·2021-09-29 09:35
閱讀 1947·2019-08-30 12:57
閱讀 1302·2019-08-29 16:22
