Cyan提供了6種布局容器，分別是網格容器（兩種），流動布局容器，比例容器，圖片容器，滾動容器。六種容器可以相互組合和嵌套，通過合理的組合，可以在不使用任何CSS的情況下對絕大部分網頁進行布局。
[TOC]
## container（網格容器）
功能描述：創建一個左后各包含5像素內填充，并且自動清除浮動的容器
使用介紹：如果你使用過bootstrap框架，你一定對網格系統非常熟悉，我們只是把這套系統直接搬過來，方便你的過渡。
另外我們還做了一些補充，對網格系統進行了拓展，分為12列（用span+數字作為class）和15列（用col+數字作為class），方便你將一行平均分為12列或15列，相關代碼和最后的樣式如下
~~~
<div class="container">
<!--12列布局，數字相加得12即可鋪滿一行，網格間有5像素間距-->
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<!--15列布局，數字想打得15可鋪滿一樣，網格間有5像素間距-->
<div class="row">
<div class="col3"></div>
<div class="col3"></div>
<div class="col3"></div>
<div class="col3"></div>
<div class="col3"></div>
</div>
</div>
~~~
一般的網格系統還支持偏移，響應式調整等等特性，但是在實際的開發當中其實并不實用，或者說用到的很少，所以我們將這一部分刪除了，其實我們覺得整個網格系統都不太適用于常規的開發，之所以保留是因為我們在后面會有其他的用途。
## box-container（盒模型網格容器）
功能描述：創建自動清除浮動的容器，功能和普通的DIV沒有區別，只是進行了語義化的區分
使用介紹：于前面介紹的網格容器幾乎一致，區別是去掉了網格之間的間距。在編碼上的區別是在container,row,span,col這幾個class前面都加了box-前綴，具體代碼和展示如下
~~~
<div class="box-container">
<!--12列布局，數字相加得12即可鋪滿一行，網格間沒有間距-->
<div class="box-row">
<div class="box-span4"></div>
<div class="box-span4"></div>
<div class="box-span4"></div>
</div>
<!--15列布局，數字想打得15可鋪滿一樣，網格間沒有間距-->
<div class="box-row">
<div class="box-col3"></div>
<div class="box-col3"></div>
<div class="box-col3"></div>
<div class="box-col3"></div>
<div class="box-col3"></div>
</div>
</div>
~~~
## img-container（圖片容器）
### 支持的屬性：
你可以為img-container容器添加以下class來進行細致的調整
* full:拉伸圖片，讓圖片鋪滿整個容器
* border:為容器添加邊框
* radius:為容器添加圓角
* round:將容器設置為圓形
* 位置：設置圖片擺放的位置，可選項：top left bottom right
### 默認排版
在開發時候我們經常碰到這種情況，需要在容器中放置一張圖片，但是圖片的尺寸未知，通常情況下，產品會要求圖片居中顯示。這種情況下直接使用圖片容器即可。如下圖
### 位置調整
如果產品經理提出了比較特（變）殊（態）的需求，比如設置圖片的位置，那么只需要增加一個表示位置的class即可。
### 其他調整
現在對于圖片的位置控制你已經完全掌握了，接下來看一下其他的class的用途
上面的這種結構在展示用戶頭像的時候非常好用
除了以上介紹的各種class之外，如果你要為容器添加圓角，只需要添加radius就可以了，所有的class都可以相互組合。
## ratio-container（比例容器）
考慮一下下面兩張設計稿在不借助JS的情況下如何實現：頁面分成兩欄或三欄，中間有一定的間距，里面的圖片是正方形的。
這里存在的問題是在手機端無法確定屏幕的寬度，我們使用網格系統可以輕松布局出兩欄或三欄，但是如何設置圖片的高度呢？常規的做法是使用REM作為距離單位，但是這樣存在兩個問題，①你需要根據根節點的font-size以及欄之間的間距換算出寬度，然后將寬度和高度設置為相同的尺寸，比較麻煩②如果欄之間的寬度發生變化你需要重新計算并設置。
如果能直接建立一個正方形的容器就好了，這時你就需要用到比例容器了。直接上干貨。
比例容器的原理是對節點添加一個百分比的padding-top,默認是百分之百，并且將子節點設置為上下左右都為0的絕對定位，所以比例容器默認會將它的子節點設置為1:1的尺寸，使用時盡量只在比例容器中使用一個子節點。
如果你想創建其他的比例可以使用“ratio-container-axb”,結構的class，a和b表示1~5的數字，你可以根據你的需要創建不同的比例如“ratio-container-2x3”創建一個2:3的容器。
如果是為了實現案例中的效果，建議將圖片容器作為比例容器的子節點，這樣可以更加方便的幫助你控制圖片。
如果是案例一的樣式，你只需要在HTML中添加一個Style即可
