css-doodle入门(二)
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 的平方。当然,单元格越多,消耗的资源越大、运行速度越慢,在实际应用中应权衡利弊,恰当设置行列总数。
网格 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条]