前端自学笔记1

元素垂直居中的方式总结：
    已知元素宽高：
        1、position:absolute;
           left:0;
           top:0;
           right:0;
           bottom:0;
           margin:auto
           
        2、position:absolute;
           left:50%;
           top:50%;
           margin-left:-width/2;
           margin-top:-height/2;(width,height分别为居中元素的宽高)
        
    元素宽高未知：
        position:absolute;
        left:50%;
        top:50%;
        transform：translate(-50%,-50%);
    
    图片居中常用方式：
        body{
            text-align:center;
        }
        body:after{
            content:"";
            height:100%;
            display:inline-block;
            vertical-align:middle;
        }
        img{
            vertical-align:middle;
        }
    
    元素属性百分比参照总结：
        1、top,height 百分比参照的是包含块的高度
        2、left,margin,padding,width 百分比参照的是包含块的宽度
        3、translate(50%,50%) 参照的是自身的宽高
        4、background-position 百分比参照的是(图片区域-图片位图像素值)