前端 （css兼容） 开发常用的css样式集 - flex布局 - position等 -戴向天

大家好！我叫戴向天

QQ群：602504799

QQ:809002582

如若有不理解的，可加QQ群进行咨询了解

/*
    css

    样式优先级是可以通过顺序来进行使用的。越是写在后面的样式就会越优先被浏览器进行调用

    当然也是是用 !important 来告诉浏览器该样式的优先级最高

    示例:
        下面这个div就可以实现全屏了
    <div  posi-f to l0 b0 r0 ></div>

*/


*[flex] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

*[flex-center] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

*[flex-y-start] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}

*[flex-y-center] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

*[flex-y-end] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: end;
}

*[flex-0] {
  -webkit-box-flex: 0;
  -ms-flex: 0;
  flex: 0;
}

*[flex-1] {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

*[flex-bt] {
  -ms-flex-pack: distribute;
  justify-content: space-between;
}

*[flex-row] {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

*[flex-column] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

*[flex-x-end] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
}

*[flex-x-center] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

*[flex-x-start] {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: start;
}

*[t-l] {
  text-align: left;
}

*[t-c] {
  text-align: center;
}

*[t-r] {
  text-align: right;
}

*[t-d-l] {
  text-decoration: underline;
}

*[fon-wb] {
  font-weight: bold;
}

*[fon-w5] {
  font-weight: 500;
}

*[fon-w3] {
  font-weight: 300;
}

*[posi-f] {
  position: fixed;
  z-index: 0;
}

*[posi-r] {
  position: relative;
  z-index: 0;
}

*[r0] {
  right: 0;
}

*[t0] {
  top: 0;
}

*[l0] {
  left: 0;
}

*[b0] {
  bottom: 0;
}


*[posi-a] {
  position: absolute;
  z-index: 0;
}

*[z1] {
  z-index: 1 !important;
}

*[z2] {
  z-index: 2 !important;
}

*[z3] {
  z-index: 3 !important;
}

*[z4] {
  z-index: 4 !important;
}

*[z5] {
  z-index: 5 !important;
}

*[z6] {
  z-index: 6 !important;
}

*[z7] {
  z-index: 7 !important;
}

*[z8] {
  z-index: 8 !important;
}

*[z9] {
  z-index: 9 !important;
}

*[z10] {
  z-index: 10 !important;
}


*[over-h] {
  overflow: hidden;
}

*[over-a] {
  overflow: auto;
}

*[inline-block] {
  display: inline-block;
}

*[none] {
  display: none;
}

*[float-l] {
  float: left;
}

*[float-r] {
  float: right;
}

*[float-t] {
  float: top;
}

*[float-b] {
  float: bottom;
}

*[col-f] {
  color: #fff;
}

*[bg-cover] {
  background-size: cover;
}

2019-10-08
关于宽高的公共样式，我这边是使用js来进行处理的

let typeNames = ['width', 'height', 'max-width', 'min-width', 'max-height', 'min-height']
    let len = 100
    let styleText = ''
    for (let typeName in typeNames) {
      let unit = ''
      let names = {}
      let firstName = ''
      let bool = typeNames[typeName].indexOf('-') >= 0

      if (bool) {
        unit = typeNames[typeName].split('-')[1].substring(0, 1)
        firstName = typeNames[typeName].split('-')[0]
      } else {
        unit = typeNames[typeName].substring(0, 1)
      }
      /**
       *  百分比使用的是中横线连接'-'
       *  默认的是使用下划线连接'_'
       */
      names = {
        default: firstName + unit + '_',
        percentage: firstName + unit + '-',
        ...unit === 'w' ? {
          vw: firstName + 'v' + unit + '_'
        } : {
          vh: firstName + 'v' + unit + '_'
        }
      }

      for (let key in names) {
        len = key === 'default' ? 720 : 100
        for (let i = 0; i <= len; i++) {
          if (key === 'default') {
            styleText += `.${names[key]}${i}{${typeNames[typeName]}:${i / 100}rem}`
          } else if (key === 'percentage') {
            styleText += `.${names[key]}${i}{${typeNames[typeName]}:${i}%}`
          } else if (key === 'vw' || key === 'vh') {
            styleText += `.${names[key]}${i}{${typeNames[typeName]}:${i}${key}}`
          }
        }
      }
    }
    document.body.innerHTML = styleText
    // 或者直接创建直接使用
    let s = document.createElement('style')
    s.setAttribute('type', 'text/css')
    s.innerHTML = styleText
    document.querySelector('head').appendChild(s)