常用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 初始化默认样式
这里只做了简单的初始化样式
* {
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 内边距和外边距的简写
定义内外边距,范围从0-80的双数和能被5除尽的数
| 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 |