說道定位機制,你們是否是以爲只有float,absolute之類的才叫定位?
html
非也!dom
在CSS中,定位機制一共有四種:normal flow(普通流),float(浮動), absolute positioning(絕對定位)和flex box。而普通流的定位又分爲三種:block formatting(塊級格式化), inline formatting(行內格式化)及 relative positioning(相對定位)。flex
咱們先來了解一下「流」的概念。說道流,你是否是想到了它spa
其實咱們這個流和水流只是有必定的形似,都是一種流動。3d
一般,若是一個元素屬於浮動元素(float屬性值不爲none)或是進行了絕對定位(position屬性值爲absolute或fixed)或是root元素,咱們會稱這個元素out-of-flow,即脫離了流;相反,稱這個元素in-flow,即在流內。那麼,流具體指代什麼呢。CSS2.2 Specification給出的定義以下:調試
The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A
對此,我理解爲:一個流就是一些元素的集合。只有out-of-flow元素(暫且稱爲A)才擁有本身的流,A元素的流包括它本身以及任何知足必定條件的in-flow元素,該條件要求這個in-flow元素最近的out-of-flow祖先爲A。那麼A元素內那些out-of-flow的子元素怎麼辦呢?它們會有本身的流,且在定位時A的流會當它們不存在,也就是說,這些out-of-flow元素的流之間是互不干擾的。rest
在CSS中,display屬性、position屬性和float屬性決定了某dom元素可否生成一個box以及box的位置,而這些也就決定了dom元素的定位方式。orm
那麼這些屬性值是如何決定box的命運的呢,請看下方等級列表。數字越小,優先級越高。cdn
1. display:nonehtm
命運:dom元素不產生box, position 和 float 均無效,無生命,無定位
2. position: absolute / fixed
命運:dom元素產生box, float 的computed value爲none, display的computed value請參照下方表格,屬於絕對定位
3. float: right / left
命運: dom元素產生box, display的computed value請參照下方表格,屬於浮動
4. 元素爲 root 元素
命運:display的computed value請參照下方表格,屬於普通流中的block formatting
5. 其餘
命運:display的computed value即爲specified value,依據display的值屬於普通流中的block formatting 或 inline formatting
對照上面的等級列表,咱們來分析如下dom元素屬於哪一種定位方式
------------ 普通流的block formatting
------------ 絕對定位
------------ 絕對定位,containing block爲initial containing block(看第10條)
------------ 浮動
------------ 無生命,無定位
------------ 浮動,普通流的relative positioning
在具體調試CSS過程當中,你們能夠對照以上等級表來肯定某個dom元素的box的定位方式,我就再也不一一舉例了,由於————太多了。。。
好了,今天就是介紹了下定位方式的種類以及它們之間的優先級。若是你們想要知道某種定位的具體流程,那就點擊文章第三段中出現的連接進去看吧!週末愉快啦!