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