1.概述
2.文档流定位：从上到下，从左到右
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;/* 去掉默认样式*/
}
#nav{
width: 300px;
margin: 100px auto;/*自动居中*/
font-size: 0; /* 去掉导航之间的空隙*/
}
a{
display: inline-block;/*修改a的定位方式*/
width: 80px;
height: 30px;
font-size: 14px;
text-align: center;
line-height: 30px;/*行高 垂直居中*/
text-decoration: none;/* 去掉超链接的下划线*/
border-bottom: 1px solid #ccc;/* 设置底部边框的样式*/
}
a:hover{
color: white;
background-color: #ccc;
border: 1px solid;
border-top-color: orange;
border-right-color: orange;
border-left-color: orange;
}
</style>
</head>
<body>
<div id="nav">
<a href="#">链接1</a>
<a href="#">链接2</a>
<a href="#">链接3</a>
</div>
</body>
</html>