常用css样式库

安装

npm install resetcss.style
// 或
yarn add resetcss.style

使用

在项目入口文件引入

// src/main.js
import "resetcss.style";

也可打开 resetcss.min.css 复制到您的文件中以标签方式引入使用

<link rel="stylesheet" href="resetcss.min.css">

说明

• reset 初始化默认样式
• flex 弹性布局
• text 文字处理
• space 内边距和外边距的简写

reset 初始化默认样式

这里只做了简单的初始化样式

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
}
a:hover {
    opacity: .9;
}

flex 弹性布局

| class | 描述 | |-|-| | -flex | 变为弹性盒子 | | -inline-flex | 变为行内弹性盒子 | | -flex-col | 垂直的弹性盒子 | | -inline-flex-col | 垂直的行内弹性盒子 | | -flex-center | 垂直水平居中 | | -flex-wrap | 让弹性盒元素在必要的时候拆行 | | -flex-nowrap | 不拆行或不拆列 | | -col-start | (-col)代表align-items属性,元素位于容器的开头 | | -col-center | (-col)代表align-items属性,元素位于容器的中心 | | -col-end | (-col)代表align-items属性,元素位于容器的结尾 | | -row-start | (-row)代表justify-content属性,元素位于容器的开头 | | -row-center | (-row)代表justify-content属性,元素位于容器的中心 | | -row-end | (-row)代表justify-content属性,元素位于容器的结尾 | | -row-between | (-row)代表justify-content属性,左右两边的元素贴紧边界，其余平均分布 | | -row-around | (-row)代表justify-content属性,元素平均分布 |

text 文字处理

| class | 描述 | |-|-| | -text-left | 文本左对齐 | | -text-center | 文本居中 | | -text-right | 文本右对齐 | | -text-through | 贯穿线 | | -font-[12-40] | 定义字体大小(px)单位，范围从12到40，列：-font-14等价于 font-size: 14px | | -font-bold | 加粗字体 | | -font-normal | 常规字体 | | -line-[1-5] | 文字溢出显示省略号，范围从1到5，列：-line-2，超过两行其余的隐藏并显示省略号 |

space 内边距和外边距的简写

| class | 描述 | |-|-| | -m-[0-80] | 0-80范围四条边的外边距，-m同等与margin属性，列：-m-10等于margin: 10px | | -m[l/t/r/b]-[0-80] | 单边的外边距，l/t/r/b是left,top,right,bottom的简写,列：-ml-10等于margin-left: 10px | | -p-[0-80] | 0-80范围四条边的内边距，-p同等与padding属性，列：-p-10等于padding: 10px | | -p[l/t/r/b]-[0-80] | 单边的内边距，l/t/r/b是left,top,right,bottom的简写,列：-pl-10等于padding-left: 10px |