依然6年前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>块元素和行内块元素相互转换</title>
<style type="text/css">
p{display:inline;width: 200px;height: 200px;background-color: #CCC}
b{display:block;}
/*div{display:inline-block;height: 30px; width: 400px;background-color: pink}*/
.box{width: 100px;height: 40px;background-color: #ccc;line-height: 40px;text-align: center;}
.main{width: 100px;height: 100px;background-color: pink;line-height: 100px;text-align: center;display:none;}
.box:hover .main{display:block;}
</style>
</head>
<body>
<p>块级元素转换为行内元素</p><span>123</span>
<b>行内元素转换为块级元素</b>
<div>将标签转换为行内块元素</div><span>123</span>
<div class="box">导航
<div class="main">小菜单
</div>
</div>
</body>
</html>
0
