某著名小白说过 ：世上本来到处都是坑，只要走的人多了，也就把坑都给埋了。该小白还说过：坑本身并不可怕，可怕的是踩了一次之后，还第二、第三次踩到了相同的坑。

所谓"坑"，主要是由于我们对某些知识点理解不够透彻，导致在应用的时出现了一些奇怪的问题。因为我们每个人，对于某个知识点的理解程度不一样，所以，有些坑我觉得真的很坑，但是你可能觉得一点都不坑，因为你早就对它了如指掌了。

这里列举的一些坑，都是我过去一年在项目中所遇到过的，并当时在笔记中记录下来的，现在稍加整理就形成了这篇博客，以供日后查阅。

不知不觉，开头又bb了这么多，还是赶紧进入正题哈。

1. 设置透明度（opacity）引起的惨案

之前做炉石盒子的天梯环境页面，地址是 炉石天梯环境 ，就在项目做得差不多的时候，准备上线了， QA 突然发现了如下的一个 bug:

有一个选择排序方式的下拉菜单，它的定位是 position: absolute，正常来说，它应该会覆盖在其他元素之上的，可是为什么 0.14% 反而会覆盖在它上面呢？ 在代码中找了好久，那个 0.14% 并没有设置 z-index属性，也没有 position： absolute 这样的东西，真是好郁闷哦。后来到 mdn 查文档才发现，原来是 opacity属性引起 的： opacity 属性值小于 1 的元素会创建新的层叠上下文 。因为当时我有个偷懒的做法，字体继承的颜色是 #666, 我想让 0.14% （天梯比率）颜色变浅一些，直接加了个 opacity: 0.6 ，导致了创建了新的层叠上下文，层级比下拉菜单高了，所以就覆盖在了上面。具体什么是层叠上下文，以及哪些属性会创建新的层叠上下文，这里也不介绍了有需要的可以参考一下 层叠上下文

虽然上面描述得已经很详细了，但是可能由于我的表达能力不太好，有些朋友还不是很明白我的意思，可以看一下这里的 demo 代码：

<div class="menu">   <div class="title">下拉菜单</div>   <div class="menu-list">     <div class="item">菜单1</div>     <div class="item">菜单2</div>     <div class="item">菜单3</div>   </div> </div> <div class="content">   我是半透明的文字，可以覆盖在下拉菜单之上哦~ </div> <style>   .menu {     position: relative;   }   .menu-list {     display: none;     position: absolute;     background: #ccc;   }   .menu:hover .menu-list {     display: block;   }   .content {     opacity: 0.6;   } </style>

将鼠标移动到下拉菜单上，就会发现文字会发生重叠了：

那这个坑有什么解决办法呢？最简单的就是下拉菜单添加个属性 z-index： 1 。另外，这里再啰嗦一下，就是z-index的值不要乱设置。以前刚刚接触前端时，会经常看一些视频教程，看到里面讲师动不动就设置个 z-index: 999 之类的特别大的数值。这是一个不好的习惯。张鑫旭老师在《CSS世界》一书中，提到了 不三原则，就是说一般情况下，z-index的值不要超过3，基本能满足大多数的需求了。

2. flex布局：子项溢出后无法查看全部内容

之前做漫画阅读器，因为漫画可能有长图片，也可能有短图片。长图片可以滚动查看，短图片就居中显示。所以，很自然会想到用 flex 布局来实现。简单的代码如下：

<div class="app">   <img src="https://m.tuniucdn.com/fb2/t1/G1/M00/F1/51/Cii9EFkAaZ-IRgGNAATB18ldk0UAAJzuQN-p1cABMHv15.jpeg" alt=""> 
                        
关键字：