- 可设置auto的值
       margin width left right
          - 因为**left 和 right的值默认是auto**，所以如果不指定left和right则等式不满足时，会自动调整这两个值

<div class="box1">
    <div class="box2"></div>
</div>
.box1{
            width: 500px;
            height: 500px;
            background-color: #bfa;
            position: relative;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: absolute;
            margin: auto;
            left: 0;
             right: 0;
             top: 0;
             bottom: 0;
        }

<div class="box1">1</div>
    <div class="box4">
        4
        <div class="box5">
            5
            <div class="box2">2</div>
        </div>
    </div>
    <div class="box3">3</div>
body{
            font-size: 60px;
            height: 2000px;
        }
        .box1{
            width: 200px;
            height: 200px;
            background-color: #bfa;
        }
        .box2{
            width: 200px;
            height: 200px;
            background-color: orange;
            position: fixed;
            left: 0;
            top: 0;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .box4{
            width: 400px;
            height: 400px;
            background-color: tomato;
        }
        .box5{
            width: 300px;
            height: 300px;
            background-color: aliceblue;
        }

<!-- 创建导航条的结构 -->
    <ul class="nav">
        <li>
            <a href="#">HTML/CSS</a>
        </li>
        <li>
            <a href="#">Browser Side</a>
        </li>
        <li>
            <a href="#">Server Side</a>
        </li>
        <li>
            <a href="#">Programming</a>
        </li>
        <li>
            <a href="#">XML</a>
        </li>
        <li>
            <a href="#">Web Building</a>
        </li>
        <li>
            <a href="#">Reference</a>
        </li>
    </ul> 
body{
            height: 3000px;
        }
        .nav{
            width: 1210px;
            height: 48px;
            background-color: #E8E7E3;
            margin:100px auto;
             position: sticky;
             top: 10px;
        }
        /* 设置nav中li */
        .nav li{
            float: left;
            line-height: 48px;
        }
        /* 设置a的样式 */
        .nav a{
            display: block;
            text-decoration: none;
            color: #777777;
            font-size: 18px;
            padding: 0 39px;
        }
        .nav li:last-child a{
            padding: 0 42px 0 41px;
        }
        /* 设置鼠标移入的效果 */
        .nav a:hover{
            background-color: #3F3F3F;
            color: #E8E7E3;
        }

color 用来设置字体颜色
                font-size 字体的大小
                    和font-size相关的单位
                    em 相当于当前元素的一个font-size
                    rem 相对于根元素的一个font-size
                font-family 字体族（字体的格式）
                    可选值：
                        serif  衬线字体
                        sans-serif 非衬线字体
                        monospace 等宽字体
                        - 指定字体的类别，浏览器会自动使用该类别下的字体
            - font-family 可以同时指定多个字体，多个字体间使用,隔开
                字体生效时优先使用第一个，第一个无法使用则使用第二个 以此类推
font-family: 'Courier New', Courier, monospace;

@font-face {
                /* 指定字体的名字 */
            font-family:'myfont' ;
            /* 服务器中字体的路径 */
            src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
        }

1.下载 https://fontawesome.com/
        2.解压
        3.将css和webfonts移动到项目中
        4.将all.css引入到网页中
        5.使用图标字体
        - 直接通过类名来使用图标字体
            class="fas fa-bell"
            class="fab fa-accessible-icon"

字体框
                - 字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度
行高会在字体框的上下平均分配

div{
            height: 100px;
            border: 1px red solid;
            line-height: 100px;
        }
 <div class="box1">漳卅的那个散发的zhgnasdngaa</div>
    <div class="box1">漳卅的那个散发的zhgnasdngaa</div>

div{
            border: 1px red solid;
            /* 
                font 可以设置字体相关的所有属性
                    语法：
                        font: 字体大小/行高 字体族
                        行高 可以省略不写 如果不写使用默认值
            */
            /* font-size: 50px;
            font-family: 'Times New Roman', Times, serif; */
            font-weight: bold;
            /* font: 50px/2  微软雅黑, 'Times New Roman', Times, serif; */
            /* font: normal normal 50px/2  微软雅黑, 'Times New Roman', Times, serif; */
            font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;
            /* font:50px 'Times New Roman', Times, serif;
            line-height: 2; */
            /* font-size: 50px; */
        }