CSS 十个小技巧

1. pointer-events: none;

如果全屏加水印的时候，可以简单的使用 fixed 定位一块全尺寸的透明蒙版去实现，但是同样会出现一个问题就是这个蒙版会阻塞页面原有的点击事件，这时候只要给它加上 pointer-events: none; 属性便可轻松解决

<style>
  .warp {
    position: relative;
    overflow: hidden;
  }
  .watermark-mask {
    width: 700%;
    height: 700%;
    top: -300%;
    left: -300%;
    transform: rotate(-40deg);
    transform-origin: 50% 50%;
    /* 此处为了掩饰用了 absolute，实际应该 fixed */
    position: absolute;
    pointer-events: none;
  }
</style>

<div class="warp">
    <div class="content">
      <p>假设这里是内容</p>
      <button onclick="alert('点击了 ')">点击这里</button>
      <p>假设这里是内容</p>
      <p>假设这里是内容</p>
      <p>假设这里是内容</p>
      <p>假设这里是内容</p>
      <p>假设这里是内容</p>
      <p>假设这里是内容</p>
      <p>假设这里是内容</p>
      <p>假设这里是内容</p>
    </div>
    <div class="watermark-mask" id="watermark-mask"></div>
  </div>

  <script>
    function addWaterMarker(str) {
      let can = document.createElement('canvas')
      const mask = document.querySelector('#watermark-mask')
      const fontSize = 18 // 字体大小
      const vMargin = 5 * fontSize
      const xMargin = 300
      mask.appendChild(can)
      can.width = 600 //画布的宽
      can.height = 2 * (vMargin + fontSize) //画布的高度
      can.style.display = 'none'
      var cans = can.getContext('2d')
      cans.font = `${fontSize}px Microsoft YaHei` //画布里面文字的字体
      cans.fillStyle = "rgba(0, 0, 0, 0.20)" //画布里面文字的颜色
      cans.fillText(str, 0, fontSize * 2 + vMargin * 3 / 2) //画布里面文字的间距比例
      cans.fillText(str, xMargin, fontSize * 2 + vMargin * 3 / 2) //画布里面文字的间距比例
      cans.fillText(str, xMargin / 2, fontSize + vMargin / 2) //画布里面文字的间距比例
      cans.fillText(str, xMargin / 2 - xMargin, fontSize + vMargin / 2) //画布里面文字的间距比例
      cans.fillText(str, xMargin / 2 + xMargin, fontSize + vMargin / 2) //画布里面文字的间距比例
      mask.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")" //把画布插入到mask中
    }
    
    const time = new Date()
    const formatObj = {
      y: time.getFullYear(),
      m: time.getMonth() + 1,
      d: time.getDate(),
      h: time.getHours(),
      i: time.getMinutes(),
      s: time.getSeconds()
    }
    const fillZero = (field) => {
      const value = formatObj[field]
      if (value < 10) {
        return '0' + value
      } else {
        return value
      }
    }
    //调用这个方法即可
    const str = `测试  ${fillZero('y')}-${fillZero('m')}-${fillZero('d')} ${fillZero('h')}:${fillZero('i')}:${fillZero('s')}`
    addWaterMarker(str)
  </script>  

测试

2. webkit-tap-highlight-color

这是 CSS3 一个鲜为人知的属性，这个属性只用于 iOS (移动开发当中个人认为最容易出兼容性问题的就是 IOS)。当你点击一个链接或者通过 Javascript 定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置-webkit-tap-highlight-color 为任何颜色。在大部分情况这个属性是无关痛痒的。但是在万变的需求当中总是要痛的，举个例子在移动端开发当中一个过小可被点击图标是挺常见的事情，通常我们会为了用户能够更好的点击到它可用一个稍微大一些透明 div 盖在上方来接收点击，这种增加用户点击热区的范围的方法在移动端页面开发是非常实用的，这时候 webkit-tap-highlight-color 的默认半透明灰色背景会带来很不好的体验，建议全局设置

*{webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-appearance:none}

这是 CSS3 一种常用的过渡动画属性，也是较为简单方便的一种，你甚至可以添加一个.trasition_3s{-webkit-transition:.3s;transition:.3s}这样的类，在想要用的地方为所欲为。比如 hover 效果过渡，长宽变化过渡，淡入淡出...只需要简简单单加上一个类 trasition_3s 就能够得到不错的效果。这里可以注意一下细节：

• transition-property 规定设置过渡效果的 CSS 属性的名称
• transition-duration 规定完成过渡效果需要多少秒或毫秒
• transition-timing-function 规定速度效果的速度曲线
• transition-delay 定义过渡效果何时开始

4. flex:0 flex:1 flex:2 实战运用

当一个页面自身高度不够高的时候，会导致整个网页的高度小于浏览器的高度，虽然不影响使用以及功能，不过看着就不是很好看,当然也有人想了我把中间设置一个固定高度网页撑起来呢，很明显用户的窗口高度不是我们能控制的除非你用 js 去计算不然很难计算出中间的高度需要多少最为合适。那用 CSS 的 calc 属性来定义高度呢？实际开发当中我们会遇到各种奇怪的问题，比如头部或者底部的高度恰巧就变化了呢? calc 属性依旧不能带来最好的体验？可以巧妙的使用 flex 布局来解决，具体方法如下：

<style>
  * {
    padding: 0;
    margin: 0px;
  }
  .bg_000 {
    background: #000;
  }
  .h50 {
    height: 50px;
    cursor: pointer;
    transition: .3s;
  }
  .flex {
    display: flex;
  }
  .flex_column {
    flex-direction: column;
  }
  .flex1 {
    flex: 1;
  }
  .h50:hover {
    height: 100px;
  }
  .h50:active {
    height: 100px;
  }
</style>
<div class="flex flex_column" style="min-height:100vh">
  <div class="h50 bg_000"></div>
  <div class="flex1"></div>
  <div class="h50 bg_000"></div>
</div>

5. background-size contain && cover

用户头像的尺寸尚未统一有横着的长方形有竖着的长方形，列表却需要用统一大小圆形遍历用户头像。这个需求如果用 JS 做会相当复杂，但是 CSS 中 background-size 可以轻松解决这个需求

cover：图片宽高比不变、铺满整个容器的宽高，而图片多出的部分则会被截掉；
contain:图片自身的宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域

<style>
  .portrait {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: url('https://dummyimage.com/320x180/0388e3&text=320x180') center center;
    background-size: cover;
  }
</style>
<div class="portrait"></div>

cover contain

6.position: sticky

position 定位大家熟悉的 relative、fixed、absolute 这里就不过多介绍了，这里介绍的一个黑科技 sticky。先简单介绍一下它的特点：

• 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置

• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。亦即如果你设置了 top: 50px，那么在 sticky 元素到达距离相对定位的元素顶部 50px 的位置时固定，不再向上移动

• 元素固定的相对偏移是相对于离它最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于 viewport 来计算元素的偏移量这个值

  在 PC 上面对于极少部分的兼容性并不算特别理想，但是对于目前大部分移动设备都是适用，在各种电商详情页（拥有过长的 TAB 页）上这样需求非常常见，下面写个例子：

<body style="height:10000px">
  <!-- 滚动滚动条试试？ -->
  <p>占位</p>
  <p>占位</p>
  <p>占位</p>
  <div style="position:sticky; top: 0px;background:rgba(0, 0, 0, 0.2)">
    sticky
  </div>
  <p>占位</p>
  <p>占位</p>
  <p>占位</p>
  <p>占位</p>
  <p>占位</p>
  <p>占位</p>
  <p>占位</p>
</body>

7. -webkit-line-clamp

对于过长的当行文字添加.ellipsis{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}这样的样式就可以实现文字过长用省略号代替，这里注意一点三个属性缺一不可，通常我也单独会在通用样式表里面添加这样的样式，若需使用直接标签新增 ellipsis 类即可。但是还是有那种多行简介超过 2 行的文字出现省略号代替的情况，这时候就需要用到-webkit-line-clamp 这样的属性，可以轻松解决

<style>
  .ellipsis2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off; */
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-wrap: break-word;
    word-break: break-all;
  }
</style>
<div class="ellipsis2" style="width: 100px">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

css多行文本超出显示省略号无效解决方法 /*! autoprefixer: off; */ 如上

8.小于 12px 的字体

按理说设计方面页面最小的字体就是 12px，浏览器所能够支持的最小字体大小也是 12px,但是在脑洞大开的产品经理眼里一起皆有可能，确确实实有的时候会用到小于 12px 的文字，两种解决方式第一直接用图片，第二使用 transform:scale(0.9,0.9)，但是这里需要注意一点的时候缩放后的换行布局排版需要格外的注意，当然大部分情况可以通过设置transform-origin轻松解决

9.CSS实现毛玻璃导航

IOS系统常见的毛玻璃特效看起来很舒服，其实H5实现起来也很方便,主要使用backdrop-filter (opens new window)实现，核心代码如下

  .navbar, .sidebar {
     backdrop-filter: blur(4px);
     -webkit-backdrop-filter: blur(4px);
   }

10.CSS动画性能优化will-change

chrome Rendering里面 FPS meter勾上即可观察,尝试删除will-change会出现明显低 fps 情况,加了之后明显相对稳定（说实话区别不是特别大，可能新属性支持不是特别好，反正加上就好了）
如果机器过好可以尝试缩短 transition 时间

切记请勿乱用，最好可以利用父标签 hover 伪类动态添加，更不能全局添加此属性

<style>
    .box{
        width: 50px;
        height: 80px;
        border: 1px solid;
        opacity: 1;
        transition: .2s;
        cursor: pointer;
        background: url(https://dummyimage.com/320x180/0388e3&text=320x180);
        background-size: cover;
    }
    .box:hover{
        will-change: height, opacity;
    }
    .box:active{
        width: 320px;
        height: 180px;
        opacity: .5;
    }
</style>
<div class="box"></div>

开启硬件加速的方法还有 transform: translateZ(0);

在 Chrome and Safari 中，当我们使用 CSS transforms 或者 animations 时可能会有页面闪烁的效果，下面的代码可以修复此情况：

{
  backface-visibility: hidden;
  perspective: 1000;
}