資訊專欄INFORMATION COLUMN
摘要：魔法堂重新認(rèn)識(shí)和魔法堂你一定誤解過(guò)的魔法堂就這個(gè)樣魔法堂說(shuō)說(shuō)那個(gè)被埋沒(méi)的志向深入細(xì)節(jié)后會(huì)發(fā)現(xiàn)中定位模式之間，和之間存在千絲萬(wàn)縷的關(guān)系，必須以俯瞰的角度捋一下。當(dāng)采用時(shí)，屬性的實(shí)際值會(huì)被重置為。由于和則需要通過(guò)來(lái)引入來(lái)提供盒子定位微調(diào)的功能。
前言
?對(duì)于Box Model和Positioning Scheme中3種定位模式的細(xì)節(jié)，已經(jīng)通過(guò)以下幾篇文章記錄了我對(duì)其的理解和思考。
?《CSS魔法堂：重新認(rèn)識(shí)Box Model、IFC、BFC和Collapsing margins》
?《CSS魔法堂：你一定誤解過(guò)的Normal flow》
?《CSS魔法堂：Absolute Positioning就這個(gè)樣》
?《CSS魔法堂：說(shuō)說(shuō)Float那個(gè)被埋沒(méi)的志向》
?深入細(xì)節(jié)后會(huì)發(fā)現(xiàn)3中定位模式之間，Box Model和Positioning Scheme之間存在千絲萬(wàn)縷的關(guān)系，必須以俯瞰的角度捋一下。
?簡(jiǎn)單粗暴上規(guī)則:)
Normal flow作為默認(rèn)的定位模式其優(yōu)先級(jí)自然是最低的;
Absolute positioning相比Float，與Normal flow關(guān)聯(lián)性更弱，優(yōu)先級(jí)最高;
優(yōu)先級(jí)從低到高: Normal flow < Float < Absolute positioning
?之前我總覺(jué)得Box Model是一個(gè)隨定位模式變化的結(jié)構(gòu)，但其實(shí)我是被一些表象給蒙蔽了而已。
?首先我們要堅(jiān)定不移地記?。?strong>每一個(gè)元素只要不是display:none，則它必定會(huì)產(chǎn)生一個(gè)遵循Box Model的盒子，而這個(gè)盒子不管任何情況均由margin box、border box、padding box和content area這4個(gè)框組成。（因此說(shuō)每一個(gè)元素會(huì)生成0~N個(gè)框是正確的哦^_^）
?而Positioning Scheme則決定盒子間布局關(guān)系，并通過(guò)影響display屬性影響Ccontent area寬高的設(shè)置方式。
當(dāng)采用Normal flow。inline-level element將在水平方向上一個(gè)接一個(gè)的排版布局，并且無(wú)法通過(guò)width和height來(lái)強(qiáng)制設(shè)置寬度和高度；block-level element將在垂直方向上逐一排版。
當(dāng)采用Float時(shí)，display屬性的實(shí)際值會(huì)被重置為block。
當(dāng)采用Absolute positioning時(shí)，display屬性的實(shí)際值會(huì)被重置為block，并且通過(guò)引入top/right/bottom/left這4個(gè)margin edge到containing block對(duì)應(yīng)的edge的距離來(lái)調(diào)整盒子的定位。
由于Normal flow和Float則需要通過(guò)position:relative來(lái)引入top/right/bottom/left來(lái)提供盒子定位微調(diào)的功能。
注意：無(wú)論采用哪種定位模式，盒子依然由margin/border/padding/content4個(gè)框組成
Positioning Scheme將影響display的結(jié)果值?當(dāng)采用Float和Absolute positioning時(shí)，display屬性值將根據(jù)下列規(guī)則被重置：
設(shè)定值 inline-table 實(shí)際值 table
設(shè)定值 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 實(shí)際值 block
?另外當(dāng)設(shè)置display:none，就不再考慮Positioning scheme了。因?yàn)樵貨](méi)有對(duì)應(yīng)的盒子，還說(shuō)什么定位，說(shuō)什么布局呢。
總結(jié)尊重原創(chuàng)，轉(zhuǎn)載請(qǐng)注明來(lái)自：http://www.cnblogs.com/fsjohnhuang/p/537...肥仔John
感謝KB009: CSS 定位體系概述
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/115199.html
摘要：更多關(guān)于的信息可參考魔法堂不得不說(shuō)的因此的實(shí)際值則是相對(duì)于而言，我們可以通過(guò)來(lái)獲取和的實(shí)際值。對(duì)于由于自身有固有的，因此當(dāng)設(shè)置時(shí)，其實(shí)際值就是元素固有的。結(jié)果就是除均不為，而為時(shí)，會(huì)自動(dòng)計(jì)算以滿足等式。兩條不滿足外，其他情況均一致。 前言 當(dāng)我們以position:absolute之名讓元素脫離Normal flow的控制后，以為通過(guò)left和top屬性值即可讓元素得以無(wú)限的自由時(shí)，卻...
摘要：后來(lái)終于知道是某位大神將翻譯為文檔流而已。。。。。。另外單純?cè)O(shè)置效果與采用是一樣的魔法堂就這個(gè)樣，而浮動(dòng)定位也是基于。相對(duì)定位的最強(qiáng)武器就是個(gè)屬性了，好明顯它們默認(rèn)值均是。 前言 ?剛接觸CSS時(shí)經(jīng)常聽(tīng)到看到一個(gè)詞文檔流，那到底什么是文檔流呢？然后會(huì)看到絕對(duì)定位和浮動(dòng)定位能脫離文檔流，從這句可以看到文檔流和絕對(duì)定位、浮動(dòng)定位是同一個(gè)范疇的概念，再后來(lái)在W3C標(biāo)準(zhǔn)文檔找到關(guān)于Absolu...
摘要：時(shí)其寬度始終保持占滿寬度的態(tài)度。清除浮動(dòng)就是為浮動(dòng)影響的范圍劃邊界。那么可歸結(jié)為的父容器包裹所有子元素。注意屬性值不能為空白，否則無(wú)法清除浮動(dòng)。 前言 ?定位系統(tǒng)中第一難理解就是Normal flow，而第二就非Float莫屬了，而Float難理解的原因有倆，1. 一開(kāi)頭我們就用錯(cuò)了；2. 它跟Normal flow靠得太近了。本文嘗試?yán)砬錐loat的特性和行為特征，若有紕漏望各位指正...
摘要：前言魔法堂重新認(rèn)識(shí)和中提到在沒(méi)有兄弟盒子時(shí)，的左右邊框會(huì)與所屬的的左右相接觸。對(duì)于的元素若不存在的為的父，其為。正常情況若子尺寸尺寸，則子溢出溢出后的顯示效果由屬性值決定。異常情況下當(dāng)時(shí)，若子的尺寸大于的尺寸而城撐大。 前言 ?《CSS魔法堂：重新認(rèn)識(shí)Box Model、IFC、BFC和Collapsing margins》中提到在沒(méi)有floated兄弟盒子時(shí)，line box的左右邊...
閱讀 1855·2021-11-22 15:25
閱讀 3938·2021-11-17 09:33
閱讀 2518·2021-10-12 10:12
閱讀 1809·2021-10-09 09:44
閱讀 3239·2021-10-08 10:04
閱讀 1320·2021-09-29 09:35
閱讀 1956·2019-08-30 12:57
閱讀 1309·2019-08-29 16:22
