ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
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> ~~~ ![](https://box.kancloud.cn/68a6af276e9d0f11e7f5ad4c222956dd_660x390.jpg) 一般的网格系统还支持偏移,响应式调整等等特性,但是在实际的开发当中其实并不实用,或者说用到的很少,所以我们将这一部分删除了,其实我们觉得整个网格系统都不太适用于常规的开发,之所以保留是因为我们在后面会有其他的用途。 ## 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> ~~~ ![](https://box.kancloud.cn/63877db673b99754a37bc6d310995c47_630x383.jpg) ## img-container(图片容器) ### 支持的属性: 你可以为img-container容器添加以下class来进行细致的调整 * full:拉伸图片,让图片铺满整个容器 * border:为容器添加边框 * radius:为容器添加圆角 * round:将容器设置为圆形 * 位置:设置图片摆放的位置,可选项:top left bottom right ### 默认排版 在开发时候我们经常碰到这种情况,需要在容器中放置一张图片,但是图片的尺寸未知,通常情况下,产品会要求图片居中显示。这种情况下直接使用图片容器即可。如下图 ![](https://box.kancloud.cn/ea6d4172ab6b19faf99d2753ef608555_660x427.jpg) ### 位置调整 如果产品经理提出了比较特(变)殊(态)的需求,比如设置图片的位置,那么只需要增加一个表示位置的class即可。 ![](https://box.kancloud.cn/190e995db28dd9756d7cac339b4c5cf1_660x403.jpg) ![](https://box.kancloud.cn/368ef3e87f4622fb3ae59ae7c7a5b22a_660x411.jpg) ![](https://box.kancloud.cn/7c07cd63e7f9f249badb4ca1b96caab2_660x412.jpg) ### 其他调整 现在对于图片的位置控制你已经完全掌握了,接下来看一下其他的class的用途 ![](https://box.kancloud.cn/950501bf8ddd004f006906c593e33dbe_660x324.jpg) 上面的这种结构在展示用户头像的时候非常好用 除了以上介绍的各种class之外,如果你要为容器添加圆角,只需要添加radius就可以了,所有的class都可以相互组合。 ## ratio-container(比例容器) 考虑一下下面两张设计稿在不借助JS的情况下如何实现:页面分成两栏或三栏,中间有一定的间距,里面的图片是正方形的。 ![](https://box.kancloud.cn/90f1bdb8bf09b0ed07913b1cbc2f8e55_720x456.jpg) ![](https://box.kancloud.cn/4498e4163f2ff37f0ea486ca75cc30a8_377x335.jpg) 这里存在的问题是在手机端无法确定屏幕的宽度,我们使用网格系统可以轻松布局出两栏或三栏,但是如何设置图片的高度呢?常规的做法是使用REM作为距离单位,但是这样存在两个问题,①你需要根据根节点的font-size以及栏之间的间距换算出宽度,然后将宽度和高度设置为相同的尺寸,比较麻烦②如果栏之间的宽度发生变化你需要重新计算并设置。 如果能直接建立一个正方形的容器就好了,这时你就需要用到比例容器了。直接上干货。 ![](https://box.kancloud.cn/e0c75b551fc53482e05b609ecc08bc51_615x512.jpg) 比例容器的原理是对节点添加一个百分比的padding-top,默认是百分之百,并且将子节点设置为上下左右都为0的绝对定位,所以比例容器默认会将它的子节点设置为1:1的尺寸,使用时尽量只在比例容器中使用一个子节点。 如果你想创建其他的比例可以使用“ratio-container-axb”,结构的class,a和b表示1~5的数字,你可以根据你的需要创建不同的比例如“ratio-container-2x3”创建一个2:3的容器。 如果是为了实现案例中的效果,建议将图片容器作为比例容器的子节点,这样可以更加方便的帮助你控制图片。 如果是案例一的样式,你只需要在HTML中添加一个Style即可 ![](https://box.kancloud.cn/927bbcad0073a4ed82a1def892237e49_609x418.jpg)