实践技巧之CSS设置后可以当此元素不存在，在工作中发现很多人不知道此属性，再解释下：一个元素定位覆盖在另一个元素之上，

实践技巧之CSS

1 穿透样式

设置后可以当此元素不存在，在工作中发现很多人不知道此属性，再解释下：一个元素定位覆盖在另一个元素之上，上面的元素设置此属性后，上面元素的事件都会失效，并且可以点击到下面元素，触发下面元素事件，此属性在工作中用的不多，但真用到时，非它莫属。

.events-none {
  pointer-events: none;
}

实践：在一个canvas地图上使其从中间亮到边缘暗。可以将一个元素设置透明度径向渐变定位覆盖在地图上并设置穿透样式，这样中间亮边缘暗，并且不影响地图上的事件

2 选不中样式

设置后可以让鼠标选不中元素中的东西。此样式实践最直接的感觉是可以提升用户体验，比如做一个canvas项目，画板上用div定义了一些文字说明，这时div在画板上面，在视觉上他们应该是一个整体，但当用鼠标在上面点击移动时很有可能就选中的div而画板没有选中，不但可以看出不是一个整体还影响视觉体验

.user-select-none {
  user-select:none;
}

增加用户体验，减少误操作

3 高度最大最小值

设置最大高最小高，这属性在实践中用的特别多，经常和overflow-y: auto配置使用，如： max-height: 300px; overflow-y: auto; 这里表示元素内容高大300px时会出现滚动条，这样在不知内容情况下，这样自适应的展示，用户体验会很好。还有这属性还可以用于动画，这样就可以做自适应内容展开和收起

.min-max-height {
   min-height:30px;
   max-height: 300px;
}

这属性还可以用于动画，可以做到自适应内容展开和收起

4 文本溢出处理

// 单行溢出
.ellipsis {
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 }
 // 多行很少用，即使遇到基本也是别的方式展示。

没什么可以说的

5 垂直居中

这个根据情况有很多种实现方式，常用的 flex 就够了，但其它的方式了解后也可以更深入了解css属性

.flex {
 display: flex;
  justify-content: center;
 align-items: center;
 }
 // 其它方式就不列举了，推荐使用flex;

没什么说的

6 整屏三栏布局

三个div 上中下，上和下固定高度，中间高度由内容决定，中间内容不足，撑满高，整屏显示，中间内容过量，无法整屏显示时出现滚动条，下面的div向下移

<body  style="min-height: 100vh; display: flex; flex-direction: column; margin: 0;">
   <div style="background-color: red; height: 100px;">
   </div>
   <div style="flex: 1">内容少时 整屏显示， 内容多时出现滚动条</div>
   <div style="background-color: red; height: 100px;"></div>
</body>

如果要中间的内容垂直居中，用元素包起里面的内容，给父元素加flex垂直居中就行了

7 动画延时属性妙用

这个属性可以设置负值，代表已发生了多少时间，比如animation-delay:-2s代表一进页面动画就跳过2s，直接展示的2后的动画,主要是提升用户体验

.animation-delay {
   animation-delay:-2s
 }

要是一个冒很多泡泡的动画，动画一开始全是从低下冒起来，要是设个动画负延时，这时第一眼看到动画时泡泡就充满了屏

8 不换行，自适应文字

如：一行三个内容文字不换行展示，两边内容文字撑，中间自适应填满，中间内容多了省略处理;这个在工作中看到直接就给中间的给了定宽，

<div  style="display: flex">
   <span>头部内容</span>
   <span title="把内容复制到这里" class="ellipsis" style="flex: 1">中间内容，溢出样式看上面</span>
   <span >尾部内容</span>
</div>

记得给带有省略样式的元素加上title属性