css-doodle入门（二）
本帖最后由 马黑黑 于 2023-4-11 12:07 编辑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 的平方。当然，单元格越多，消耗的资源越大、运行速度越慢，在实际应用中应权衡利弊，恰当设置行列总数。
讲义中的完整例子，可以在下面的链接运行：
pencil code (freeee.ml)
@grid 属性优先级别更高。嗯嗯，记下了。{:4_204:} 前面跑到那个网站里看了半天了，回过来发现黑黑有详细讲解，太好了{:4_199:} 红影 发表于 2023-4-11 11:47
前面跑到那个网站里看了半天了，回过来发现黑黑有详细讲解，太好了
官网没要推出较为详尽的文档，需要css-doodle使用者自己理解。 马黑黑 发表于 2023-4-11 12:02
官网没要推出较为详尽的文档，需要css-doodle使用者自己理解。
黑黑把详尽的理解都搬来了，真好{:4_187:} 红影 发表于 2023-4-11 19:25
黑黑把详尽的理解都搬来了，真好
这个还真需要做一些深度性质的理解 马黑黑 发表于 2023-4-11 19:26
这个还真需要做一些深度性质的理解
慢慢的跟它熟悉了就好办了，先混个脸熟{:4_173:} 红影 发表于 2023-4-11 21:55
慢慢的跟它熟悉了就好办了，先混个脸熟
也对，一回生二回熟 马黑黑 发表于 2023-4-11 22:00
也对，一回生二回熟
最后成朋友{:4_173:} 红影 发表于 2023-4-11 22:46
最后成朋友
希望如此 二列一行可以用到自定义里对不{:4_173:}一边图片一边文字。 马黑黑 发表于 2023-4-11 22:58
希望如此
我会努力靠近它的，就不知道它是不是鸟我{:4_173:} 红影 发表于 2023-4-12 11:07
我会努力靠近它的，就不知道它是不是鸟我
谁鸟谁，谁就鸟谁 雨中悄然 发表于 2023-4-12 08:28
二列一行可以用到自定义里对不一边图片一边文字。
可以的 雨中悄然 发表于 2023-4-12 08:28
二列一行可以用到自定义里对不一边图片一边文字。
但 css-doodle 的文本，要用到伪元素 :after {} 或 ::after {} 或 :before {} 或 ::before {} 马黑黑 发表于 2023-4-12 13:01
可以的
瞧，之前被自定义难倒，就是没基础
{:4_170:} 马黑黑 发表于 2023-4-12 13:03
但 css-doodle 的文本，要用到伪元素 :after {} 或 ::after {} 或 :before {} 或 ::before {}
好的，后面会学到的吧。。{:4_173:}到时候自定义可以随意整它了 雨中悄然 发表于 2023-4-12 19:32
好的，后面会学到的吧。。到时候自定义可以随意整它了
已经学过了 雨中悄然 发表于 2023-4-12 19:32
瞧，之前被自定义难倒，就是没基础
没基础只能学学瞎子摸象
页:
[1]
2