谈谈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 相关代码，可以看看结果如何。

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

pointer-events: none;