<!DOCTYPE html>
<html>
<head>
<肉文字セット="utf-8">
<title>ブロックレベル要素とインライン要素を変換する</title>
<link rel="ショートカット アイコン" type="image/x-icon" href="images/favicon . ico">
<style type="text/css">
p{display:inline;width:200px;height:200px;backgroud-color:#ccc; }
b{表示:ブロック;}
/*div{表示:インラインブロック;高さ:30ピクセル;幅:400ピクセル;背景色:ピンク;}*/
.box{幅:100px;高さ:40px;背景色:#ccc;行の高さ:40px;テキスト配置:センター;}
.main {幅:100px;高さ:100px;背景色:ピンク;行の高さ:100px;テキスト整列:センター;表示:なし;}
.box:hover .main{display:block; }
</style>
</head>
<body>
<p>ブロックレベル要素をインライン要素に変換する</p><span>123</span>
<b>インライン要素は主にブロックレベルの要素です</b>
<div>インライン用にマークアップを変換しますブロック要素</div><span>123</span>
<div class="box">ナビゲーション</div>
<div class="main" >スモールメニュー</div>
</body>
</html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
<div class="box">ナビゲーション</div>
<div class="main">小さなメニュー</div>
.box:hover .main {}
メイン内の説明。 .box
＆lt; div class = "box"＆gt;navigation