Style 样式

样式用于设置HTML块的外观特征。每个HTML块均带有一个右侧样式槽，用于连接样式块。样式块支持串联结构，串联的样式块将共同作用于所连接的HTML块。

例如文本段串接了3个样式：背景色、边框，和内边距。

3个样式将共同作用于文本段：

Paragraph

内联元素与块级元素对样式有不同的限制，参考HTML章节的说明。

样式块使用统一的尺寸序号0~5来表示间距。该序号基于页面根元素字体（rem）定义，默认根元素字体为16px（像素），序号与像素值关系如下：

序号	比例	像素
0	0	0
1	rem x 0.25	4px
2	rem x 0.5	8px
3	rem x 1	16px
4	rem x 1.5	24px
5	rem x 3	48px

gutters 行内间距

行内间距是行内各列之间的间隙，其通过在列块上添加内边距实现。gutters 样式只能应用于HTML row 块。

属性

direction - 间距方向：
- all - 水平和垂直方向。
- x - 水平方向。
- y - 垂直方向。
size - 尺寸序号0~5。

样例

样例 row 块包含4个 column 块，列宽均设为行宽的1/2，因此，4个列元素将在行内分成两排。列内容为一个文本段，设置为边距为0并添加边框，以便观察效果。需要关注的是连接到 row 样式槽的 gutters 样式，其所有方向的间隙设置为尺寸序号3（16px）。因此，4个文本段之间将有16px间隙。

column width 列宽

列宽样式基于网格系统（grid system）实现，支持响应式布局。网格将行的宽度等分为12份，通过设置列宽占用的比例，分配各列的相对宽度。当各列的比例相加超出1时，将在行内自动折行。

列宽样式支持响应式布局。可以根据不同视口（viewport）宽度，设置不同的列宽比例，并串联使用，实现列宽的动态调整。

列宽样式只能应用于HTML column 块。

属性

width - 列宽比例1/12~1。
breakpoint - 响应断点：
- default - 设的列宽比例为默认比例，适用于所有视口（viewport）宽度。
- when vw ≥ - 设的列宽比例应用于视口大于等于指定宽度时。此时，样式块将显示扩展属性，用于指定视口宽度，包括以下预定义宽度值：
  - 576px
  - 768px
  - 992px
  - 1200px
  - 1400px

样例

1/6

1/3

1/2

size 尺寸

尺寸样式用于设置界面元素的宽度或高度。

属性

option - 宽/高选项：
- width - 宽度。
- min-width - 最小宽度。
- max-width - 最大宽度。
- height - 高度。
- min-height - 最小高度。
- max-height - 最大高度。
value - 尺寸值。根据单位设置对应值。
unit - 尺寸单位：
- px - 像素。尺寸取整数值。
- rem - 相对根元素字体的比例。尺寸值为rem的倍数（允许小数），默认根元素字体尺寸为16px。
- % - 相对父元素尺寸的百分比。例如尺寸值50表示父元素尺寸的一半。
- vw - 相对视口（viewport）宽度的百分比。
- vh - 相对视口（viewport）高度的百分比。

样例

spacing 间距

间距样式用于设置元素的内边距或外边距。内边距为边框（边界）以内的间距，属于元素尺寸的一部分；外边距为边框以外的间距，不计算在元素尺寸内。

属性

type - 间距类型：
- margin - 外边距。
- padding - 内边距。
side - 间距侧：
- all - 所有侧。
- top - 顶部。
- bottom - 底部。
- start - 起始侧（左侧）。
- end - 终止侧（右侧）。
- x - 水平（左右）侧。
- y - 垂直（上下）侧。
size - 尺寸序号：0~5，auto。

样例

在最内层 group 应用外边距（黄）和内边距（绿）。

flex 弹性盒

弹性盒样式将HTML容器块（row、column、group）设置为弹性盒容器，并指定内部元素的排列方向和间隙。

属性

direction - 内部元素排列方向：
- horizontal - 水平排列。
- vertical - 垂直排列。
gap - 内部元素间隙。取值尺寸序号：0~5。

样例

Text 1Text 2Text 3

flex align 弹性盒对齐

弹性盒对齐样式只能应用于弹性盒容器。弹性盒内部元素有两个对齐方向：

主轴方向 - 即弹性盒内部元素的排列方向（轴向）。
交叉轴方向 - 与主轴垂直的方向（径向）。

属性

axis - 选择对齐的轴：
- main - 主轴。
- cross - 交叉轴。
align - 对齐选项。根据所选的对齐轴有不同对齐选项：
- main - 主轴选项：
  - start - 靠向容器的起始侧。
  - end - 靠向容器的终止侧。
  - center - 靠向容器的中心。
  - between - 两侧均分，相邻元素的间距相同。第一个元素与起始侧对齐，最后一个元素与终止侧对齐。
  - around - 环绕均分，相邻元素的间距相同。第一个元素之前和最后一个元素之后的空间等于相邻元素间距的一半。
  - evenly - 沿主轴均匀分布，相邻元素之间，以及第一个元素之前和最后一个元素之后的空间，都完全相同。
- cross - 交叉轴选项：
  - start - 靠向交叉轴的起始侧。
  - end - 靠向交叉轴的终止侧。
  - center - 在交叉轴上居中对齐。
  - baseline - 所有元素的基线对齐。
  - stretch - 拉伸元素以填满容器的交叉轴空间。

样例

水平排列，主轴居中。
Text 1Text 2
Text 2Text 3
Text 3
Text 3
水平排列，交叉轴居中。
Text 1Text 2
Text 2Text 3
Text 3
Text 3

text align 文本对齐

文本对齐样式用于设置内联元素在容器中的对齐，或块级元素自身的文本对齐。

属性

align - 对齐选项：
- start - 靠起始侧。
- center - 居中对齐。
- end - 靠终止侧。

样例

内联元素在容器上应用样式。
Inline Text
块级元素直接应用样式。
Paragraph

position 定位

定位样式用于指定元素在文档中的定位方式, 配合定位参数（position inset）确定定位元素的最终位置。

属性

position - 定位方式：
- static - 常规定位（系统默认）。元素按照正常文档流定位，即元素在文档流中的当前位置。定位参数无效。
- relative - 相对定位。元素按照正常文档流定位，然后根据定位参数的值相对自身进行偏移。偏移不影响任何其他元素的位置，在页面布局中为该元素预留的空间与常规定位相同。
- absolute - 绝对定位。元素会被移出正常文档流，并不为元素预留空间。定位参数指定该元素相对于最近的非常规定位祖先元素的偏移，以此确定元素位置。
- fixed - 固定。元素会被移出正常文档流，并不为元素预留空间。定位参数指定元素相对于视口（viewport）的偏移来确定元素位置。元素的位置在屏幕滚动时不会改变。
- sticky - 粘附。元素按照文档正常流定位，然后相对于最近滚动祖先和最近块级祖先，基于定位参数的值进行偏移。偏移不影响任何其他元素的位置。sticky元素会固定在离它最近的一个拥有滚动机制的祖先上。

样例

group 的相对定位（relative）不改变自身的布局行为，而使其成为子元素的定位基准（非常规定位祖先元素）。
Button A使用绝对定位（absolute），定位参数right:0表示按钮的右外边距边界相对基准元素（group）的右边界偏移0。因此，Button A靠向 group 元素的右边界定位。
Button B保持正常布局行为，在 group 内靠左顺序布局。

position inset 定位参数

定位参数用于指定元素的定位偏移量，包括四个CSS inset属性：top、left、bottom、right。inset属性只在非常规定位方式下有效，其解释取决于定位方式（position）的取值：

relative - 相对定位时，inset表示相对于元素默认外边界的偏移量。
absolute - 绝对定位时，inset表示相对于包含块（非常规定位祖先元素）的偏移量。
fixed - 固定定位时，inset表示相对于视口的偏移量。
sticky - 粘附定位时，inset表示相对于滚动容器边界的偏移量。

属性

inset - 偏移属性：
- top - 定位元素的上外边距边界相对基准元素上边界的偏移。
- left - 定位元素的左外边距边界相对基准元素左边界的偏移。
- bottom - 定位元素的下外边距边界相对基准元素下边界的偏移。
- right - 定位元素的右外边距边界相对基准元素右边界的偏移。
value - 百分比偏移量。相对基准元素高度（top/bottom）或宽度（left/right）的百分比：
- 0 - 无偏移。
- 50 - 偏移量为基准元素尺寸的一半（50%）。
- 100 - 偏移量为基准元素尺寸的100%。

利用 styles 内联样式 可以设置偏移量为像素或字体尺寸单位。例如top:10px; left:1rem;。

color 颜色

颜色样式设置元素的前景色或背景色。

属性

option - 选择前景色或背景色：
- color - 前景色。
- bgcolor - 背景色。
color - 指定颜色。

样例

Paragraph

border 边框

边框样式用于给元素添加边框。可以指定需要的边、线宽和颜色。

属性

side - 选择边：
- all - 所有边。
- top - 顶边。
- bottom - 底边。
- left - 左边。
- right - 右边。
- x - 水平（左右）边。
- y - 垂直（上下）边。
px - 边框的像素线宽。
color - 边框的颜色。