1.0.9 • Published 1 year ago
plus.resetcss v1.0.9
常用css样式库
##以下为在uniapp中的使用方法，其它项目大同小异
安装
npm install plus.resetcss
// 或
yarn add plus.resetcss使用
在App.vue项目入口文件引入
// App.vue
<style lang="scss">
...其它css文件
@import "@/styles/index.scss";
</style>非uniapp项目中可打开 plus.resetcss.rpx.min.css 复制到您的文件中以标签方式引入使用
<link rel="stylesheet" href="plus.resetcss.rpx.min.css">说明
reset 初始化默认样式
这里只做了简单的初始化样式
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
a:hover {
opacity: .9;
}flex 弹性布局
| class | 描述 |
|---|---|
| -flex | 变为弹性盒子 |
| -inline-flex | 变为行内弹性盒子 |
| -flex-col | 垂直的弹性盒子 |
| -flex-col-reverse | flex-direction: column-reverse |
| -flex-row | 垂直的弹性盒子 |
| -flex-row-reverse | flex-direction: row-reverse |
| -flex-center | 垂直水平居中 |
| -flex-wrap | 让弹性盒元素在必要的时候拆行 |
| -flex-nowrap | 不拆行或不拆列 |
| -flex-wrap-reverse | flex-wrap: wrap-reverse |
| -flex-1 | flex: 1 1 0%; |
| -flex-auto | flex: 1 1 auto; |
| -flex-initial | flex: 0 1 auto; |
| -flex-none | flex: none; |
| -flex-grow | flex-grow: 1; |
| -flex-grow-0 | flex-grow: 0; |
| -flex-y-start | justify-content: flex-start; |
| -flex-y-end | justify-content: flex-end; |
| -flex-y-center | justify-content: center; |
| -flex-y-between | justify-content: space-between; |
| -flex-y-around | justify-content: space-around; |
| -flex-y-evenly | justify-content: space-evenly; |
| -flex-x-start | align-items: flex-start; |
| -flex-x-end | align-items: flex-end; |
| -flex-x-center | align-items: center; |
| -flex-x-baseline | align-items: baseline; |
| -flex-x-stretch | align-items: stretch; |
| -flex-xy-center | 垂直水平居中 |
width 宽度
| class | 描述 |
|---|---|
| -w-0 | width: 0; |
| -w-auto | width: auto; |
| -w-1_2 | width: 50%; |
| -w-1_3 | width: 33.333%; |
| -w-1_4 | width: 25%; |
| -w-1_4 | width: 25%; |
| -w-1_5 | width: 20%; |
| -w-full | width: 100%; |
| -w-screen | width: 100vw; |
| -w-min | width: min-content; |
| -w-max | width: max-content; |
| -min-w-0 | min-width: 0px; |
| -min-w-full | min-width: 100%; |
| -min-w-screen | min-width: 100vw; |
| -min-w-min | min-width: min-content; |
| -min-w-max | min-width: max-content; |
| -max-w-0 | max-width: 0; |
| -max-w-none | max-width: none; |
| -max-w-full | max-width: 100%; |
| -max-w-screen | max-width: 100vw; |
height 高度
| class | 描述 |
|---|---|
| -h-0 | height: 0; |
| -h-auto | height: auto; |
| -h-1_2 | height: 50%; |
| -h-1_3 | height: 33.333%; |
| -h-1_4 | height: 25%; |
| -h-1_4 | height: 25%; |
| -h-1_5 | height: 20%; |
| -h-full | height: 100%; |
| -h-screen | height: 100vw; |
| -h-min | height: min-content; |
| -h-max | height: max-content; |
| -min-h-0 | min-height: 0px; |
| -min-h-full | min-height: 100%; |
| -min-h-screen | min-height: 100vw; |
| -min-h-min | min-height: min-content; |
| -min-h-max | min-height: max-content; |
| -max-h-0 | max-height: 0; |
| -max-h-none | max-height: none; |
| -max-h-full | max-height: 100%; |
| -max-h-screen | max-height: 100vw; |
text 文字处理
| class | 描述 |
|---|---|
| -font-bold | 字体加粗 |
| -font-normal | 默认，标准的字体 |
| -text-left | 文本左对齐 |
| -text-center | 文本居中 |
| -text-right | 文本右对齐 |
| -text-justify | 两边对齐 |
| -line-through | 定义穿过文本下的一条线 |
| -underline | 定义文本下的一条线 |
| -no-underline | 默认。定义标准的文本 |
| -line-[1-5] | 文字溢出显示省略号，范围从1到5，列：-line-2，超过两行其余的隐藏并显示省略号 |
space 内边距和外边距的简写
| class | 描述 |
|---|---|
| -m-[0-80] | 0-80范围四条边的外边距，-m同等与margin属性，列：-m-10等于margin: 10rpx |
| -mx-[0-80] | 0-80左右两边的外边距，-mx同等与margin-left跟margin-right属性，列：-mx-10等于margin-left: 10rpx, margin-right:10rpx |
| -py-[0-80] | 0-80上下两边的外边距，-my同等与margin-top跟margin-bottom属性，列：-my-10等于margin-top: 10rpx, margin-bottom:10rpx |
| -m[l\/t\/r\/b]-[0-80] | 单边的外边距，l/t/r/b是left,top,right,bottom的简写,列：-ml-10等于margin-left: 10rpx |
| -m[l\/t\/r\/b]-auto | 单边的外边距，l/t/r/b是left,top,right,bottom的简写,列：-ml-auto等于margin-left: auto |
| -p-[0-80] | 0-80范围四条边的内边距，-p同等与padding属性，列：-p-10等于padding: 10rpx |
| -px-[0-80] | 0-80左右两边的内边距，-px同等与padding-left跟padding-right属性，列：-px-10等于padding-left: 10rpx, padding-right:10rpx |
| -py-[0-80] | 0-80上下两边的内边距，-py同等与padding-top跟padding-bottom属性，列：-my-10等于padding-top: 10rpx, padding-bottom:10rpx |
| -p[l\/t\/r\/b]-[0-80] | 单边的内边距，l/t/r/b是left,top,right,bottom的简写,列：-pl-10等于padding-left: 10rpx |