在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。
display 显示
display 设置或检索对象是否及如何显示。
特点: 隐藏之后,不再保留位置。
例如:
<style> .div1{ background-color: red; 103px; height: 203px; display: none; } .div2{ background-color: rebeccapurple; height: 120px; 230px; } </style> </head> <body> <div class="div1"></div> <div class="div2"></div>
visibility 可见性
设置或检索是否显示对象。
visible : 对象可视
hidden : 对象隐藏
特点: 隐藏之后,继续保留原有位置。(停职留薪)
<title>Title</title>
<style>
.div1{
background-color: red;
103px;
height: 203px;
visibility: hidden;
}
.div2{
background-color: rebeccapurple;
height: 120px;
230px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
visible : 不剪切内容也不添加滚动条。
auto : 超出自动显示滚动条,不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll : 不管超出内容否,总是显示滚动条
