Natural Pacifist Manatees

    @sc-web/css-common

    1.0.0 • Public • Published

    安装使用

    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 隐藏滚动条

    Keywords

    Install

    npm i @sc-web/css-common

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    20.2 kB

    Total Files

    4

    Last publish

    Collaborators

    • zhongshihao