1.固定布局（最基本的布局）
我是固定布局1
我是固定布局2
流式布局也叫百分比布局。
把元素的寬,高,margin,padding不再用固定數值,改用百分比,
這樣元素的高,
margin,padding
會根據頁面的尺寸隨時
調整，已達到適應當前頁面的目的.
* 百分比是基於元素父級的大小計算得來的；
* 元素的水平或者豎直間距都是相對於父級的寬度計算的.(margin&padding)
* 邊框不能用百分比設定
我是流式布局1
我是流式布局1
3.彈性布局（伸縮布局）
flexbox布局常用於設計比較複雜的頁面，可以輕鬆的實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變，同時減少了依賴於浮動布局實現元素位置的定義以及重置元素的大小。
flexbox布局在定義伸縮專案大小時伸縮容器會預留一些可用空間，讓你可以調節伸縮專案的相對大小和位置。例如，你可以確保伸縮容器中的多餘空間平均分配多個伸縮專案，當然，如果你的伸縮容器沒有足夠大的空間放置伸縮專案時，瀏覽器會根據一定的比例減少伸縮專案的大小，使其不溢位伸縮容器。綜合而言，flexbox布局功能主要具有以下幾點：
第一，螢幕和瀏覽器視窗大小發生改變也可以靈活調整布局；
第二，可以指定伸縮專案沿著主軸或側軸按比例分配額外空間（伸縮容器額外空間），從而調整伸縮專案的大小；
第三，可以指定伸縮專案沿著主軸或側軸將伸縮容器額外空間，分配到伸縮專案之前、之後或之間；
第四，可以指定如何將垂直於元素布局軸的額外空間分布到該元素的周圍；
第五，可以控制元素在頁面上的布局方向；
第六，可以按照不同於文件物件模型（dom）所指定排序方式對螢幕上的元素重新排序。也就是說可以在瀏覽器渲染中不按照文件流先後順序重排伸縮專案順序。
flexbox規範版本眾多，瀏覽器對此語法支援度也各有不同，接下來的內容以最新語法版本為例向大家展示：
1.建立乙個flex容器
任何乙個flexbox布局的第一步是需要建立乙個flex容器。為此給元素設定display屬性的值為flex。在safari瀏覽器中，你依然需要新增字首-webkit，
.flexcontainer
2.flex專案顯示
flex專案是flex容器的子元素。他們沿著主要軸和橫軸定位。預設的是沿著水平軸排列一行。你可以通過flex-direction來改變主軸方向修改為column，其預設值是row。
3.flex專案列顯示
4.flex專案移動到頂部
如何將flex專案移動到頂部，取決於主軸的方向。如果它是垂直的方向通過align-items設定；如果它是水平的方向通過justify-content設定。
flexbox規範版本眾多，瀏覽器對此語法支援度也各有不同，接下來的內容以最新語法版本為例向大家展示：（接上一節）
5.flex專案移到左邊
flex專案稱動到左邊或右邊也取決於主軸的方向。如果flex-direction設定為row，設定justify-content控制方向；如果設定為column，設定align-items控制方向。
6.flex專案移動右邊
7.水平垂直居中
在flexbox容器中製作水平垂直居中是微不足道的。設定justify-content或者align-items為center。另外根據主軸的方向設定flex-direction為row或column。
8.flex專案實現自動伸縮
您可以定義乙個flex專案，如何相對於flex容器實現自動的伸縮。需要給每個flex專案設定flex屬性設定需要伸縮的值。
.bigitem .smallitem
4.浮動布局
5.定位布局
我是固定定位
我是絕對定位1
我是絕對定位2
web網頁 頁面布局的幾種方式
網頁基本布局方式 1 流式布局 fluid 流布局與固定寬度布局基本不同點 就在於對 尺寸的側量單位不同。固定寬度布局使用的是畫素，但是流布局使用的是百分比，這位網頁提供了很強的可塑性和流動性。換句話說，通過設定百分比，我們不需要考慮裝置尺寸或者螢幕寬度大小了，可以為每種情形找到一種可行的方案，應為...
web網頁 頁面布局的幾種方式
流布局使用的是百分比，這位網頁提供了很強的可塑性和流動性。通過設定百分比，我們不需要考慮裝置尺寸或者螢幕寬度大小了，可以為每種情形找到一種可行的方案，應為你的設計尺寸將適應所有的裝置尺寸。流布局與 查詢和優化樣式技術密切相關。在固定布局中，網頁的寬度是必須指定為乙個畫素值，一般為960px。因為96...
web網頁 頁面布局的幾種方式
網頁基本布局方式 1 流式布局 fluid 流布局與固定寬度布局基本不同點 就在於對 尺寸的側量單位不同。固定寬度布局使用的是畫素，但是流布局使用的是百分比，這位網頁提供了很強的可塑性和流動性。換句話說，通過設定百分比，我們不需要考慮裝置尺寸或者螢幕寬度大小了，可以為每種情形找到一種可行的方案，應為...