認識html文件流

寫html，css的同學應該需要清楚什麼是文件流。文件流：將窗體自上而下分成一行一行,

並在每行中按從左至右的挨次排放元素,即為文件流。

每個非浮動塊級元素都獨有一行, 浮動元素則按規則浮在行的一端. 若當時行容不下, 則另起新行再浮動。內聯元素也不會獨有一行. 一切元素(包括塊級,內聯和列表元素)均可生成子行, 用於擺放子元素。有三種狀況將使得元素離開文件流而存在,分別是浮動、絕對定位、固定定位.

然則在ie中浮動元素也存在於文件流中。

浮動元素不佔任何正常文件流空間，而浮動元素的定位照樣基於正常的文件流，然後從文件流中抽出並盡能夠遠的挪動至左側或許右側。當乙個元素脫離正常文件流後，依然在文件流中的其他元素將忽略該元素並填補其原先的空間。

基於文件流，理解以下的定位形式:

相對定位：元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。

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

固定定位：即完全離開文件流，相關於視區進行偏移。

文件流是文件中可顯示物件在排列時所占用的位置。比如網頁的div標籤它預設占用的寬度位置是一整行，p標籤預設占用寬度也是一整行，因為div標籤和p標籤是塊狀物件。

網頁中大部分物件預設是占用文件流，也有一些物件是不佔文件流的，比如表單中隱藏域。當然我們也可以讓占用文件流的元素轉換成不佔文件流，這就要用到css中屬性position來控制。

看看css 2.0對position的定義：檢索物件的定位方式。共有4種取值。

absolute：絕對定位。將物件從文件流中拖出，使用left，right，top，bottom等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在這樣的父物件，則依據body物件。而其層疊通過z-index屬性定義

。當物件定位在瀏覽器視窗以外，瀏覽器因此顯示滾動條。

fixed：固定定位。物件定位遵從絕對(absolute)方式。但是要遵守一些規範。當物件定位在瀏覽器視窗以外，瀏覽器不會因此顯示滾動條，而當滾動條滾動時，物件始終固定在原來位置。

relative：相對定位。物件不可層疊，但將依據left，right，top，bottom等屬性在正常文件流中偏移位置。當物件定位在瀏覽器視窗以外，瀏覽器因此顯示滾動條。

static：元素框正常生成。塊級元素生成乙個矩形框，作為文件流的一部分，行內元素則會建立乙個或多個行框，置於其父元素中。

inherit：繼承值，物件將繼承其父物件相應的值。