css样式基础库--global.css（持续更新中~）

css样式基础库--global.css

*{margin:0;padding:0}
html,body{-webkit-tap-highlight-color:rgba(0,0,0,0);font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;background:#000;width:100%;overflow-x:hidden}

[full]{position:absolute;left:0;top:0;width:100%;height:100%}
[none]{display:none;}
[bgfull]{position:absolute;left:0;top:0;width:100%;height:100%;background-size:100% 100%}

.bg img{width:100%;height:100%}

fieldset, img { border:none; }
img{display: block;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
input { padding-top:0; padding-bottom:0; }
input::-moz-focus-inner { border:none; padding:0; }
select, input { vertical-align:middle; }
select, input, textarea { font-size:12px; margin:0; }
input[type="text"], input[type="password"], textarea { outline-style:none; -webkit-appearance:none; }
table { border-collapse:collapse; }
a { color:#666; text-decoration:none; }
a:visited { color:#666; }
a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }

:root{
  --TColor: #F75F5F;
  --SColor: #648ce8;
  --FontColor: #FFFFFF;
}

.text-sm{font-size:12px}
.text-df{font-size:14px}
.text-lg{font-size:16px}

.text-TColor{color:var(--TColor)}
.text-SColor{color:var(--SColor)}
.text-FontColor{color:var(--FontColor)}

.bg-TColor{background-color:var(--TColor)}
.bg-SColor{background-color:var(--SColor)}


/*
    flex布局
*/
.flex-row{
    display: flex;
    flex-direction: column;
}

.flex-column{
    display: flex;
    flex-direction: row;
}

/*内容溢出换行*/
.flex-wrap{
    flex-wrap: wrap;
}

/*主轴上的对齐方式*/
justify-start{
    justify-content: flex-start;
}

justify-end{
    justify-content: flex-end;
}

.justify-center{
    justify-content: center;
}

.justify-between{
    justify-content: space-between;
}

.justify-around{
    justify-content: space-around;
}

/**
 * 交叉轴上对齐方式
 */
 .items-start{
     align-items: flex-start;
 }

 .items-end{
     align-items:flex-end;
 }

 .items-center{
     align-items:center;
 }

 .items-stretch{
     align-items:stretch;
 }

/*
    文字两端对齐
*/
.txt-between{
    text-align: justify;
    text-align-last:justify;
}

/*文字单行溢出省略号*/
.txt-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*多行文本溢出省略号*/
.txt-more-ellipsis{
  display: -webkit-box;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*遮罩层*/
.mask{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
}