1.靜態(tài)布局：
傳統(tǒng)布局，屏幕寬高變化時饿悬，盒子使用橫向或者豎向的滾動條來查看被遮擋部分，也就是不管瀏覽器窗口的大小怎么變化就按html語義標簽排列的布局來布置聚霜。
2.彈性布局：
css3引入的狡恬，flex布局；優(yōu)點在于其容易上手蝎宇，根據flex規(guī)則很容易達到某個布局效果弟劲，然而缺點是：瀏覽器兼容性比較差，只能兼容到ie9及以上姥芥；
3.自適應布局：
分別為不同的屏幕分辨率定義布局兔乞，在每個布局中，頁面元素不隨窗口大小的調整而發(fā)生變化凉唐，當窗口大小到達一定分辨率時變化一次庸追。
4.流式布局：
頁面元素的寬度按照屏幕進行適配調整，元素的位置不變台囱，大小變化淡溯，屏幕太大或者太小導致元素不能正常顯示。
5.響應式布局：
<meta name="viewport" content="divice-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
使用meta標簽設置簿训，頁面元素寬度隨窗口調整自動適配咱娶。主要屬性及其含義如下：name="viewport"：? ?名稱=視圖；width=device-width 頁面寬度=設備寬度(可以理解為獲取你手機的屏幕寬度)强品；initial-scale?-?初始的縮放比例? 膘侮；minimum-scale?-?允許用戶縮放到的最小比例? ?；maximum-scale?-?允許用戶縮放到的最大比例? 的榛；user-scalable?-?用戶是否可以手動縮放? 琼了。
6.網格布局：grid
二維布局系統(tǒng)，隨意的定義每行每列的數目和大小困曙。也非常簡單方便表伦，兼容性較差。
