基於文檔流解讀html元素的(css)定位形式

文檔流: 將窗體自上而下分紅一行行, 並在每行中按從左至右的挨次排放元素,即爲文檔流。

　　每一個非浮動塊級元素都獨有一行, 浮動元素則按規則浮在行的一端. 若當時行容不下, 則另起新行再浮動。

　　內聯元素也不會獨有一行. 簡直一切元素(包括塊級,內聯和列表元素)都可生成子行, 用於擺放子元素。

　　有三種情況將使得元素離開文檔流而存在,分別是浮動、絕對定位、固定定位. 然則在IE中浮動元素也存在於文檔流中(還讓我感受如許很合理><)。

　　浮動元素不佔任何正常文檔流空間，而浮動元素的定位照樣基於正常的文檔流，而後從文檔流中抽出並儘可以遠的挪動至左側或許右側。文字內容會環繞在浮動元素四周。當一個元素從正常文檔流中抽出後，依然在文檔流中的其餘元素將疏忽該元素並填補他原先的空間。 

　　浮動概念讓人疑惑本源在於閱讀器對理論的解讀造成的。只能說良多人以IE作規範，其實它不是。

　　基於文檔流，咱們能夠很輕易瞭解如下的定位形式:

　　相對定位： 即相關於元素在文檔流中地位進行偏移，但保存原佔位。

　　絕對定位： 即徹底離開文檔流, 相關於position屬性非static值的比來父級元素進行偏移。

       固定定位，即徹底離開文檔流，相關於視區進行偏移。

 

文檔流是文檔中可顯示對象在排列時所佔用的位置。好比網頁的div標籤它默認佔用的寬度位置是一整行，p標籤默認佔用寬度也是一整行，由於div標籤和p標籤是塊狀對象。 網頁中大部分對象默認是佔用文檔流，也有一些對象是不佔文檔流的，好比表單中隱藏域。固然咱們也可讓佔用文檔流的元素轉換成不佔文檔流，這就要用到CSS中屬性position來控制。 看看CSS 2.0對position的定義：檢索對象的定位方式。共有4種取值。 static：默認值，無特殊（靜態）定位。對象遵循HTML定位規則 。 absolute：絕對定位。將對象從文檔流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。若是不存在這樣的父對象，則依據body對象。而其層疊經過z-index屬性定義 。當對象定位在瀏覽器窗口之外，瀏覽器所以顯示滾動條。 fixed：固定定位。對象定位聽從絕對(absolute)方式。可是要遵照一些規範。當對象定位在瀏覽器窗口之外，瀏覽器不會所以顯示滾動條，而當滾動條滾動時，對象始終固定在原來位置。 relative：相對定位。對象不可層疊，但將依據left，right，top，bottom等屬性在正常文檔流中偏移位置。當對象定位在瀏覽器窗口之外，瀏覽器所以顯示滾動條。 inherit：繼承值，對象將繼承其父對象相應的值。