0.2.2 • Published 2 years ago
css.preset v0.2.2
css.preset
依据 Emmet 的 css 规则 预设了部分常用样式，以便开发调试
下载
yarn add css.preset
# 或
npm install css.preset使用
<div class="fz12 lh30 mt20 fwb">css.preset</div>属性
数字规则
命名规则 属性简称加上数值
| 属性 | 间隔 | 简称 | |
|---|---|---|---|
| margin | 4 | ma | ma-0 - ma-20 |
| margin-top | 4 | mt | mt-0 - mt-20 |
| margin-bottom | 4 | mb | mb-0 - mb-20 |
| margin-left | 4 | ml | ml-0 - ml-20 |
| margin-right | 4 | mr | mr-0 - mr-20 |
| padding | 4 | pa | pa-0 - pa-20 |
| padding-top | 4 | pt | pt-0 - pt-20 |
| padding-right | 4 | pr | pr-0 - pr-20 |
| padding-bottom | 4 | pb | pb-0 - pb-20 |
| padding-left | 4 | pl | pl-0 - pl-20 |
| line-height | 2 | lh | lh-0 - lh-20 |
| font-size | 2 | fz | fz-0 - fz-20 |
| font-weight | 100 | fw | fw0 - fw1000 |
单一规则
| 属性 | 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 |
组合规则
lay-list
inline 布局， 通过子类 item 来实现
<div class="lay-list">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>flex-box
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>help-middle
辅助内部元素居中
<div class="help-middle">
<div>居中元素</div>
</div>cf
清楚浮动
ell
单行文字超出范围出现省略号
也可以使用
clamp_2 两行文字超出范围出现省略号
clamp_3 三行文字超出范围出现省略号
eq
高度背景对齐填充
not-viewport
将元素移除视口可见区域