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即可
