占据空间页面渲染
visibility: hidden;(直接隐藏,占据空间)
opacity: 0; (透明度为0,直接透明)
margin-left: -100%;
不占据空间 不进行页面渲染
display:none;
width:0 height :0 overflow:hidden;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>隐藏</title>
<style>
.father {
width: 0px;
height: 0px;
background-color: brown;
/* 元素隐藏的方法 */
/* 占据地方的 */
/* visibility: hidden; */
/* opacity: 0; */
/* margin-left: -100%; */
/* 不占据位置的 */
/* display: none; */
/* 溢出隐藏 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="father">666</div>
</body>
</html>