前端Day13笔记

一、定位 position
    定位属性可以将元素放到我们想要的地方去，配合4个方位使用，在任何定位时，同一个方向的两个相对的属性值（比如left和right、top和bottom）不要同时使用，但是在一些特殊的情况下需要同时使用才能发挥特殊的效果（后面会说明特殊的用法），常见的几种定位：静态定位、相对定位、绝对定位、固定定位、粘性定位
    
    1、静态定位 static
        1）position: static;
        2）静态定位特点：
            开启静态定位没有任何效果，开和不开看不出任何区别，后期会配合js使用
    
    2、相对定位 relative
        1）position: relative;
        2）配合相对定位的4个方向属性及解释:
            left    从左向右位移多少（像素）
            right    从右向左位移多少（像素）
            top        从上向下位移多少（像素）
            bottom    从下向上位移多少（像素）
        3）相对定位特点：
            a.参照元素自身的位置来进行定位（相对于未定位前的位置）
            b.不会脱离文档流（在文档流中依旧占位）
    
    3、绝对定位 absolute
        1）position: absolute;
        2）配合绝对定位的4个方向属性及解释:
            left    水平方向先贴着参照祖先的左边，从左向右位移多少（像素）
            right    水平方向先贴着参照祖先的右边，从右向左位移多少（像素）
            top        垂直方向先贴着参照祖先的上边，从上向下位移多少（像素）
            bottom    水平方向先贴着参照祖先的下边，从下向上位移多少（像素）
        3）绝对定位特点：
            a.参照祖先（开启了除静态定位以外定位属性的离元素最近的那个祖先元素，如果所有的祖先元素都没有开启定位，就以浏览器窗口为参照）来确定自身的位置
            b.会脱离文档流（在文档流中不占位）
            c.开启绝对定位的元素叫定位元素，它不再区分行内、行内块、块（只有在文档流中的元素才区分块、行内块、行内）
    
    4、固定定位 fixed
        1）position: fixed;
        2）配合固定定位的4个方向属性及解释:
            left    水平方向先贴着浏览器窗口的左边，从左向右位移多少（像素）
            right    水平方向先贴着浏览器窗口的右边，从右向左位移多少（像素）
            top        垂直方向先贴着浏览器窗口的上边，从上向下位移多少（像素）
            bottom    水平方向先贴着浏览器窗口的下边，从下向上位移多少（像素）
        3）固定定位特点
            a.参照浏览器窗口来确定自身的位置
            b.会脱离文档流（在文档流中不占位）
            c.开启固定定位的元素叫定位元素，它不再区分行内、行内块、块（只有在文档流中的元素才区分块、行内块、行内）
    
    5、粘性定位 sticky
        1）position: sticky;
        2）配合粘性定位的4个方向属性及解释:
            left    水平方向先贴着滚动祖先的左边，从左向右位移多少（像素）
            right    水平方向先贴着滚动祖先的右边，从右向左位移多少（像素）
            top        垂直方向先贴着滚动祖先的上边，从上向下位移多少（像素）
            bottom    水平方向先贴着浏滚动祖先的下边，从下向上位移多少（像素）
        3）粘性定位特点：
            a.参照最近的滚动祖先来确定自身的位置
            b.不会脱离文档流（在文档流中依旧占位）
            c.当父级元素超出content区域，粘性定位就失效了
            
    6.定位属性特殊用法
        1）使元素居中
            a.方案一：先设置绝对定位或者固定定位到当前父元素的一半位置 然后自己回去自己本身的一半
            b.方案二：开启绝对定位或固定定位，四个方向为0，设置margin:auto实现水平垂直居中
                代码演示：
                    position:     absolute;
                    left:        0;
                    right:        0;
                    top:        0;
                    bottom:        0;
                    margin:        auto;
            c.注意：
                inset: 0;    inset属性是四个方向属性的简写，但有的低版本浏览器不支持，保险起见还是将left、right、top、bottom分开写
                
        2）拉伸元素宽高
            a.先开启绝对定位或固定定位，再设置4个方向的属性值：
                left        离参照的祖先元素的左边距离
                right        离参照的祖先元素的右边距离
                top            离参照的祖先元素的上边距离
                bottom        离参照的祖先元素的下边距离
                注意：
                    这个用法前提是该元素的宽高没有设置如果设置了宽高就会失去拉伸效果！！！
                    如果将四个方向都设置为0，就能铺满整个祖先元素
                    不能单独设置某个方向的属性值！！！（可以设置不同的值，但必须每个方向都有值）
                    
        3）实现遮罩效果
            a.开启绝对定位或固定定位，将四个方向的属性值设置为0（拉伸元素的宽高使其占据整个参照的祖先元素），设置背景色rgba（a是透明度，取值0-1之间的小数）
            
            
二、溢出处理
    1、overflow 属性
        1）取值：
            visible        不处理（默认）
            hidden        隐藏溢出的部分        
            scroll        溢出部分添加滚动条（如果没有溢出也会显示滚动条区域）
            auto        溢出部分添加显示条（如果没有溢出不会显示滚动条区域，可以单独出现单侧的滚动条）
    2、overflow-x、overflow-y属性
        可以单独对水平或者垂直方向溢出处理
        1）取值：
            除auto属性值之外，其他属性值与overflow属性值相同

三、定位的层次 z-index
    1、z-index 属性
        1）取值：
            整数，数字越大代表层级越高（可以取负值和0）
        2）注意：
            a.这个属性必须在元素设置了定位属性position之后才能使用！！！并且该定位属性值不能为静态定位static！！！
            b.在z-index层次属性相同时，书写位置靠后的标签显示的优先级越高

四、box-sizing属性
    1、box-sizing属性的作用
        控制元素是标准盒模型还是怪异盒模型
        标准盒模型 = width + padding +border + margin
        怪异盒模型 = width + margin 设置了内边距和边框是不会在可见区域变大
    2、取值：
        border-box        将盒模型转化成怪异盒模型
        content-box        标准盒模型
    3、注意：
        1）加了 box-sizing:border-box;以后就不会在原本的宽高上再加内边距和边框了
        2）父元素变成怪异盒模型，子元素设置百分比时，会参考content部分的宽高而不是整个盒子的宽高（因此不用管是不是怪异盒模型，正常写百分比就行！！！）

五、圆角属性 border-radius
    1、border-radius 圆角属性
        1）取值：
            像素单位px    需要多少的圆角半径就设置多少的像素（最大为一半元素的宽高，宽高取小的那个，大于这个值不生效）
            百分比        指宽（或高）的百分比        
        2）注意：
            a.属性值一共是四个，依次为左上、右上、右下、左下的圆角，可以省略最多三个值，缺的值从对角补全
            b.取值的最大值为一半的宽高（宽高取小的那个），如果大于这个值不生效