CSS封装

/* 公共样式 */
html,body { height: 100%; margin: 0; padding: 0;} 
ul,ol {list-style: none;  margin: 0; padding: 0;}
h1,h2,h3,h4,h5,p{margin: 0px; padding:0px;}
a:link,a:visited {color:#fff}
a{text-decoration: none;}
*{box-sizing:border-box;}



/* 行块转换 */
.dis-none{display: none;}
.dis-block{display: block;}
.dis-in{display:inline;}
.dis-inline-block{display: inline-block;}

/* 边距 */
.margin1{margin: 10%;}
.margin2{margin: 20%;}
.margin3{margin: 30%;}
.margin4{margin: 40%;}
.margin5{margin: 50%;}
.margin6{margin: 60%;}
.margin7{margin: 70%;}
.margin8{margin: 80%;}
.margin9{margin: 90%;}
.margin10{margin: 100%;}

.padding1{padding: 10%;}
.padding2{padding: 20%;}
.padding3{padding: 30%;}
.padding4{padding: 40%;}
.padding5{padding: 50%;}
.padding6{padding: 60%;}
.padding7{padding: 70%;}
.padding8{padding: 80%;}
.padding9{padding: 90%;}
.padding10{padding: 100%;}

/* 定位 */
.pos-rel{position: relative;}
.pos-abs{position: absolute;}
.pos-f{position: fixed;}

.left1{left: 10%;}
.left2{left: 20%;}
.left3{left: 30%;}
.left4{left: 40%;}
.left5{left: 50%;}
.left6{left: 60%;}
.left7{left: 70%;}
.left8{left: 80%;}
.left9{left: 90%;}

.left10{left: 100%;}
.right1{right: 10%;}
.right2{right: 20%;}
.right3{right: 30%;}
.right4{right: 40%;}
.right5{right: 50%;}
.right6{right: 60%;}
.right7{right: 70%;}
.right8{right: 80%;}
.right9{right: 90%;}
.right10{right: 100%;}

.top1{top: 10%;}
.top2{top: 20%;}
.top3{top: 30%;}
.top4{top: 40%;}
.top5{top: 50%;}
.top6{top: 60%;}
.top7{top: 70%;}
.top8{top: 80%;}
.top9{top: 90%;}
.top10{top: 100%;}

.bottom1{bottom: 10%;}
.bottom2{bottom: 20%;}
.bottom3{bottom: 30%;}
.bottom4{bottom: 40%;}
.bottom5{bottom: 50%;}
.bottom6{bottom: 60%;}
.bottom7{bottom: 70%;}
.bottom8{bottom: 80%;}
.bottom9{bottom: 90%;}
.bottom10{bottom: 100%;}

/* 弹性布局 */
.flex {display: flex;}
.none{display: none;}
.just-center{justify-content: center;}
.just-start{justify-content: start;}
.just-end{justify-content: end;}
.just-space-bet{justify-content: space-between;}
.just-space-ano{justify-content: space-around;}
.ali-center{align-items: center;}
.ali-start{align-items: flex-start;}
.ali-end{align-items: flex-end;}
.ali-ste{align-items:stretch;}
.row{flex-direction: row;}
.column{flex-direction: column;}
.wrap{flex-wrap: wrap;}
.nowrap{flex-wrap: nowrap;}

.flex1{flex: 1;}
.flex2{flex: 2;}
.flex3{flex: 3;}
.flex4{flex: 4;}
.flex5{flex: 5;}
.flex6{flex: 6;}
.flex7{flex: 7;}
.flex8{flex: 8;}
.flex9{flex: 9;}
.flex10{flex: 10;}

.span1{width: 4.166666%;}
.span2{width: 8.333333%;}
.span3{width: 12.5%;}
.span4{width: 16.666666%;}
.span5{width: 20.833333%;}
.span6{width: 25%;}
.span7{width: 29.166666%;}
.span8{width: 33.333333%;}
.span9{width: 37.5%;}
.span10{width: 41.666666%;}
.span11{width: 45.833333%;}
.span12{width: 50%;}
.span13{width: 54.166666%;}
.span14{width: 58.333333%;}
.span15{width: 62.5%;}
.span16{width: 66.666666%;}
.span17{width: 70.833333%;}
.span18{width: 75%;}
.span19{width: 79.166666%;}
.span20{width: 83.333333%;}
.span21{width: 87.5%;}
.span22{width: 91.666666%;}
.span23{width: 95.833333%;}
.span24{width: 100%;}

/* 宽高 */
.width1{width: 10%;}
.width2{width: 20%;}
.width3{width: 30%;}
.width4{width: 40%;}
.width5{width: 50%;}
.width6{width: 60%;}
.width7{width: 70%;}
.width8{width: 80%;}
.width9{width: 90%;}
.width10{width: 100%;}

.height5{height: 50%;}
.height10{height: 100%;}

/* 文字颜色-背景颜色 */
.black3{color: #303133;}
.black6{color: #606266;}
.black9{color: #909399;}
.blackc{color: #C0C4CC;}
.fff{color: #FFFFFF;}

.back{background: #303133;}

.back-rgba-bai{background: rgba(255,255,255,0.5);}
.back-rgba-hei{background: rgba(0,0,0,0.5);}


/* 盒子-边框-阴影-透明 */
.bor1-solid-333{border: 1px solid #303133;}
.bor1-solid-ccc{border: 1px solid #c0c4cc;}
.bor1-solid-fff{border: 1px solid #fff;}

.bor-rad-1{border-radius: 10px;}
.bor-rad-2{border-radius: 20px;}
.bor-rad-3{border-radius: 30px;}
.bor-rad-y{border-radius: 50%;}

.box-sha-3{box-shadow: 0px 0px 10px #303133;}
.box-sha-f{box-shadow: 0px 0px 10px #FFFFFF;}

.opa1{opacity: 10%;}
.opa2{opacity: 20%;}
.opa3{opacity: 30%;}
.opa4{opacity: 40%;}
.opa5{opacity: 50%;}
.opa6{opacity: 60%;}
.opa7{opacity: 70%;}
.opa8{opacity: 80%;}
.opa9{opacity: 90%;}
.opa10{opacity: 100%;}

/* 文字大小 */
.font-size-14{font-size: 14px;}
.font-size-16{font-size: 16px;}
.font-size-18{font-size: 18px;}
.font-size-19{font-size: 20px;}