CSS隐藏元素的几种方法，以及他们之间的区别，opacity/visibility/display/rgba函数对比

文章目录

• • 概要
  • display
  • visibility
  • opacity
  • background
  • 比对

概要

在网页设计中，我们经常需要将一个元素隐藏或者显示，而需求不同时，不同的隐藏方式也会带来不同的隐藏效果，我们来看看集中隐藏方式的不同。

display

• 浏览器不会生成属性为display: none;的元素。
• display:none;不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样。
• display: none;不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。
• transition无效

display:node;//隐藏
display:block;//显示

visibility

• 元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式。
<