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