一、 white-space: nowrap —— 阻止文本换行。

实例讲解：

如本站“建站须知”栏目页，这部分用的弹性盒布局，考虑到右边的分类可能会很多，所以左边给的宽度小。这就导致面包屑导航自动换行，这种情况，white-space: nowrap就很好用。

二、 pointer-events: none —— 阻止鼠标事件

实例讲解：

如图，是商城的放大镜功能，目标效果是，鼠标添加mouseleave事件离开主图时，放大图片消失。

但因为html结构，大图div是主图的子节点，导致功能无法实现。

<div class="middle">

    // 主图

    <img src="./images/1.jpg" alt="">

    <div class="mask"></div>

    // 大图

     <div class="big"></div>

</div>

在不改变html结构的情况下，我们给大图添加pointer-events: none属性，就能完美解决。

.big {

    pointer-events: none;

}

三、 vertical-align —— 垂直对齐

实例讲解：