前端基础知识

1、定位

    开启定位
        position: ________   【模式】

                static  === 默认值
                fixed
                sticky
                relative
                absolute

        设置位置 【偏移量】
        四方位
            top
            bottom
            left
            right

    定位中的固定定位     position: fixed;
        给盒子开启固定定位之后，盒子原来占据的空间不再占据，其下方元素会自动补位
        不设置偏移量时，盒子默认会在原来的位置不动
        设置偏移量 就会按照设置的值 === 显示  ==== 参考位置【坐标系】  根据浏览器的显示窗口决定
            top + left      === 常见组合
            right + bottom  === 常见组合
        也可任意组合： 
    需要注意的是：水平的值和垂直的值。两个同时存在时，使用left 和 top

    定位中的粘性定位    position: sticky;
        给盒子开启粘性定位之后，盒子之前占据的空间依然占据
        不设置偏移量时，盒子默认会在原来的位置不动
        设置偏移量 就会按照设置的值达到值的那一刻 === 不会随着页面的滚动而移动，粘在了顶部 【吸顶效果】
            top: 0px;

    定位中的相对定位    position: relative;
        给盒子开启相对定位之后，盒子之前占据的空间依然占据
        不设置偏移量时，盒子默认会在原来的位置不动
        设置偏移量 就会按照设置的值 === 显示  =======  参考位置【坐标系】 根据盒子原来的位置进行偏移
            top + left      === 常见组合
            right + bottom  === 常见组合
        也可任意组合： 
    需要注意的是：水平的值和垂直的值。两个同时存在时，使用left 和 top

    定位中的绝对定位    position: absolute; ！！！！！！！！！！！！！！！！！！！！！！！！！！！！
    给盒子开启固定定位之后，盒子原来占据的空间不再占据，其下方元素会自动补位
    不设置偏移量时，盒子默认会在原来的位置不动
    设置偏移量 就会按照设置的值 === 显示   ==== 参考系问题
        top + left      === 常见组合
        right + bottom  === 常见组合
    也可任意组合： 
    需要注意的是：水平的值和垂直的值。两个同时存在时，使用left 和 top

        参考系问题！！！！！！！
            先看父级  元素有没有设置过 定位 【相对定位 | 固定定位 | 粘性定位 | 绝对定位】，
                如果设置了就使用父元素为参考系，如果没设置，就向上查找，找到最近的一个设置过定位的元素为参考系
                如果都没有设置，就使用浏览器为参考系

    工作过程中： 子绝  父相
        子元素设置了绝对定位，那么一般情况下，就直接给父元素设置相对定位

        【父 ---  相对定位  --- 给其开过绝对定位的子元素提供一个参考系】
            ==== 固定 、 绝对  =====   设置之后，占据的空间会依然占据 - 不会让页面发生变化

    调整定位元素的层级  === 元素  ----- 一定是开启过定位的

        z-index  === 默认值 是 0

        值越大，越在上面  【可以设置为负数】

=======
a 标签  = 本身是一个行内元素，不能直接设置宽高
想要设置的话， 需要改成能设置宽高的 【块级元素】

a 标签的特殊用法
    <a href="#top">      </a>   === 能够实现返回顶部效果

    <a href="文件所在地址" download="文件名">点击下载</a>
    <a href="tel:187****3232">拨打电187****3232</a>
    <a href="sms:187****3232">发送短信给187****3232</a>

a 标签的锚点链接
    第一步：在标签内加上 id = "命名锚点名称"
    第二步：<a href="#命名锚点名称"></a>

========================================
设置元素的边框倒角

    border-radius: 5px;

    {
        width:200px;
        height:200px;
        border-radius: 50%;   === 一个圆形
    }

    {
        width:200px;
        height:100px;
        border-radius: 50px;   === 一个类似跑道的形状
    }