CSS-UTILS is a css library that offer util classes frequently-used.
Easily set element width or height use short classes.
| ClassName | Example | Range | Description |
|---|---|---|---|
| w-[x] | .w-100 |
[5,10...500] | 设置元素的宽度为 100px |
| h-[x] | .h-100 |
[5,10...500] | 设置元素的高度为 100px |
| pct-[x] | .pct-50 |
[1,2...99,100] | 设置元素的宽度为 50% |
Set padding or margin from elements.
| ClassName | Example | Range | Description |
|---|---|---|---|
| p-[x] | .p-10 |
[0, 5, ...100] | padding: 10px |
| pl-[x] | .pl-10 |
[0, 5, ...100] | padding-left: 10px |
| pr-[x] | .pr-10 |
[0, 5, ...100] | padding-right: 10px |
| pt-[x] | .pt-10 |
[0, 5, ...100] | padding-top: 10px |
| pb-[x] | .pb-10 |
[0, 5, ...100] | padding-bottom: 10px |
| pv-[x] | .pv-10 |
[0, 5, ...100] | padding-top:10px;padding-bottom:10px; |
| ph-[x] | .ph-10 |
[0, 5, ...100] | padding-left:10px;padding-right:10px; |
| ClassName | Example | Range | Description |
|---|---|---|---|
| m-[x] | .m-10 |
[0, 5, ...100] | margin: 10px |
| ml-[x] | .ml-10 |
[0, 5, ...100] | margin-left: 10px |
| mr-[x] | .mr-10 |
[0, 5, ...100] | margin-right: 10px |
| mt-[x] | .mt-10 |
[0, 5, ...100] | margin-top: 10px |
| mb-[x] | .mb-10 |
[0, 5, ...100] | margin-bottom: 10px |
| mv-[x] | .mv-10 |
[0, 5, ...100] | margin-top:10px;margin-bottom:10px; |
| mv-auto | margin-left: auto;margin-right: auto |
||
| mh-[x] | .mh-10 |
[0, 5, ...100] | margin-left:10px;margin-right:10px; |
The following utils can be used to add additional styles to texts.
| ClassName | Description |
|---|---|
.ellipsis |
文字溢出时沈略 |
.nowrap |
文字不换行 |
.lowercase |
转化为小写字母 |
.uppercase |
转化为大写字母 |
.capitalize |
转化为首字母大写 |
.bold |
文字粗体 |
.italic |
文字斜体 |
.tr |
文字右对齐 ➡️ |
.tl |
文字左对齐 ← |
.tc |
文字居中对齐 |
.vt |
文字垂直顶部对齐 |
.vm |
文字垂直居中对齐 |
.vb |
文字垂直底部对齐 |
| ClassName | Description |
|---|---|
.fr |
float right |
.fl |
float left |
.clearfix |
添加在容器上清除浮动 |
| ClassName | Description |
|---|---|
.inline |
display inline |
.block |
display block |
.inline-block |
display inlin-block |
.none |
display none |
| ClassName | Description |
|---|---|
.relative |
position relative |
.absolute |
position absolute |
.fixed |
position fixed |
.sticky |
position fixed |
.top |
附着在顶部 |
.bottom |
附着在底部 |
.left |
附着在左侧 |
.right |
附着在右侧 |
.fillin |
填充整个容器 |
| ClassName | Description |
|---|---|
.pointer |
cursor pointer |
.not-allowed |
cursor not-allowed |
.help |
cursor help |
| ClassName | Description |
|---|---|
.hidden |
visibility hidden |
.visible |
visibility visible |
.hover-prev-visible |
visible when hover previous sibling |
.hover-parent-visible |
visible when hover parent |
.hover-self-visible |
visible when hover self |
.focus-prev-visible |
visible when focus previous sibling |
.focus-parent-visible |
visible when focus parent |