2018-07-23 今天遇到的一些CSS布局样式介绍
2018-07-23 本文已影响14人
幸福晓杰2016
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%);
}
如图.png
参考链接
