/**
一、位置微调类型
space 外边距
padding 内边距

二、位置微调方向
    top 上   bottom 下   left左   right 右
    horizontal 水平（左右）  vertical 垂直（上下）

三、位置微调距离
    line 1px
    thin 5px
    (默认) 10px
    mid 15px
    big 20px
    large 30px

四、高宽尺寸类型
    "w" + 相对全屏宽度百分比
    "h" + 相对全屏高度百分比
    用法：基本用在最外围的容器

    "pw-" + 相对父窗口宽度百分比
    "ph-" + 相对父窗口高度百分比
    用法：一般用在内部乱七八糟的小容器

五、高宽步进 1
**/


/** 位置 start */
.inner-center {text-align:center;}
.inner-left {text-align:left;}
.inner-right {text-align:right;}
.pull-left {float:left;}
.pull-right {float:right;}

/** 外边距 **/
.space-none {margin:0px;}
.space {margin:10px;}
.space-line {margin:1px;}
.space-thin {margin:5px;}
.space-mid {margin:15px;}
.space-big {margin:20px;}
.space-large {margin:30px;}
.space-horizontal {margin-left:10px;margin-right:10px;}
.space-horizontal-line {margin-left:1px;margin-right:1px;}
.space-horizontal-thin {margin-left:5px;margin-right:5px;}
.space-horizontal-mid {margin-left:15px;margin-right:15px;}
.space-horizontal-big {margin-left:20px;margin-right:20px;}
.space-horizontal-large {margin-left:30px;margin-right:30px;}
.space-vertical {margin-top:10px;margin-bottom:10px;}
.space-vertical-line {margin-top:1px;margin-bottom:1px;}
.space-vertical-thin {margin-top:5px;margin-bottom:5px;}
.space-vertical-mid {margin-top:15px;margin-bottom:15px;}
.space-vertical-big {margin-top:20px;margin-bottom:20px;}
.space-vertical-large {margin-top:30px;margin-bottom:30px;}
.space-left {margin-left:10px;}
.space-left-line {margin-left:1px;}
.space-left-thin {margin-left:5px;}
.space-left-mid {margin-left:15px;}
.space-left-big {margin-left:20px;}
.space-left-large {margin-left:30px;}
.space-right {margin-right:10px;}
.space-right-line {margin-left:1px;}
.space-right-thin {margin-right:5px;}
.space-right-mid {margin-right:15px;}
.space-right-big {margin-right:20px;}
.space-right-large {margin-right:30px;}
.space-top {margin-top:10px;}
.space-top-line {margin-top:1px;}
.space-top-thin {margin-top:5px;}
.space-top-mid {margin-top:15px;}
.space-top-big {margin-top:20px;}
.space-top-large {margin-top:30px;}
.space-bottom {margin-bottom:10px;}
.space-bottom-line {margin-bottom:1px;}
.space-bottom-thin {margin-bottom:5px;}
.space-bottom-mid {margin-bottom:15px;}
.space-bottom-big {margin-bottom:20px;}
.space-bottom-large {margin-bottom:30px;}

/* 边框修饰 */
.bottom-line-dark {border-bottom:1px #ccc solid;}

/** 内边距**/
.padding-none {padding:0px;}
.padding {padding:10px;}
.padding-line {padding:1px;}
.padding-thin {padding:5px;}
.padding-mid {padding:15px;}
.padding-big {padding:20px;}
.padding-large {padding:30px;}
.padding-horizontal {padding-left:10px;padding-right:10px;}
.padding-horizontal-line {padding-left:11px;padding-right:1px;}
.padding-horizontal-thin {padding-left:5px;padding-right:5px;}
.padding-horizontal-mid {padding-left:15px;padding-right:15px;}
.padding-horizontal-big {padding-left:20px;padding-right:20px;}
.padding-horizontal-large {padding-left:30px;padding-right:30px;}
.padding-vertical {padding-top:10px;padding-bottom:10px;}
.padding-vertical-line {padding-top:1px;padding-bottom:1px;}
.padding-vertical-thin {padding-top:5px;padding-bottom:5px;}
.padding-vertical-mid {padding-top:15px;padding-bottom:15px;}
.padding-vertical-big {padding-top:20px;padding-bottom:20px;}
.padding-vertical-large {padding-top:30px;padding-bottom:30px;}

.padding-left {padding-left:10px;}
.padding-left-line {padding-left:1px;}
.padding-left-thin {padding-left:5px;}
.padding-left-mid {padding-left:15px;}
.padding-left-big {padding-left:20px;}
.padding-left-large {padding-left:30px;}
.padding-right {padding-right:10px;}
.padding-right-line {padding-right:1px;}
.padding-right-thin {padding-right:5px;}
.padding-right-mid {padding-right:15px;}
.padding-right-big {padding-right:20px;}
.padding-right-large {padding-right:30px;}
.padding-top {padding-top:10px;}
.padding-top-line {padding-top:1px;}
.padding-top-thin {padding-top:5px;}
.padding-top-mid {padding-top:15px;}
.padding-top-big {padding-top:20px;}
.padding-top-large {padding-top:30px;}
.padding-bottom {padding-bottom:10px;}
.padding-bottom-line {padding-bottom:1px;}
.padding-bottom-thin {padding-bottom:5px;}
.padding-bottom-mid {padding-bottom:15px;}
.padding-bottom-big {padding-bottom:20px;}
.padding-bottom-large {padding-bottom:30px;}

.txt-shadow {text-shadow:2px 2px 2px #ddd;}
.box-shadow {box-shadow:0px 0px 4px #ddd;}

/** view width 全屏宽度百分比 **/
.w1{width:1vw}
.w2{width:2vw}
.w3{width:3vw}
.w4{width:4vw}
.w5{width:5vw}
.w6{width:6vw}
.w7{width:7vw}
.w8{width:8vw}
.w9{width:9vw}
.w10{width:10vw}
.w11{width:11vw}
.w12{width:12vw}
.w13{width:13vw}
.w14{width:14vw}
.w15{width:15vw}
.w16{width:16vw}
.w17{width:17vw}
.w18{width:18vw}
.w19{width:19vw}
.w20{width:20vw}
.w21{width:21vw}
.w22{width:22vw}
.w23{width:23vw}
.w24{width:24vw}
.w25{width:25vw}
.w26{width:26vw}
.w27{width:27vw}
.w28{width:28vw}
.w29{width:29vw}
.w30{width:30vw}
.w31{width:31vw}
.w32{width:32vw}
.w33{width:33vw}
.w34{width:34vw}
.w35{width:35vw}
.w36{width:36vw}
.w37{width:37vw}
.w38{width:38vw}
.w39{width:39vw}
.w40{width:40vw}
.w41{width:41vw}
.w42{width:42vw}
.w43{width:43vw}
.w44{width:44vw}
.w45{width:45vw}
.w46{width:46vw}
.w47{width:47vw}
.w48{width:48vw}
.w49{width:49vw}
.w50{width:50vw}
.w51{width:51vw}
.w52{width:52vw}
.w53{width:53vw}
.w54{width:54vw}
.w55{width:55vw}
.w56{width:56vw}
.w57{width:57vw}
.w58{width:58vw}
.w59{width:59vw}
.w60{width:60vw}
.w61{width:61vw}
.w62{width:62vw}
.w63{width:63vw}
.w64{width:64vw}
.w65{width:65vw}
.w66{width:66vw}
.w67{width:67vw}
.w68{width:68vw}
.w69{width:69vw}
.w70{width:70vw}
.w71{width:71vw}
.w72{width:72vw}
.w73{width:73vw}
.w74{width:74vw}
.w75{width:75vw}
.w76{width:76vw}
.w77{width:77vw}
.w78{width:78vw}
.w79{width:79vw}
.w80{width:80vw}
.w81{width:81vw}
.w82{width:82vw}
.w83{width:83vw}
.w84{width:84vw}
.w85{width:85vw}
.w86{width:86vw}
.w87{width:87vw}
.w88{width:88vw}
.w89{width:89vw}
.w90{width:90vw}
.w91{width:91vw}
.w92{width:92vw}
.w93{width:93vw}
.w94{width:94vw}
.w95{width:95vw}
.w96{width:96vw}
.w97{width:97vw}
.w98{width:98vw}
.w99{width:99vw}
.w100{width:100vw}

/** view height 全屏高度百分比 **/
.h1{height:1vh}
.h2{height:2vh}
.h3{height:3vh}
.h4{height:4vh}
.h5{height:5vh}
.h6{height:6vh}
.h7{height:7vh}
.h8{height:8vh}
.h9{height:9vh}
.h10{height:10vh}
.h11{height:11vh}
.h12{height:12vh}
.h13{height:13vh}
.h14{height:14vh}
.h15{height:15vh}
.h16{height:16vh}
.h17{height:17vh}
.h18{height:18vh}
.h19{height:19vh}
.h20{height:20vh}
.h21{height:21vh}
.h22{height:22vh}
.h23{height:23vh}
.h24{height:24vh}
.h25{height:25vh}
.h26{height:26vh}
.h27{height:27vh}
.h28{height:28vh}
.h29{height:29vh}
.h30{height:30vh}
.h31{height:31vh}
.h32{height:32vh}
.h33{height:33vh}
.h34{height:34vh}
.h35{height:35vh}
.h36{height:36vh}
.h37{height:37vh}
.h38{height:38vh}
.h39{height:39vh}
.h40{height:40vh}
.h41{height:41vh}
.h42{height:42vh}
.h43{height:43vh}
.h44{height:44vh}
.h45{height:45vh}
.h46{height:46vh}
.h47{height:47vh}
.h48{height:48vh}
.h49{height:49vh}
.h50{height:50vh}
.h51{height:51vh}
.h52{height:52vh}
.h53{height:53vh}
.h54{height:54vh}
.h55{height:55vh}
.h56{height:56vh}
.h57{height:57vh}
.h58{height:58vh}
.h59{height:59vh}
.h60{height:60vh}
.h61{height:61vh}
.h62{height:62vh}
.h63{height:63vh}
.h64{height:64vh}
.h65{height:65vh}
.h66{height:66vh}
.h67{height:67vh}
.h68{height:68vh}
.h69{height:69vh}
.h70{height:70vh}
.h71{height:71vh}
.h72{height:72vh}
.h73{height:73vh}
.h74{height:74vh}
.h75{height:75vh}
.h76{height:76vh}
.h77{height:77vh}
.h78{height:78vh}
.h79{height:79vh}
.h80{height:80vh}
.h81{height:81vh}
.h82{height:82vh}
.h83{height:83vh}
.h84{height:84vh}
.h85{height:85vh}
.h86{height:86vh}
.h87{height:87vh}
.h88{height:88vh}
.h89{height:89vh}
.h90{height:90vh}
.h91{height:91vh}
.h92{height:92vh}
.h93{height:93vh}
.h94{height:94vh}
.h95{height:95vh}
.h96{height:96vh}
.h97{height:97vh}
.h98{height:98vh}
.h99{height:99vh}
.h100{height:100vh}

/** percent width 父窗口宽度百分比 **/
.pw1{width:1%}
.pw2{width:2%}
.pw3{width:3%}
.pw4{width:4%}
.pw5{width:5%}
.pw6{width:6%}
.pw7{width:7%}
.pw8{width:8%}
.pw9{width:9%}
.pw10{width:10%}
.pw11{width:11%}
.pw12{width:12%}
.pw13{width:13%}
.pw14{width:14%}
.pw15{width:15%}
.pw16{width:16%}
.pw17{width:17%}
.pw18{width:18%}
.pw19{width:19%}
.pw20{width:20%}
.pw21{width:21%}
.pw22{width:22%}
.pw23{width:23%}
.pw24{width:24%}
.pw25{width:25%}
.pw26{width:26%}
.pw27{width:27%}
.pw28{width:28%}
.pw29{width:29%}
.pw30{width:30%}
.pw31{width:31%}
.pw32{width:32%}
.pw33{width:33%}
.pw34{width:34%}
.pw35{width:35%}
.pw36{width:36%}
.pw37{width:37%}
.pw38{width:38%}
.pw39{width:39%}
.pw40{width:40%}
.pw41{width:41%}
.pw42{width:42%}
.pw43{width:43%}
.pw44{width:44%}
.pw45{width:45%}
.pw46{width:46%}
.pw47{width:47%}
.pw48{width:48%}
.pw49{width:49%}
.pw50{width:50%}
.pw51{width:51%}
.pw52{width:52%}
.pw53{width:53%}
.pw54{width:54%}
.pw55{width:55%}
.pw56{width:56%}
.pw57{width:57%}
.pw58{width:58%}
.pw59{width:59%}
.pw60{width:60%}
.pw61{width:61%}
.pw62{width:62%}
.pw63{width:63%}
.pw64{width:64%}
.pw65{width:65%}
.pw66{width:66%}
.pw67{width:67%}
.pw68{width:68%}
.pw69{width:69%}
.pw70{width:70%}
.pw71{width:71%}
.pw72{width:72%}
.pw73{width:73%}
.pw74{width:74%}
.pw75{width:75%}
.pw76{width:76%}
.pw77{width:77%}
.pw78{width:78%}
.pw79{width:79%}
.pw80{width:80%}
.pw81{width:81%}
.pw82{width:82%}
.pw83{width:83%}
.pw84{width:84%}
.pw85{width:85%}
.pw86{width:86%}
.pw87{width:87%}
.pw88{width:88%}
.pw89{width:89%}
.pw90{width:90%}
.pw91{width:91%}
.pw92{width:92%}
.pw93{width:93%}
.pw94{width:94%}
.pw95{width:95%}
.pw96{width:96%}
.pw97{width:97%}
.pw98{width:98%}
.pw99{width:99%}
.pw100{width:100%}

/** percent height 父窗口高度百分比 **/
.ph1{height:1%}
.ph2{height:2%}
.ph3{height:3%}
.ph4{height:4%}
.ph5{height:5%}
.ph6{height:6%}
.ph7{height:7%}
.ph8{height:8%}
.ph9{height:9%}
.ph10{height:10%}
.ph11{height:11%}
.ph12{height:12%}
.ph13{height:13%}
.ph14{height:14%}
.ph15{height:15%}
.ph16{height:16%}
.ph17{height:17%}
.ph18{height:18%}
.ph19{height:19%}
.ph20{height:20%}
.ph21{height:21%}
.ph22{height:22%}
.ph23{height:23%}
.ph24{height:24%}
.ph25{height:25%}
.ph26{height:26%}
.ph27{height:27%}
.ph28{height:28%}
.ph29{height:29%}
.ph30{height:30%}
.ph31{height:31%}
.ph32{height:32%}
.ph33{height:33%}
.ph34{height:34%}
.ph35{height:35%}
.ph36{height:36%}
.ph37{height:37%}
.ph38{height:38%}
.ph39{height:39%}
.ph40{height:40%}
.ph41{height:41%}
.ph42{height:42%}
.ph43{height:43%}
.ph44{height:44%}
.ph45{height:45%}
.ph46{height:46%}
.ph47{height:47%}
.ph48{height:48%}
.ph49{height:49%}
.ph50{height:50%}
.ph51{height:51%}
.ph52{height:52%}
.ph53{height:53%}
.ph54{height:54%}
.ph55{height:55%}
.ph56{height:56%}
.ph57{height:57%}
.ph58{height:58%}
.ph59{height:59%}
.ph60{height:60%}
.ph61{height:61%}
.ph62{height:62%}
.ph63{height:63%}
.ph64{height:64%}
.ph65{height:65%}
.ph66{height:66%}
.ph67{height:67%}
.ph68{height:68%}
.ph69{height:69%}
.ph70{height:70%}
.ph71{height:71%}
.ph72{height:72%}
.ph73{height:73%}
.ph74{height:74%}
.ph75{height:75%}
.ph76{height:76%}
.ph77{height:77%}
.ph78{height:78%}
.ph79{height:79%}
.ph80{height:80%}
.ph81{height:81%}
.ph82{height:82%}
.ph83{height:83%}
.ph84{height:84%}
.ph85{height:85%}
.ph86{height:86%}
.ph87{height:87%}
.ph88{height:88%}
.ph89{height:89%}
.ph90{height:90%}
.ph91{height:91%}
.ph92{height:92%}
.ph93{height:93%}
.ph94{height:94%}
.ph95{height:95%}
.ph96{height:96%}
.ph97{height:97%}
.ph98{height:98%}
.ph99{height:99%}
.ph100{height:100%}

/*隐藏与显示*/
.hide{display:none}
.show{display:""}

/*内容滚动*/
.scroll-vertical{overflow-y: auto;}
.scroll-horizontal{overflow-x: auto;}

/*文字换行*/
.line-nowrap{white-space:nowrap;}
.line-wrap{}

/*内容是否能滚动*/
.overflow-hidden{overflow:hidden;}
.overflow-auto{overflow:auto;}

/*固定顶部*/
.fixed-top{
    position: fixed;
    top:0px;
    width:100vw;
    z-index: 95;
}
/*固定底部*/
.fixed-bottom{
    position: fixed;
    bottom:0px;
    width:100vw;
    z-index: 95;
}
/*固定左*/
.fixed-left{
    position: fixed;
    left:0px;
    height:100vw;
    z-index: 95;
}
/*固定右*/
.fixed-right{
    position: fixed;
    right:0px;
    height:100vw;
    z-index: 95;
}

/*相对定位 */
.relative-container{
    position:relative;
}
/*绝对定位 父容器必须添加 relative-container*/
.absolute-top{
    position:absolute;
    top:0;
    left:0;
}

.absolute-bottom{
    position:absolute;
    bottom:0;
    left:0;
}
.absolute-left{
    position:absolute;
    top:0;
    left:0;
}
.absolute-right{
    position:absolute;
    top:0;
    right:0;
}
.absolute-top-left{
    position:absolute;
    top:0;
    left:0;
}
.absolute-top-right{
    position:absolute;
    top:0;
    right:0;
}
.absolute-bottom-left{
    position:absolute;
    bottom:0;
    left:0;
}
.absolute-bottom-right{
    position:absolute;
    bottom:0;
    right:0;
}