css面试题：css隐藏元素的方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了css面试题：css隐藏元素的方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

css隐藏元素的方式

visiblity:hidden

#father {
  visibility: hidden;
  width: 300px;
  height: 300px;
  background-color: pink;
}

#son {
  /* visibility:visible; */ /* 子元素设置该属性后可以改变自身显示状态*/
  width: 100px;
  height: 100px;
  background-color: green;
}

特点：父元素设置该属性时，子元素同样会生效，但可以通过visibility:visible;修改子元素的显示效果；

display:none

#father {
  display: none;
  width: 300px;
  height: 300px;
  background-color: pink;
}

#son {
  width: 100px;
  height: 100px;
  background-color: green;
}

特点：作用是从dom中移除节点，所以子元素也会被移除掉，

opacity:0

#father {
  opacity: 0;
  width: 300px;
  height: 300px;
  background-color: pink;
}

#son {
  opacity: 1;
  width: 100px;
  height: 100px;
  background-color: green;
}

该方法通过改变元素透明度来实现隐藏，但需要注意父元素设置为opacity:0后，子元素会继承父元素该属性的效果，即便子元素设置opacity:1;也无法显示自身。

hidden属性隐藏元素

<div hidden> </div>

添加 hidden 属性并不会从文档流中移除该元素，而是将其隐藏起来。因此，被隐藏的元素仍然会占据空间，并且可能会影响布局文章来源地址https://www.toymoban.com/news/detail-540559.html

position:absolute

#father {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #fab;
}

#son {
  position: absolute;
  left: -200%;
  width: 100px;
  height: 100px;
  background-color: black;
}

transform: scale(0);

#ele{
	transform:scale(0);
	// ...
}

max-height:0

#father {
  width: 300px;
  height: 300px;
  background-color: pink;
}

#son {
  width: 100px;
  height: 100px;
  max-height:0;
  background-color: green;
}