css隐藏元素的方法
display
不占据页面布局,子元素继承
Visibility
占据页面布局,子元素不继承(可通过visibility: visible,让子元素显示)
Opacity
占据页面布局,子元素不能显示
Position
通过定位移出可视区域,子元素可显示
<style>
.box{
width: 300px;
height: 300px;
background-color: aqua;
/* display: none; */
/* visibility: hidden; */
opacity: 0;
}
.content{
width: 100px;
height: 100px;
background-color: darkorange;
/* 不显示 */
/* display: block; */
/* 显示 */
/* visibility: visible; */
/* 不显示 */
opacity: 1;
}
</style>
<body>
<div class="box">
<div class="content">
4345
</div>
</div>
</body>
<script>