網頁的布局方式有哪些?
發布時間:2021-03-29來源:admin
1.普通布局<br />
每個新的塊級元素渲染為新行。行內元素(行內元素/行內塊級)則按照順序被水平渲染直到當前行遇到了邊界,然后換到下一行垂直渲染。<br />
2.定位布局<br />
絕對定位:(absolute),元素的位置通過左,上右,下屬性來進行定位。<br />
絕對定位的元素是脫離標準流的,不占據標準流中的空間。<br />
絕對定位不區分塊級元素,行內元素,行內塊元素。<br />
如果一個絕對定位的元素是以body作為參考點, 那么其實是以網頁首屏的寬度和高度作為參考點, 而不是以整個網頁的寬度和高度作為參考點。定位的元素會隨著頁面滾動而滾動。<br />
固定定位:(fixed),固定定位可以理解為是絕對定位的一種。<br />
固定定位的元素位置是相對于瀏覽器窗口決定的。<br />
這使得能夠創建總是出現在窗口固定位置的元素。<br />
es5,es6不支持固定定位,可以用javascript解決。<br />
相對定位:(relative)相對定位就是相對于自己以前再普通流中的位置來移動,就是相對于其正常位置進行定位。<br />
使用相對定位后,無論元素是否移動,元素都會占據原先的空間。<br />
在相對定位中同一個方向的定位屬性只能使用一個。<br />
3。浮動布局<br />
浮動布局只有一種排版方式,就是水平排版,他只能設置某個元素左對齊或者右對齊,先浮動的元素顯示再前面,后浮動的元素會顯示在后面。<br />
浮動中沒有居中對齊,沒右center這個取值。<br />
元素浮動后,會脫離文檔流,不會占據標準流的空間。<br />