入门
介绍
由于业内CSS原子化的盛行，组件库参考 tailwindcss 的设计思路，并且结合 UNIAPP NVUE的样式支持 给大家提供了一套原子化的CSS样式库，助力各位开发者用户高效开发业务。
提示
- 样式库语法基本是tailwindcss的语法，所以如果熟悉tailwindcss的话就能零学习成本上手
CSS样式概览
注意事项
- 这里的平台差异说明只是CSS分类的平台差异概览，具体属性的平台差异请点击详情去该CSS分类的详情介绍查看
- 全局样式库已自动添加了浏览器前缀处理，开发者们不需要自己手动处理浏览器前缀问题
- NVUE的样式支持请查看UNIAPP NVUE样式
布局
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| Box Sizing | box-sizing | H5、小程序、app-vue |
| Display | display | H5、小程序、app-vue、app-nvue |
| 溢出 | overflow | H5、小程序、app-vue |
| 定位 | position | H5、小程序、app-vue、app-nvue |
| 定位位置 | top | right | bottom | left | H5、小程序、app-vue、app-nvue |
| 层级 | z-index | H5、小程序、app-vue、app-nvue |
Flexbox And Grid
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| Flex方向 | flex-direction | H5、小程序、app-vue、app-nvue |
| Flex Wrap | flex-wrap | H5、小程序、app-vue、app-nvue |
| Flex | flex | H5、小程序、app-vue、app-nvue |
| Flex Grow | flex-grow | H5、小程序、app-vue |
| Flex Shrink | flex-shrink | H5、小程序、app-vue |
| Grid Template Columns | grid-template-columns | H5、小程序、app-vue |
| Grid Column Start / End | grid-column | grid-column-start | grid-column-end | H5、小程序、app-vue |
| Grid Template Rows | grid-template-rows | H5、小程序、app-vue |
| Grid Row Start / End | grid-row | grid-row-start | grid-row-end | H5、小程序、app-vue |
| Grid Auto Flow | grid-auto-flow | H5、小程序、app-vue |
| Grid Auto Columns | grid-auto-columns | H5、小程序、app-vue |
| Grid Auto Rows | grid-auto-rows | H5、小程序、app-vue |
| Gap | gap | column-gap | row-gap | H5、小程序、app-vue |
| Justify Content | justify-content | H5、小程序、app-vue、app-nvue |
| Justify Items | justify-items | H5、小程序、app-vue |
| Justify Self | justify-self | H5、小程序、app-vue |
| Align Content | align-content | H5、小程序、app-vue |
| Align Items | align-items | H5、小程序、app-vue、app-nvue |
| Align Self | align-self | H5、小程序、app-vue |
| Place Content | place-content | H5、小程序、app-vue |
| Place Items | place-items | H5、小程序、app-vue |
| Place Self | place-self | H5、小程序、app-vue |
间距
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 内边距 | padding / padding-top | right | bottom | left | H5、小程序、app-vue、app-nvue |
| 外边距 | margin / margin-top | right | bottom | left | H5、小程序、app-vue、app-nvue |
尺寸
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 宽度 | width | H5、小程序、app-vue、app-nvue |
| 最小宽度 | min-width | H5、小程序、app-vue |
| 最大宽度 | max-width | H5、小程序、app-vue |
| 高度 | height | H5、小程序、app-vue、app-nvue |
| 最小高度 | height | H5、小程序、app-vue |
| 最大高度 | max-height | H5、小程序、app-vue |
排版
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 字体序列 | font-family | H5、小程序、app-vue、app-nvue |
| 字体大小 | font-size | H5、小程序、app-vue、app-nvue |
| 字体平滑度 | font-smoothing | H5、小程序、app-vue |
| 字体样式 | font-style | H5、小程序、app-vue、app-nvue |
| 字体粗细 | font-weight | H5、小程序、app-vue、app-nvue |
| Font Variant Numeric | font-variant-numeric | H5、小程序、app-vue |
| 字母间距 | letter-spacing | H5、小程序、app-vue |
| 行高 | line-height | H5、小程序、app-vue、app-nvue |
| 文本对齐 | text-align | H5、小程序、app-vue、app-nvue |
| 文本颜色 | color | H5、小程序、app-vue、app-nvue |
| 文本装饰 | text-decoration | H5、小程序、app-vue、app-nvue |
| 文本转换 | text-transform | H5、小程序、app-vue |
| 文本溢出 | text-overflow | H5、小程序、app-vue、app-nvue |
| 垂直对齐 | vertical-align | H5、小程序、app-vue |
| 空格 | white-space | H5、小程序、app-vue |
| 文本换行 | word-break | H5、小程序、app-vue |
背景
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 背景图像固定 | background-attachment | H5、小程序、app-vue |
| 背景图像裁剪 | background-clip | H5、小程序、app-vue |
| 背景颜色 | background-color | H5、小程序、app-vue、app-nvue |
| Background Origin | background-origin | H5、小程序、app-vue |
| 背景图像位置 | background-position | H5、小程序、app-vue |
| 背景图像重复 | background-repeat | H5、小程序、app-vue |
| 背景图像大小 | background-size | H5、小程序、app-vue |
| 背景渐变 | background-image | H5、小程序、app-vue |
边框
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 边框圆角 | border-radius | border-top-left-radius | border-top-right-radius | border-bottom-left-radius | border-bottom-right-radius | H5、小程序、app-vue、app-nvue |
| 边框厚度 | border-width | border-top-width | border-right-width | border-bottom-width | border-left-width | H5、小程序、app-vue、app-nvue |
| 边框样式 | border-style | H5、小程序、app-vue、app-nvue |
| 边框颜色 | border-color | H5、小程序、app-vue、app-nvue |
Effects
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 不透明度 | opacity | H5、小程序、app-vue、app-nvue |
Filters
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 模糊滤镜 | filter: blur | H5、小程序、app-vue |
Tansitions And Animation
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 动画 | animation | H5、小程序、app-vue |
转换
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 2D / 3D转换 | transform | H5、小程序、app-vue、app-nvue |
| 变换原点 | transform-origin | H5、小程序、app-vue、app-nvue |
| 旋转 | transform-origin | H5、小程序、app-vue、app-nvue |
交互
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 大小调整 | resize | H5、小程序、app-vue |
| 用户选择 | user-select | H5、小程序、app-vue |
SVG
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 填充 | fill | H5、app-vue |
| 线条 | stroke | H5、app-vue |
| 线条厚度 | stroke-width | H5、app-vue |
ACCESSIBILITY
| CSS分类 | CSS属性 | 平台差异说明 |
|---|---|---|
| 屏幕阅读器 | - | H5 |