前端学习笔记--CSS布局--文件流定位

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>