HTML網頁布局方式有哪些

2020-03-24 19:16:50

字體：大中小

來源：轉載

供稿：網友

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 html' target='_blank'>static，靜態定位：默認值，沒有定位，元素出現在正常的流中，即上面的普通流，忽略 top, bottom, left, right 或者 z-index 聲明。3 浮動流浮動流只有一種排版方式, 就是水平排版. 它只能設置某個元素左對齊或者右對齊。先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面。

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

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

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

這里寫圖片描述