将高度设置为0 并隐藏滚动条 适合动画效果
.box2 {
width: 100px;
height: 0;
overflow: hidden;
transition: height 0.3s,background-color 0.3s; //动画效果
}
.box1:hover .box2 {
height: 100px;
width: 100px;
background: red;
}
隐藏像素不占位置
//隐藏元素 不占位置
.box1 {
width:100px;
height:100px;
background:red;
display:none;
}
占据位置的隐藏元素
.box2 {
height: 100px;
width: 100px;
background: red;
visibility: hidden;
}