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

作者: 幸福晓杰2016 | 来源:发表于2018-07-23 22:23 被阅读14次

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

随着容器，上下左右居中

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

<body>
    <div class="wraper center">
        <div class="inside center"></div>
    </div>
</body>

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%);
    }