React 工作踩坑总结1

1、如何让被遮挡层可以进行事件点击（纯CSS方法）

项目中有一个图片挡住一列文本的点击事件，本来想的是把层级提高，但是提高层级后，页面往上滑后，字又会浮到图片上面，或者是写个函数去判断字体到底部的距离，然后根据距离去调整这个层级关系，但是这个有点麻烦

最后经过查阅资料，可以通过css直接调整：

外层（被遮挡的层）{
pointer-events: none;
}

内层（要发生事件的层）{
pointer-events: auto;
}

取值none：元素永远不会成为鼠标事件的target

取值auto：与pointer-events属性未指定时的表现效果相同（即将元素恢复成为鼠标事件的target）

2、css控制页面文字不能被选中      user-select:none;

现象：html中可能有些地方不想让用户复制文字，或是用a标签做了个点击按钮，点快的时候文字会被选中，很丑，这个时候可以使用下面的方案禁止文字选中。

原因：鼠标点快了文字会被选中。

解决方案：不同的浏览器设置的内容不一样，user-select不是一个W3C的标准，浏览器的支持不完成，需要对不同的浏览器进行调整。

​
body{

-moz-user-select:none;/火狐/

-webkit-user-select:none;/webkit浏览器/

-ms-user-select:none;/IE10/

-khtml-user-select:none;/早期浏览器/

user-select:none;

}

​

3、解决flex布局space-between最后一行没有左对齐的问题

在最后一行，留下一个宽度一样的占位盒子

.main:after { content: ""; width: 100px; }

flex布局2个p标签垂直居中：

display: flex;
flex-di