积少成多的感觉。

  1. 一个很常见的问题，列表横向排列的时候，我们需要给每个列表设置右边距，通常最后一个是不必要设置的，如果网站需要兼容到IE8等不支持:last-child之类的选择器时，其实可以这样解决：ul列表可以设置宽度长一点，然后给ul的父元素设置overflow:hidden，这样每个li设置margin：right超出也无所谓，就不要再给最后一个li设置右边距为0

  2. 用box-shadow画边框
    边框毫无疑问用border来实现就行，如果需要再加一层呢？对的，用box-shadow，box-shadow第四个参数可以让阴影的半径增大或减小，可以将前三个参数设为0，就不会呈现出阴影效果而是边框效果

    See the Pen GNBLWo by lonica (@lonica) on CodePen.



    不过需要注意的是，box-shadow第四个参数长度是从边框外开始计算的，如果是两层box-shadow的话，第二层的值必须大于第一层才能看的到。并且，它不是边框，只是个看起来像边框的阴影。所以相邻的元素会被box-shadow部分遮挡住。

  3. 一个兼容多移动端的尺寸设置问题，可以在不同的媒体查询条件下针对不同尺寸的屏幕给根元素<html>设置不同的font-size值，然后长度单位就都用rem就好解决了。

  4. 用rem来取代em，em是相对父元素的字体来计算的，1em = 父元素的font-size，因为字体会变，em不利于整体性，容易混乱。rem是相对于 root element，即根元素<html>的font-size大小来计算的，使用rem单位可以保持整体一致。
    因为浏览器默认1rem = 16px，为了方便计算，通常会把根元素的字体设置为62.5%，这样根元素的字体就是10px，即1rem = 10px，所以16px = 1.6rem，直观很多

    html {
 font-size: 62.5%;
}

  5. 有时候想在伪元素上出现指定的文字怎么办，办法总是有的，伪元素的content内容可以来自元素的属性，使用attr()来获取到

    <div id="box" data-title="hello">hello</div>
<a href="https://www.google.com/">google</a>

    // 将data-title的内容作为content
#box::after {
 content: attr(data-title);
}
// 将href的内容作为content
a::after {
 content: attr(href);
}

  6. 大图片自适应小屏幕，使用min-width来解决

    img {
 min-width: 100%;
}

    需要兼容IE6的话，IE6下使用 img {width: 100%}

  7. 文本溢出用省略号显示

    p {
 text-overflow: ellipsis; 
 overflow: hidden; 
 white-space: nowrap; 
}

  8. 阻止鼠标点击事件，阻止hover和active状态的变化触发的事件，ie11+可支持

    div {
 pointer-events：none;
}

  9. 实现背景半透明，文字不透明
    opacity会使得所有元素变透明，包括文字，如果需要实现文字不透明，可以在文字部分使用定位，定位到背景上面。