谈谈css使用中遇到的的一些坑

今天早上，当我鼠标无意中移入某课网某一页面中的“扫码下载APP”的fixed图上，看到一张二维码从这个图的相对底部慢慢、慢慢的移上来，或者说：展开 时，我就知道，今天有事干了。。。

我大致分析了一下，欸，觉得挺简单的，然后兴冲冲地去编译器上噼里啪啦，然后，，，错了，（真的是一顿操作猛如虎，一看战绩…）结果和我的预期，完全不符！
这是预期展开一半的效果：

而在我一顿操作之下，把从上往下弄成了从下往上。。。

我辗转反侧，怎么才能从下往上呢？
请教了同工作室的一位学长，他说用jQuery的slideUp好像可以，但是本着“原生”的理念，我婉拒了学长的“好意”。
又回到原点想我的代码，写过 页面初始时顶部下滑广告 （类似京东那种）的朋友们都知道：我这种方法是用了原生JS 先判断图片宽高，然后设置“步长”，最后通过鼠标事件不停地改变框的宽高 的方法。
想到最后得出一个结论：这么做很难（或者说非常麻烦）将上下缩放改为下上缩放！不然你可以鼠标移入时同时加一个遮罩层，然后慢慢把遮罩层放上去！（呵呵）

正当疑惑，突然看到以前的一篇博客中的一句话：能用css的就不要用js！
仿佛突然看到了光明—— css 过渡！ 也由此开始了“报错”之旅。。。

当你div的宽度不够你一行文字完整表述时，对文字用line-height属性会导致多出一行的字体“跑到了”div框的外面！
猜测这个和div模型有关，但确实，你不能过度依赖浏览器的机制——对文字应手动换行，或者操作，比如：多出一行的用…代替。

display、visibility和opacity
书上经常会看到这么一句话：使用display:none;会导致元素不可见，且在页面上的位置也会随之消失（不占位）；而visibility只是设置元素不可见，依然在文档流中占有位置。

其实后一句话是不准确的表述：我们很容易理解为，它就相当于opacity:0;一样操控自如。

事实上，当你对元素设置了visibility:hidden;时，元素会带着他的对应事件一起“滚蛋”。虽然在文档流中占有位置，但是丝毫不影响其下或被其显示时遮挡的元素的操作！
明白这一点至关重要 —— 至少在本篇文章所用知识中是这样。

说一下我的思路：
在页面右边设置一个小框，是用于鼠标响应事件主题，对其设置一个子元素——是一个div，这个div要求在鼠标移入父元素之前和移出父元素之后消失不见。对这个div再有一个子元素——img，这个img也有要求：鼠标移入它的父元素的父元素时慢慢显示到框中并占满整个div，超出父元素div的部分看不见也不能操作。

（“过渡”显示到3/4时的样式）
这就好看多了。。。

<div id="mxc">
    快来扫码啦
    <div id="mm">
        <img id="mmxc" src="imag/qq.png">
    </div>
</div>

#mxc{
    position: fixed;
    width: 50px;
    height: 70px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: lightgrey;
    text-align: center;
    cursor: pointer;
}
#mxc #mm{
    position: absolute;
    width: 150px;
    height: 200px;
    top: -132px;
    left: -150px;
    visibility: hidden;
    overflow: hidden;
}
#mm #mmxc{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate(150px, 200px);
    opacity: 0;
    transition: all .3s;
}
#mxc:hover #mm{
    visibility: visible;
}
#mxc:hover #mm #mmxc{
    opacity: 1;
    transform: none;
}

感兴趣的读者可以自行试一下，将其中的 visibility 全部换成 display 相关代码，可以看看结果如何。

（我在此透漏一下：换过以后，第一次鼠标移入时有动画效果，但是无论刷新与否，第二次往后都不会再有动画效果，而是直接，很突兀的显示在页面视野中）

---

还有，当你一开始就使用visibility或者opacity时，怎么才能确保它没有显示之前被遮盖到的元素的点击事件不受影响呢？

pointer-events: none;

Tip：
pointer-events 这个属性用来指定是否为某个元素触发鼠标点击事件。这个属性主要用于 SVG，但是在 HTML 中也是可以用的，只不过可以取的值只有“auto”和“none”这两个，下来说下这两个取值的含义；
auto，pointer-events 属性默认的取值就是 auto，使用这个属性值的情况下，HTML 元素就是正常的触发点击事件，通常只有为了覆盖不同取值的时候才会使用这个值。
none，给元素用上这个属性值的话，这个元素就变成点不中的了，无论这个元素是什么样式，点击事件都会忽略它而去触发它底层元素的点击事件。