【css】css隐藏元素

  • display:none:可以隐藏元素。该元素将被隐藏,并且页面将显示为好像该元素不在其中。
  • visibility:hidden: 可以隐藏元素。但是,该元素仍将占用与之前相同的空间。元素将被隐藏,但仍会影响布局。
    代码:
DOCTYPE html>
<html>
<head>
<style>
#display-content {
  display: inline-block;
  display: none;
  background-color:#e35e61;
  width:50px;
  height:50px;
}
#hidden-content {
  display: inline-block;
   visibility: hidden;
  background-color:#e35e61;
  width:50px;
  height:50px;
}
#content {
  background-color:#e35e61;
  display: inline-block;
  width:50px;
  height:50px;
}
style>
head>
<body>
<span id = "display-content">dfgspan>
<span id = "hidden-content">adsfspan>
<sapn id= "content">sdfgsapn>

body>
html>

在这里插入图片描述
使用visibility: hidden元素隐藏了,但是位置还占着。

你可能感兴趣的:(前端,css,前端,javascript)