.height10{
  height: 10%;
}
.height20{
  height: 20%;
}
.height30{
  height: 30%;
}
.height40{
  height: 40%;
}
.height50{
  height: 50%;
}
.height60{
  height: 60%;
}
.height70{
  height: 70%;
}
.height80{
  height: 80%;
}
.height90{
  height: 90%;
}
.height100{
  height: 100%;
}
.width23{
  width: 23%;
}
.width24{
  width: 24%;
}
.width25{
  width: 25%;
}
.width30{
  width: 30%;
}
.width33{
  width: 33%;
}
.width45{
  width: 45%;
}
.width46{
  width: 46%;
}
.width47{
  width: 47%;
}
.width48{
  width: 48%;
}
.width49{
  width: 49%;
}
.width50{
  width: 50%;
}
.width80{
  width: 80%;
}
.width90{
  width: 90%;
}
.width100{
  width: 100%;
}

.test{ border: 3rpx solid red}
.test-red{ border: 3rpx solid red}
.test-blue{ border: 3rpx solid blue}
.test-green{ border: 3rpx solid green}
.test-white{ border: 3rpx solid white}
.test-box{ box-sizing: border-box; border: 3rpx solid red}
.test-box-red{ box-sizing: border-box; border: 3rpx solid red}
.test-box-blue{ box-sizing: border-box; border: 3rpx solid blue}
.test-box-green{ box-sizing: border-box; border: 3rpx solid green}
.test-box-white{ box-sizing: border-box; border: 3rpx solid white}

.float{ float: left; }
.float-left{ float: left; }
.float-right{ float: right; }

.display-flex-row{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.display-flex-column{
  display: flex;
  flex-direction: column;
}
.display-flex-column-center{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.display-flex-row-between{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.display-flex-row-center{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.display-flex-row-around{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.display-flex-row-end{
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}
.display-flex-row-wrap{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}
.display-flex-column-between{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
.display-flex-column-around{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}
.justify-content-center{
  justify-content: center
}
.flex1{
  flex: 1
}

.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}

.text-nowrap{
  white-space:nowrap;
}
.text-ellipsis{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.desc-style-text {
  white-space: pre-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.desc-style-header{
  white-space: pre-wrap
}
.line-clamp-1{
  -webkit-line-clamp: 1;
}
.line-clamp-2{
  -webkit-line-clamp: 2;
}
.line-clamp-3{
  -webkit-line-clamp: 3;
}
.line-clamp-4{
  -webkit-line-clamp: 4;
}
.line-clamp-5{
  -webkit-line-clamp: 5;
}

// 不占位隐藏
.display-none{ display: none }
// 占位隐藏
.visibility-hidden{ visibility: hidden }

// 放大缩小比例
.transform-scale05{
  transform: scale(0.5);
}
.transform-scale06{
  transform: scale(0.6);
}
.transform-scale07{
  transform: scale(0.7);
}
.transform-scale08{
  transform: scale(0.8);
}
.transform-scale09{
  transform: scale(0.9);
}

// 旋转90度
.transform-rotate90{
  transform: rotate(90deg);
  ms-transform: rotate(90deg); /* IE 9 */
  moz-transform: rotate(90deg); /* Firefox */
  webkit-transform: rotate(90deg); /* Safari and Chrome */
  o-transform: rotate(90deg); /* Opera */
}

.z-index1{
  z-index: 1;
}
.z-index2{
  z-index: 2;
}
.z-index3{
  z-index: 3;
}
.z-index11{
  z-index: 11;
}
.z-index101{
  z-index: 101;
}
.z-index1001{
  z-index: 1001;
}