前端開發中布局形式

我們可以把網頁理解成是由乙個個盒子排列組合而成的，那麼盒子之間又是怎麼排列布局的呢？

網頁常見的布局方式大概有五種：普通文件流布局、浮動布局（float）、絕對布局（absolute）、彈性布局（flex）、網格布局（grid）。

普通文件流布局

預設的布局方式，由塊級元素（display: block）和行內元素（display: inline）等組成，元素之間按照從左到右，從上到下的順序排列。

浮動布局

相對於普通文件流布局，浮動布局會脫離普通文件流，分為左右浮動，具體來說就是float的值為left和right，一般會在普通文件流布局的上面進行介面的布局，如果想避免浮動布局遮蓋普通布局的情況，可以考慮使用清除浮動。

絕對布局

元素使用 position: absolute 屬性進行絕對布局，使用絕對布局的元素會脫離文件流，然後根據top,bottom,left,right等屬性值進行元素位置的改變，其定位是參考祖先元素中 position 為非 static 值的第乙個元素。

彈性布局

也稱 flex 布局，是乙個完整的模組，而不是乙個單一屬性，其中有的屬性是設定在父元素上，有些則是設定在子元素上。如果我們說傳統的布局是建立在塊級元素和行內元素的文字流上，那麼 flex 布局就是建立在 flex-flow 的軸方向上的，而這個軸可以根據開發者的需要進行自主設定。

彈性布局語法-阮

彈性布局例項-阮

網格布局

是用於制定行與列的二維 css 布局方法，可以將頁面分割成數個主要的區域，或者用來定義元件內部元素間的大小、位置和圖層之間的關係。

網格布局參考文件

以上是常用的五種網頁布局方法，在實際專案中，我們應該根據場景選擇適當的方法。