Grid布局
先了解一下iview的24柵格布局
清理一下App.vue
然后從iview的color里面獲取推薦的背景色
我們先渲染柵格 24列，然后再講解他是一個什么東西：
柵格外面row包裹的，里面是一個Col組件
使用v-for循環24列，類一列里面用Card
Grid布局就是將整個頁面等寬度的划分為了24列，可以解決業務中大部分的布局問題。
只要col的span的值相加等於24就可以
我們寫一個兩列的布局，兩列分別值為12，加起來就是24
如果說內容大於了24怎么辦？
超出的部分自動換行了。
我們在列和列之間加空隙：
空隙為16寬度
Gutter的值建議是 16+8*n這樣排列：就是8的倍數
Gutter是16或者32是比較好的
里面做一個嵌套，grid布局是可以無限嵌套的
某一列隨着瀏覽器的滾動，能夠固定在某一個位置：
展示的效果。我們希望右側的部分隨着瀏覽器的滾動，能夠懸停
當前兩部分都是隨着滾動條 網上走的
現在我們就需要固定右邊的列，
可以單獨給右邊的card加css position：fixs
但是我們盡可能少使用css打到我們想要的效果。
我們把他嵌套在affix標簽內
頂部有個header的導航條。滾動的時候會吸在導航條的一個位置懸停
懸停會蓋住導航條
導航條的高度是50 所以這里設置offset-top我們設置為50就可以了
這樣就不會被蓋住了
布局小技巧
24列布局實現垂直居中的效果
在modal中有個垂直居中的效果
彈窗是上下高度和左右的寬度都是一樣的，並且隨着拖動瀏覽器 也是會根據瀏覽器的高度和寬度的變化 依然垂直居中。
縮小瀏覽器的效果。
我們要實現的效果就是 隨着改變瀏覽器的大小 頭像和對號都居中
Row布局的flex布局，並且規定了居中的方式 都是中間
全屏的情況下 頭像和對號已經和頂部有一定的距離了
改變瀏覽器的大小
技巧2
4+18=22后面空出來一列
現在要實現的效果是讓第一列和第二列都居中顯示。也就是最左邊再空出來一列來。
Offset屬性就是給這一列一個向右的一個位移！，位移的尺寸就是柵格的列數
技巧3
20分鍾開始
規定左邊18列 右邊4列
左邊18列應該是在左邊的。但是由於18列左邊是空的 所以把右邊的四列頂到了左邊。
當點擊左邊的填充內容的時候。18列有了內容顯示了出來。
假設填充內容是提供過ajax去填充的話，也是需要幾秒的時候閃動左邊的18列。那么我們怎么解決這個默認沒有內容 右邊擠到左邊了呢？
我們只需要在左邊的內容加一個空的div標簽就可以了。 當然也可以把這個空的div封裝成一個組件。
查看默認的頁面效果
這樣做的好處，不會影響里面正文的內容，加一個1像素的空的元素去占位的話，不會影響你大體的內容。雖然看起來不是很優雅，但是卻很簡單的解決了這個閃動的問題。比較推薦用這種方法。
使用iview的gird布局 實現響應式布局
響應式布局：一套代碼在不同的屏幕或者分辨率下、瀏覽器中預覽的時候呈現出來的了效果是不一樣的
重新初始化代碼一下：
縮放到很小的時候：
在col上使用我們響應式的屬性
左邊當小於768的時候 讓他占滿一整行
當小於768的時候 占滿一整行，當大於768的時候就是占6列
當小於768的時候占滿一整行，當大於768的時候只占18列
我們打開F12的控制台 托送窗體，會顯示寬度和高度
小於了768的情況：
當大於768的時候 還是各自 6:18的比例
當時寬屏的時候 左邊留一個像素 右邊留一個像素
當變為手機窄屏的時候
寬屏的時候 ，向右便宜一個列，6+16=22因為左右都便宜
小於768的時候 各自占滿為24
還有其他用的比較少的 也可以實現相應式布局的，他們在flex布局用的。視頻在這里就不多講了。
