注意：無論是什么布局，最外面都需要加個版心，這樣不會導致整個布局超過可視區域，形成橫向滾動條。
1.流式布局 (百分比布局)
寬度使用百分比，高度使用px
2.伸縮布局 (彈性布局) flex
2.1 作用：使得我們對塊級元素的布局排列變得十分靈活，適應性非常強，其強大的伸縮性，在響應式開中可以發揮極大的作用。
2.2 應用場景：浮動 + 百分比搞不定的時候
2.3 語法：
3.rem布局 (基本用於手機端)
3.1 作用：同時適配寬高與高度
rem：是一個相對HTML字體大小的單位
3.2 使用流程：
a 導入rem.js 讓 1rem = 當前屏幕 1/10
b 根據UI設計稿來將px 轉成rem
b.1 自己手動算
b.2 cssrem插件 根據設計稿設計rem計算值 按照設計搞寫px 會有自動提示轉rem
rem.js適配文件
cssrem插件適用教程：https://www.jianshu.com/p/bb48fbdacb26
4.響應式布局
適用於頁面比較簡單的網頁，不適合頁面復雜，比如電商類
一般用bootstrap框架來完成，這里列出來boostrap主要核心功能
1.響應式布局介紹 : 一個HTML頁面適配多個不同的設備（手機，PC）
優點 ： 全適配 （一個HTML頁面可以適配所有的設備屏幕，手機，平板，PC）
缺點 : 不便於維護。 （一個HTML頁面中，要寫兩套css，pc端css和移動端cc，造成css代碼冗余）
2.響應式布局原理 : 媒體查詢 （根據不同的設備加載不同的css）
3.媒體查詢語法 :
a. 基本語法 : @media screen and (設備尺寸){ css樣式 }
* 例如： @media screen and (width:1200px){ }
簡潔語法： @media(設備尺寸){ css樣式 }
b. 區間查詢
c. 常用的四種設備尺寸
bootstrap官網：https://www.bootcss.com/