1. 块级元素
单独占一行，高度不设置默认为0，如果有内容，高度会被内容撑开。
display:block
2. 行内元素
一行可以有多个，不能设置宽高。
display:inline
3. 行内块级元素
一行内可以显示多个，可以设置宽高。
display:inline-block
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width:100px;
height: 30px;
background-color: blue;
color: red;
display: inline-block;
text-align: center;
}
a{
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<div><a href="#">导航1</a></div>
<div><a href="#">导航2</a></div>
<div><a href="#">导航3</a></div>
<div><a href="#">导航4</a></div>
</body>
</html>