style

style是底层样式实现方案，包括两个部分的实现：

CSS

• reset：即样式重置，部分功能不需要在组件中手动调用和处理，对下面文档中提到的几个关键点知晓即可。
• flexbox + util：以局部样式声明为粒度的通用样式切片，注意，这里的粒度不是组件级别的。详见下面的文档。
• vars：变量，包括 className prefix 、colors、borderRadius、fontSize
• mixin：stylus的辅助样式函数

JS

• util.js：通过js操作样式的辅助函数

CSS Reset

border box：

• 默认所有元素的盒模型类型为**border-box**

list style：

• 列表元素ul和ol的样式默认为none值。

input, textarea

• 消除输入框和按钮的原生外观
• 去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)

and more...

更多的reset不再一一列举，详见原文件。

CSS Flexbox

salt-ui中，所有flexbox相关的class值，都以t-FB为前缀。

定义伸缩容器：

• t-FBH: 即flexbox horizontal，指定目标元素成为伸缩容器，且内部子元素水平排列。
• t-FBV: 即flexbox vertical，指定目标元素成为伸缩容器，且内部子元素垂直排列。

对齐子元素(包括伸缩元素)：

• t-FBAS: 即cross axis's align start，将子元素对齐到cross轴的起点上。
• t-FBAC: 即cross axis's align center，将子元素对齐到cross轴的中点上。
• t-FBAE: 即cross axis's align end，将子元素对齐到cross轴的终点上。
• t-FBJS: 即main axis's justify start，将子元素对齐到main轴的起点上。
• t-FBJC: 即main axis's justify center，将子元素对齐到main轴的中点上。
• t-FBJE: 即main axis's justify end，将子元素对齐到main轴的终点上。

子元素属性：

• t-FB1: 即 felx: 1; 子元素放大比例
• t-FB2: 即 felx: 2; 子元素放大比例
• t-FB3: 即 felx: 3; 子元素放大比例

CSS Utils

float(移动端不建议使用float)：

• t-CL / tClear: 即clear，清除浮动
• t-FL: 即float left
• t-FR: 即float right

radius：

• t-R{n}: 即border-radius，n的可选值为3 4 5 6
• t-RT{n}: 左上角和右上角为圆角，n的可选值同上
• t-RR{n}: 右上角和右下角为圆角，n的可选值同上
• t-RB{n}: 左下角和右下角为圆角，n的可选值同上
• t-RL{n}: 左上角和左下角为圆角，n的可选值同上

padding：

• t-P{n}: 即padding，n的可选值为0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30，即从0开始，到30为止的所有偶数。
• t-PT{n}: 即padding-top，n的可选值同上
• t-PR{n}: 即padding-right，n的可选值同上
• t-PB{n}: 即padding-bottom，n的可选值同上
• t-PL{n}: 即padding-left，n的可选值同上

margin：

• t-M{n}: 即margin，n的可选值为0 2 4 6 8 10 12 14 16 18 20 22 24 26 28 30，即从0开始，到30为止的所有偶数。
• t-MT{n}: 即margin-top，n的可选值同上
• t-MR{n}: 即margin-right，n的可选值同上
• t-MB{n}: 即margin-bottom，n的可选值同上
• t-ML{n}: 即margin-left，n的可选值同上

position:

• t-PR: 即position: relative
• t-PF: 即position: fixed
• t-PA: 即position: absolute

border:

• t-BT1: 即border-top: 1px solid $border，支持了hairline 的处理
• t-BB1: 即border-bottom: 1px solid $border，支持了hairline 的处理

visibility:

• t-DN / tHide: 即display: none
• t-DB: 即display: block
• t-DIB: 即display: inline-block
• t-BHide: 即-webkit-backface-visibility: hidden

ellipsis:

• t-omit: 强制在一行内显示文字，多余部分用...显示
• t-omit2: 强制在两行内显示文字，多余部分用...显示，通常需要和设置父容器高度一起使用。
• t-omit3: 强制在三行内显示文字，多余部分用...显示，通常需要和设置父容器高度一起使用。

line height:

规则：1 ≤ n ≤ 2之间的值表示字号的倍数，且小数点用_表示。

• t-LH{em}: 基于字号的行高，em的可选值为1、1_3、1_4、1_5、1_6、1_7、1_8、1_9、2。如：tLH1表示line-height: 1em，tLH1_3表示line-height: 1.3em。
• t-LH{px}: 基于px的行高，px的可选值为30、44，如：tLH30表示line-height: 30px。

width:

• t-W{px}: 基于px的宽度，px的可选值包括：0、16、32、64、128、30、44。如tW44表示width: 44px。

height:

• t-H{px}: 基于px的高度，px的可选值包括：0、16、32、64、128、30、44。如tH44表示height: 44px。

square:

宽度和高度相等的情况，最常用于icon大小的设置。

• t-WH{px}: px的可选值包括：0、16、32、64、128、30、44。如tWH44表示width: 44px; height: 44px。

font size:

• t-FS{px}: 即font-size，px的可选值包括0 12 14 16 18 20 22 24 26 28 30

font color:

• t-FC{x}: 即color: #xxx，x的可选值包括0、3、4、5、6、7、8、9、a、b、c、d、e、f。如：tFCa表示color: #aaa;。

font align:

• t-FAL: 即text-align: left
• t-FAC: 即text-align: center
• t-FAR: 即text-align: right

backgrond color:

• t-BC{x}: 即background-color: #xxx，x的可选值包括0、3、4、5、6、7、8、9、a、b、c、d、e、f。如tBC0表示background-color: #000。

opacity:

• t-OP{n}: 即opacity，设置透明度，n的可选值包括0、10、30、50、80、100。如tOP30表示opacity: 0.3。

3d speed up:

• t-3D: 即transform translateZ(0)，开启3D加速，谨慎使用。