resetcss.style/README.md

包含scss和css的常用样式库

# 常用css样式库

## 安装

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

## 使用

在项目入口文件引入

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

也可打开 <a href="https://gitee.com/maikro/resetcss.style/raw/master/dist/resetcss.min.css" target="_blank">resetcss.min.css</a> 复制到您的文件中以标签方式引入使用
```html
<link rel="stylesheet" href="resetcss.min.css">
```


## 说明

- [reset 初始化默认样式](#reset)
- [flex 弹性布局](#flex)
- [text 文字处理](#text)
- [space 内边距和外边距的简写](#space)


## <span id="reset">reset 初始化默认样式</span>

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

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

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

## <span id="flex">flex 弹性布局</span>

| 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属性,元素平均分布 |


## <span id="text">text 文字处理</span>

| 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，超过两行其余的隐藏并显示省略号 |


## <span id="space">space 内边距和外边距的简写</span>

> <p style="color: red">定义内外边距,范围从0-80的双数和能被5除尽的数</p>

| 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 |