1. css中的rgba()和opcity的区别

• rgba()中a指的是透明度，不会被子元素继承<=>opcity的透明度会被子元素继承。因此有时使用rgba()比opcity效果好。
• rgba()可以设置在border-color,color,background-color,text-shadow,box-shadow

2.display:none 和 visibility:hidden 的区别

display:none 和 visibility:hidden 都是隐藏元素的属性
普通版

• display:none 隐藏的元素不占据任何空间。

• visibility:hidden 隐藏的元素空间依旧保留。
  进阶版

• display与元素的显隐

  • display:none:该元素及其后代元素全部都被隐藏，可以认为当前元素从dom文档中‘消失’了，当然不是真正的消失，这个节点依旧存在于文档流中。

    • 扩展：Vue中的 v-show 对应的是css的display值。而v-if则是彻底删除节点。

  • 一般情况下，当一个元素被设置为display:none时，该元素无法被点击，同时占据的空间消失。

    • 特例

    <form>
        <input id="hide" type="submit" style="display:none"/>
        <label for="hide">点击触发提交</label>
    </form>
    

    表单元素确实无法被点击，但由于label绑定了id为“hide”的元素，因此点击label标签依旧可以触发click事件，也就是说表单元素的点击事件依旧被保留，并且可以通过其他手段触发。

  • display显隐控制并不影响CSS3 animation动画的实现。

  • 影响transition的过渡动画效果，因此如果要用到transition的话，建议使用visibility。

  • 影响CSS的计数队列。举个例子，10个列表从1开始计数，当第二个列表的display置为none，就会导致计数器忽略当前元素，原来的第三个列表则计数为2。

• visibility与元素的显隐

  • 父元素设置了visibility:hidden后，子元素也隐藏的深层原因是子元素会继承父元素的visibility:hidden。因此，当我们需要隐藏父元素而又要显示部分子元素的时候，只需要把子元素继承的visibility改成默认的visible属性即可，这一点在被设置了display:none的元素上，根本不可能实现。
  • visibility的元素的子元素只是单纯的继承了父元素的visibility，因此在CSS计数方面不会有任何影响，这点和display:none也有所不同。同时transition过渡是支持visibility属性的，因此在使用过渡动画的时候，想让元素实现淡入淡出效果来控制显隐的可以使用visibility:hidden。

参考 : [https://blog.csdn.net/dkr380205984/article/details/86222101]