基于html5+css3的網頁自適應布局設計

3.3 三列布局

也稱為雙飛翼布局，中間列自適應寬+左右列固定寬;中間列寬度自適應，放置主體內容，所以需要讓中間列在瀏覽器中優先渲染，因此，在中加入如下代碼：

（1）當子元素處于浮動狀態時，設置負margin>=子元素寬度時，子元素會疊蓋到兄弟元素之上;因此sidebox-left設置為margin-left：-100%，以讓其位置出現在main 元素的左邊，同理，sidebox-right設置為margin-right：-300px;以讓其位置出現在main元素的右邊;

（2）main元素添加padding-left和padding-right屬性后，根據盒子模型的計算公式，main元素的總寬度會超過100%，因此必須加上box-sizing：border-box;語句，使其變成框架盒子，以保證其總寬度為100%。

完成后，在瀏覽器中的效果如下圖所示：

4 彈性布局

針對越來越多用戶用移動端訪問網頁的情況，W3C提出了一種新的方案：彈性（flex）布局，可以簡便、完整、響應式地實現各種頁面布局，目前，它已得到大部分瀏覽器的支持，這意味著，現在就能很安全地使用這種方案，以適應不同分辨率用戶的需求。它用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為flex布局。

如果把ul的width改為100px，則顯示效果如圖3，每一個li項會自動縮小寬度以適應總寬度;如果把ul的width改為400px，則默認顯示效果如圖4;如果ul的width保持400px不變，修改justify-content：space-around，則自動把剩余空間平均分配給了每個項目，其顯示效果如圖5。

除以上屬性外，還可以利用flex-direction設置項目的不同排列方向，利用flex-wrap設置項目的換行方式等，因此，彈性（flex）布局可以靈活地應用于不同分辨率的不同元素布局中。需要注意，設為flex布局后，子元素的float、clear和vertical-align屬性都會失效。

5 結束語

DIV+CSS3布局模式中，除了上面述及的靜態布局和彈性布局，還有響應式（responsive）布局，其原理是通過CSS3中的Media Query（媒介查詢），采用柵格化方式，分別為不同的屏幕分辨率定義布局，適用于一個web設計兼容多個終端的環境。

三者相比之下，彈性（flex）布局能更好地操作和控制內部的子元素，不用關心容器盒子是否有足夠的空間;每個子元素可以自動分配到容器的寬高比例;當窗口或容器大小改變時，不用擔心子元素會破壞布局;無須修改結構就可以設置其排列方式為行或列，其靈活性更強。隨著html5+CSS3新標準的出現及普及，網頁自適應布局是目前前端設計技術的關鍵問題，開發人員必須要在充分掌握基礎技術的條件下，進行多編碼、多測試、多維護的工作，使開發出來的網頁性能、受用戶歡迎的程度達到最佳的狀態。

參考文獻：

[1] 陳承歡.html5+css3網頁設計與制作實用教程[M].北京：人民郵電出版社，2018.

[2] 周美玲，陳書理.CSS3和HTML5的優勢及其在網頁布局中的應用[J].開封大學學報，2017，31.

[3] 岳丹丹.網頁浮動布局方式和伸縮盒布局方式的比較研究[J].興義民族師范學院學報，2016.

[4] 江玉珍.基于終端自適應的網頁設計教學拓展[J].計算機時代，2018.

【通聯編輯：代影】