2018-07-23 今天遇到的一些CSS布局样式介绍

1.背景图片设置
background-size中，100%和cover都是用于将图片扩大或者缩放来适应整个容器
background-size：100% 100%;---按容器比例撑满，图片变形；
background-size：cover;---把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。
所以常用 background：cover

2. 随着容器，上下左右居中

transform: translate(-50%, -50%);

    

        

    


body {
        width: 100%;
        height: 100%;
        position: relative;
    }

    .wraper {
        width: 80%;
        height: 80%;
        background-color: #ddd; 
    }

    .inside {
        width: 30%;
        height: 30%;
        background-color: blue;
    }

    .center { 
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

如图.png

参考链接