常用的CSS样式和兼容问题解决常用的CSS样式和兼容问题解决设置1px边框ios点击事件不生效块级元素水平居中的方法设置

常用的CSS样式和兼容问题解决

设置1px边框

  .mydiv {
    position: relative;
  }
  .mydiv: before {
    content: '';
    pointer-events: none;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border-bottom: 1px solid #d2d2d2;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform-origin: 0 0;
    -webkit-transform: 0 0;
  }

ios点击事件不生效

 {
   custor: pointer;
 }

块级元素水平居中的方法

设置{margin: 0 auto},如下代码

  <style>
    .parent1 {
      width: 100%;
      height: 100px;
    }
    .child1 {
      width: 100px;
      margin: 0 auto;
    }
  </style>
  <div class="parent1">
    <div class="child1"> 设置margin </div>
  </div>

flex布局

  <style>
    .parent2 {
      display: flex;
      justify-content: center;
      width: 100%;
      height: 100px;
    }
    .child2 {
      width: 100px;
    }
  </style>
  <div class="parent2">
    <div class="child2"> flex布局 </div>
  </div>

设置父元素text-align，当前元素为行内元素

  <style>
    .parent3 {
      width: 100%;
      height: 100px;
      text-align: center;
    }
    .child3 {
      display: inline-block;
      width: 100px;
    }
  </style>
  <div class="parent3">
    <div class="child1"> 设置父元素text-align </div>
  </div>

定位+transform

  <style>
    .parent4 {
      position: relative;
      width: 100%;
      height: 100px;
    }
    .child4 {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
  </style>
  <div class="parent4">
    <div class="child4"> 定位+transform </div>
  </div>

grid布局

  <style>
    .parent5 {
      display: grid;
      width: 100%;
      height: 100px;
    }
    .child5 {
      justify-self: center;
    }
  </style>
  <div class="parent5">
    <div class="child5"> grid布局 </div>
  </div>

垂直居中的几种方案

定位+transform

  <style>
    .parent1 {
      position: relative;
      width: 100%;
      height: 300px;
      background: #3c3c3c;
    }
    .child1 {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 100px;
      width: 100%;
      background: green;
    }
  </style>
  <div class="box parent1">
    <div class="child1">position+transform</div>
  </div>

tabel-cell布局

  <style>
    .parent2 {
      display: table-cell;
      vertical-align: middle;
      width: 375px;
      height: 300px;
      background: #3c3c3c;
    }
    .child2 {
      display: inline-block;
      height: 100px;
      width: 100%;
      background: green;
    }
  </style>
  <div class="box parent2">
    <div class="child2">table布局</div>
  </div>

flex布局

  <style>
    .parent3 {
      display: flex;
      width: 100%;
      height: 300px;
      background: #3c3c3c;
      align-items: center;
    }
    .child3 {
      height: 100px;
      width: 100%;
      background: green;
    }
  </style>
  <div class="box parent3">
    <div class="child3">flex布局</div>
  </div>

grid 布局

  <style>
    .parent4 {
        display: grid;
        width: 100%;
        height: 300px;
        background: #3c3c3c;
    }
    .child4 {
        height: 100px;
        width: 100%;
        background: green;
        align-self: center;
    }
  </style>
  <div class="box parent4">
    <div class="child4">grid布局</div>
  </div>

水平垂直居中的5种方案

定位+transform

  <style>
    .parent1 {
      position: relative;
      width: 100%;
      height: 150px;
    }
    .child1 {
      position: absiolute;
      top: 50%;
      left: 50%；
      width: 100px;
      height: 100px;
      transform: translate(-50%, -50%);
    }
  </style>
  <div class="parent1">
    <div class="child1">定位+transform</div>
  </div>

定位+margin

  <style>
    .parent2 {
      position: relative;
      width: 100%;
      height: 150px;
    }
    .child2 {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100px;
      height: 100px;
      margin: auto;
    }
  </style>
  <div class="parent2">
    <div class="child2">定位+margin</div>
  <div>

table-cell布局

  <style>
    .parent3{
      display: table-cell;
      width: 375px;
      height: 150px;
      vertical-align: center;
    }
    .child3 {
      width: 50%;
      height: 100px;
      margin: 0 auto;
    }
  </style>
  <div class="parent3">
    <div class="child3>tabel-cell布局</div>
  </div>

flex布局

  <style>
    .parent4{
      display: flex;
      width: 100%;
      height: 150px;
      justify-content: center;
      align-items: center;
    }
    .child4 {
      width: 100px;
      height: 100px;
    }
  </style>
  <div class="parent4">
    <div class="child4>flex布局</div>
  </div>

grid布局

<style>
.parent5 {
  display: grid;
  width: 100%;
  height: 150px;
}
.child5 {
  justify-self: center;
  align-self: center;
  width: 100px;
  heght: 100px;
}

CSS3实现loading效果请参考

虚线效果

<style>
  .dotted-line{
    border: 1px dashed transparent;
    background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em);
  }
</style>

文本超出显示省略号

单行

  <style>
    .ellipsis{
      width: 500px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  </style>

多行

  <style>
    .multiline-ellipsis {
      display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示
      word-break: break-all;
      -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式
      -webkit-line-clamp: 4; //需要显示的行数
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>