午后・时光

css-doodle入门(二)

位置: 首页 > 马黑教程[ 发布时间: 2023.4.16  作者: 马黑黑  阅读: 199 ]
css-doodle入门(二)


网格 grid


第一讲提到过 css-doodle 是基于 CSS 的 grid 布局开发的Web组件,网格 grid 因此在 css-doodle 里非常重要。css-doodle 标签实际上可以将 grid 直接定义在里面:


<css-doodle grid="5">
        :doodle {
                grid-gap: 1px;
                width: 260px;
                height: 260px;
        }
        background: tan;
</css-doodle>


<css-doodle grid="5"> 中,grid=5 表示网格是 5x5 共25个单元格。如果需要 4行5列 的网格结构,则有多种写法:


grid="4x5"
grid="4 x 5"
grid="4,5"
grid="4, 5"


其中的乘号是小写字母 x ,逗号是小角逗号。甚至,等号后面的值不需要引号也是可以的,但不建议,因为<css-doodle> 是一个第三方的 HTML 标签,其内若有等号,则等号后面的值都需要使用小角引号包裹起来,这是HTML的语法规范。另外需要注意的是,用两个数字表示行列时,第一个数值定义列即横向方向分为几等分,第二个数值定义行即纵向方向分成几等分。


css-doodle 还提供一个属性 @grid 来定义网格的行列数,写在 :doodle {} 代码块里:


<css-doodle grid="4,5">
        :doodle {
                @grid: 6,5;
                grid-gap: 1px;
                width: 260px;
                height: 260px;
        }
        background: tan;
</css-doodle>


这里,css-doodle 标签已经规定了 4x5 的网格列行结构,又在  :doodle {} 代码块里有 @grid: 6,5; 语句,情况会怎么样?@grid 属性优先级别更高,所以,得出的网格结构是5行6列。


@gird 属性是一个 css-doodle 中的自定义CSS属性而非HTML范畴,所以,@gird: 后面的值不能用引号。@grid: 的值的组成方式则与 grid= 的一样,例如 6x6 ,写成 @grid: 6; 或 @grid: 6x6; 等等。


需要留意的是,grid值当存在两个值时,列先行后, grid='4,5' 或 @grid: 4x5,都是表示4列5行。


css-doodle 的单元格总数有上限,官网称支持最多 1024 个单元格总数,亦即行列的乘积不要大于1024,但随着版本的更新,单元格总数的上限已经可以达到 64 的平方。当然,单元格越多,消耗的资源越大、运行速度越慢,在实际应用中应权衡利弊,恰当设置行列总数。

前一篇: css-doodle入门(三)
下一篇: css-doodle入门(一)

发表评论:

       

评论列表 [0条]

Copyright © 2014 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com