依据 Emmet 的 css 规则 预设了部分常用样式，以便开发调试
yarn add css.preset
# 或
npm install css.preset
<div class="fz12 lh30 mt20 fwb">css.preset</div>命名规则 属性简称加上数值
| 属性 | 间隔 | 简称 | |
|---|---|---|---|
| margin | 5 | mar |
mar0 - mar50 |
| margin-top | 5 | mt |
mt0 - mt50 |
| margin-bottom | 5 | mb |
mb0 - mb50 |
| margin-left | 5 | ml |
ml0 - ml50 |
| margin-right | 5 | mr |
mr0 - mr50 |
| padding | 5 | pad |
pad0 - pad50 |
| padding-top | 5 | pt |
pt0 - pt50 |
| padding-right | 5 | pr |
pr0 - pr50 |
| padding-bottom | 5 | pb |
pb0 - pb50 |
| padding-left | 5 | pl |
pl0 - pl50 |
| line-height | 2 | lh |
lh0 - lh24 |
| font-size | 2 | fz |
fz0 - fz24 |
| font-weight | 100 | fw |
fw0 - fw1000 |
| padding-left | 5 | pl |
pl0 - pl50 |
| padding-left | 5 | pl |
pl0 - pl50 |
| 属性 | Rule | 类名 |
|---|---|---|
| width | 100% | wp100 |
| 50% | wp50 |
|
| 33.33% | wp33 |
|
| height | 100% | hp100 |
| position | static | pss |
| relative | psr |
|
| absolute | psa |
|
| fixed | psf |
|
| float | none | fln |
| left | fll / fl |
|
| right | flr / fr |
|
| clear | none | cln |
| left | cll |
|
| right | clr |
|
| both | clb |
|
| display | none | dn |
| block | db |
|
| inline-block | dib |
|
| inline | di |
|
| flex | df |
|
| inline-flex | dif |
|
| visibility | visible | vv |
| hidden | vh |
|
| overflow | hidden | ovh |
| auto | ova |
|
| scroll | ovs |
|
| visible | ovv |
|
| clip | auto | cpa |
| resize | none | rzn |
| vertical | rzv |
|
| horizontal | rzh |
|
| cursor | pointer | curp |
| auto | cura |
|
| move | curm |
|
| box-sizing | content-box | bxzcb |
| border-box | bxzbb |
|
| z-index | 0 | zi0 |
| -1 | zi-1 |
|
| text-decoration | underline | tdu |
| line-through | tdl |
|
| none | tdn |
|
| font-weight | normal | fwn |
| bold | fwb |
|
| bolder | fwbr |
|
| lighter | fwlr |
|
| font-style | normal | fsn |
| italic | fsi |
|
| font-variant | normal | fvn |
| small-caps | fvsc |
|
| vertical-align | super | vasp |
| sub | vasb |
|
| sub | vat |
|
| top | vasb |
|
| bottom | vab |
|
| middle | vam |
|
| text-top | vatt |
|
| text-bottom | vatb |
|
| baseline | vabl |
|
| text-align | left | tal |
| right | tar |
|
| center | tac |
|
| justify | taj |
|
| text-align-last | auto | tala |
| left | tall |
|
| right | talr |
|
| center | talc |
|
| text-decoration | none | tdn |
| underline | tdu |
|
| overline | tdo |
|
| line-through | tdl |
|
| text-indent | -9999px | ti- |
| text-justify | auto | tja |
| nter-word | tjiw |
|
| inter-ideograph | tjii |
|
| text-transform | none | ttn |
| capitalize | ttc |
|
| uppercase | ttu |
|
| lowercase | ttl |
|
| letter-spacing | 0 | lts |
| -4px | lts-4 |
|
| -6px | lts-6 |
|
| white-space | normal | whsn |
| pre | whsp |
|
| nowrap | whsnw |
|
| pre-wrap | whspw |
|
| pre-line | whspl |
|
| word-break | normal | wobn |
| keep-all | wobk |
|
| break-all | wobba |
|
| word-wrap | normal | wownm |
| none | wown |
|
| break-word | wowb |
|
| background | transparent | bgt |
| background-size | contain | bgszct |
| cover | bgszcv |
|
| transform | scaleY(-1) | flipy |
| scaleX(-1) | flipx |
|
| filter | grayscale(1) | grayscale |
inline 布局， 通过子类 item 来实现
<div class="lay-list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>flex 布局， 子类 item（拉伸填充剩余区域）box-pack（让其内部水平以及垂直居中）
<div class="flex-box">
<div class="box-pack">label</div>
<div class="item">content</div>
<div>tip</div>
</div>vertical 来实现垂直布局 （父元素必须设置高度）
<div style="height: 400px;">
<div class="flex-box vertial">
<div>header</div>
<div class="item">content</div>
<div>footer</div>
</div>
</div>middle 伸缩项水平垂直居中
<div style="height: 400px;">
<div class="flex-box middle">
<div>left</div>
<div class="item">centent</div>
<div>right</div>
</div>
</div>辅助内部元素居中
<div class="help-middle">
<div>居中元素</div>
</div>清楚浮动
单行文字超出范围出现省略号
也可以使用
clamp_2 两行文字超出范围出现省略号
clamp_3 三行文字超出范围出现省略号
高度背景对齐填充
将元素移除视口可见区域