HTML網頁版面方式有哪些

HTML三種佈局方式總結

#1 普通流

又稱為常規流，瀏覽器預設的排版方式。普通流是元素在多數情況下呈現在WEB頁面上的方式。所有HTML都在區塊框(block boxes，區塊級元素)或行內框(inline boxes，行內元素)。當瀏覽器開始渲染HTML文檔，它從視窗的頂端開始，經過整個文檔內容的過程中，分配元素所需的空間。除非文件的尺寸被 CSS 特別的限定，否則瀏覽器垂直擴展文件來容納全部的內容。 每個新的區塊級元素渲染為新行。行內元素（行內元素/行內塊級）則按照順序被水平渲染直到當前行遇到了邊界，然後換到下一行垂直渲染。

2 定位流

#1> absolute，絕對定位：絕對定位的元素位置是相對於距離它最近的那個已定位（定位流）的祖先(相對/絕對/固定)元素決定的。 如果元素沒有已定位的祖先元素，則它的位置相對於初始包含區塊（body）進行定位。

元素的位置透過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

絕對定位的元素是脫離標準流的。不會佔用標準流中的空間。

絕對定位的元素不區分區塊級元素/行內元素/行內區塊級元素。

如果一個絕對定位的元素是以body作為參考點, 那麼其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點。定位的元素會隨著頁面捲動而捲動。

當一個盒子絕對定位之後不能使用margin: 0 auto;讓盒子本身居中，可以使用left: 50%; margin-left:-元素寬度一半px設定居中;

#2> fixed，固定定位：固定定位可以理解為是絕對定位的一種。固定定位的元素位置是相對於瀏覽器視窗決定的。這使得能夠創建總是出現在視窗固定位置的元素。

元素的位置透過 “left”, “top”, “right” 以及 “bottom” 屬性進行規定。

固定定位的元素是脫離標準流的, 不會佔用標準流中的空間。即可以理解為從標準流中刪除。

固定定位的元素是不區分區塊級元素/行內元素/行內區塊級元素。

E6和更低版本不支援固定定位，可以使用javascript解決。

3> inherit，繼承：繼承父元素position屬性的值。

4> relative，相對定位：相對定位就是相對於自己以前在普通流中的位置來移動。即相對於其正常位置進行定位。

使用相對定位時，無論元素是否移動，元素仍然佔據原先的空間，因此移動元素會導致它覆蓋其他框。

在相對定位中同一個方向上的定位屬性只能使用一個。

相對定位是不脫離標準流的, 所以在相對定位中區分區塊級元素/行內元素/行內區塊級元素。並且因為相對定位的元素會佔用標準流中的位置, 所以當給相對定位的元素設置margin/padding等屬性的時會影響到標準流的佈局。

5> static，靜態定位：預設值，沒有定位，元素出現在正常的流中，即上面的普通流，忽略top, bottom, left, right或z-index 聲明。

3 浮動流

浮動流只有一種排版方式, 就是水平排版. 它只能設定某個元素左對齊或右對齊。先浮動的元素會顯示在前面, 後浮動的元素會顯示在後面。

浮動流中沒有居中對齊, 沒有center這個取值。在浮動流中是不可以使用margin: 0 auto。

在浮動流中是不區分區塊級元素/行內元素/行內區塊級元素的。無論是區塊級元素/行內元素/行內區塊級元素都可以水平排版。都可以設定寬高。

當元素被設定為浮動後，那麼他會脫離標準流（脫標），不會佔用標準流中的空間。如果此時後面的元素沒有浮動，那麼此時這個元素會蓋住後面的元素。

1> inherit，繼承：繼承父元素float屬性的值。

2> left，左浮動：元素向左浮動。先浮動的在左邊，後浮的在右邊。

3> none，不浮動：預設值。

4> right，右浮動：元素向右浮動。先浮動的在右邊，後浮動的在左邊。

以上是HTML網頁版面方式有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！