元素类型分类
- 块元素 默认有标识 display:block/list-item
- 行内(内联)元素 默认标识 display:inline span行内元素可设置左右边距不可设置上下边距
- 行内块元素 inline-block
元素类型互相转换
案例情景，网站首页横向模块，将链接转换成行内块展示
... a{
background-color: black;
color: white;
text-decoration: none; /*取消链接的下划线*/
display: inline-block; /*转换成行内块*/
/*链接本身是行内元素，加了padding 也等于多了个背景而已，当下一
行再有文字时会发现覆盖在了背景上，只是隔行文字而已，加了行内块
设置--代表算上背景是一个完整的块，再有内容也是在下方*/
padding: 10px;
}
a:hover{
background-color: red;
}
.home{
background-color: red;
}
</style>
</head>
<body>
<img src="./img/bpic.png" alt="">
<p>ghjkghjklbnklbnm,</p> <br><br>
<a href="" class="home">首页</a>
<a href="">国际</a>
<a href="">军事</a>
<a href="">教育</a>
<a href="">科技</a>
元素类型隐藏
案例情景:类似某宝搜索页，当鼠标落到对应模块，其子目录才会显示，其余情况会隐藏
...
.hide{
display: none; /*隐藏*/
}
.box:hover ul{
display: block; /* 设置再次显示*/
}
</style>
</head>
<body>
<div class="box">
军事
<ul class="hide">
<li>1111111</li>
<li>2222222</li>
<li>3333333</li>
</ul>
</div>
