安装使用

1、连接公司VPN
2、npm i @qt-web/css-common

样式说明

基础样式类

字体

.yahei 雅黑
.songti 宋体
.serif 衬线体
.monospace 等宽体
.f{i} 字体大小，i取值12到36，如f12表示font-size: 12px
.lh-${i} 行间距大小，i取值100到200，以10递进，如lh-120表示line-height: 1.2
.bold 加粗，font-weight: 700
.normal 标准粗细，font-weight: 400
.thin 变细，font-weight: 200
.text-left 左对齐，text-align: left
.text-right 右对齐，text-align: right
.text-center 居中对齐，text-align: center
.nowrap 不换行，white-space: nowrap
.underline 下划线，text-decoration: underline
.line-through 贯穿线，text-decoration: line-through
.ellipsis 单行溢出省略号
.ellipsis-line2 两行溢出省略号
.ellipsis-line3 三行溢出省略号

边框、背景、颜色

.bd .bd-2 .bd-3 分别为1px、2px、3px透明边框，如.bd表示border: 1px solid transparent
.bd-none 无边框，border: none
.bg-none 无背景，background: none
.white .bd-white .bg-white 分别表示字体颜色、边框颜色、背景颜色为白色
.gray-333 .bd-gray-333 .bg-gray-333 同上，表示各类颜色为#333
.gray-666 .bd-gray-666 .bg-gray-666 同上，表示各类颜色为#666
.gray-999 .bd-gray-999 .bg-gray-999 同上，表示各类颜色为#999
.gray-ccc .bd-gray-ccc .bg-gray-ccc 同上，表示各类颜色为#ccc
.gray-ddd .bd-gray-ddd .bg-gray-ddd 同上，表示各类颜色为#ddd
.gray-eee .bd-gray-eee .bg-gray-eee 同上，表示各类颜色为#eee

间距

.m-auto 两侧居中，即margin: 0 auto

.p .ph .pv .pt .pb .pl .pr
四周、水平两侧、垂直两侧，上、下、左、右各内间距为10px，如pl表示padding-left: 10px，ph表示padding-left: 10px; padding-right: 10px;
.p-{i} .ph-{i} .pv-{i} .pt-{i} .pb-{i} .pl-{i} .pr-{i}
四周、水平两侧、垂直两侧，上、下、左、右各内间距为基准间距（10px）的i倍，这里的i取0或者>1且小于6的值，如pr-0表示padding-right: 0px，pt-5表示padding-top: 50px

.m .mh .mv .mt .mb .ml .mr
外间距，定义同.p等
.m-{i} .mh-{i} .mv-{i} .mt-{i} .mb-{i} .ml-{i} .mr-{i}
外间距，定义同.p-{i}等

.top-{i} .bottom-{i} .left-{i} .right-{i}
分别为上下左右百分比距离，i取0到50，以5递进，如top-45表示top: 45%

其他

.wd-{i} 百分比宽度，i取5到100，以5递进，如wd-25表示width: 25%
.z-index-{i} 设置元素z轴位置，i取-1到10，如z-index--1表示z-index: -1
.opacity-{i} 设置透明度，i取0到10，如opacity-1表示opacity: 0.1
.radius-0 .radius-px-3 .radius-px-5 .radius-50 分别表示0px圆角、3px圆角、5px圆角、50%圆角

布局类

.flex 开启flex布局，display: flex
.flex-row 水平左起主轴，flex-direction: row
.flex-row-reverse 水平右起主轴，flex-direction: row-reverse
.flex-col 垂直上起主轴，flex-direction: column
.flex-col-reverse 垂直下起主轴，flex-direction: column-reverse
.flex-nowrap 不换行，flex-wrap: nowrap
.flex-wrap 换行，首行在上方，flex-wrap: wrap
.flex-wrap-reverse 换行，首行在下方，flex-wrap: wrap-reverse
.flex-start 主轴左对齐，默认，justify-content: flex-start
.flex-end 主轴右对齐，justify-content: flex-end
.flex-center 主轴居中对齐，justify-content: center
.flex-between 主轴两端对齐，justify-content: space-between
.flex-around 子元素两侧等量对齐，justify-content: space-around
.items-start 副轴上沿对齐，align-items: flex-start
.items-end 副轴下沿对齐，align-items: flex-end
.items-center 副轴居中对齐，align-items: center
.items-baseline 副轴首行文字基线对齐，align-items: baseline
.items-stretch 占满副轴空间，默认，align-items: stretch

.block 块级元素，display: block
.inblock 行内块元素，display: inline-block
.inline 行内元素，display: inline

.absolute 绝对定位，position: absolute
.relative 相对定位，position: relative
.fixed 固定定位，position: fixed
.static 静态定位，position: static

.fl 左浮动，float:left
.fr 右浮动，float:right
.clearfix 清除浮动

杂项

.show 显示元素，display:block
.hide 隐藏元素，display:none
.scroll-y 允许垂直滚动，禁止横向滚动
.scroll-x 允许横向滚动，禁止垂直滚动
.scroll-hidden 禁止垂直和横向滚动
.scrollbar-hide 隐藏滚动条