<style>
/* 设置元素隐藏显示
方法一:display
display:none 隐藏 隐藏时元素位置不在占用
display:block 显示
方法二:visibility:设置元素可见性
visibility:hidden 隐藏 隐藏时元素位置占用
visibility: visible 显示
方法三:改变元素的高度和overflow一起使用 */
div {
margin: 100px auto;
width: 100px;
height: 100px;
background-color: pink;
}
/* p {
隐藏
display: none;
显示
display: block;
} */
/* p {
隐藏
visibility: hidden;
显示
visibility: visible;
} */
p {
/* 设置高度为0 */
height: 0;
/* 溢出隐藏 */
overflow: hidden;
}
div:hover p{
/* 设置鼠标移入时显示 */
height: 20px;
}
</style>
</head>
<body>
<div>
<p>承后花,禀。</p>
</div>
</body>