想请教一下，这样有什么区别呢？
来源：3-3 表示层--图片区域
慕仰7236035
2021-01-18 20:20:17
div {
position: relative;
width: 78.125vw;
height: 75vh;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3);
overflow: hidden;
}
div>img {
position: absolute;
width: 98%;
height: 96%;
margin: 20px 20px;
}
div {
position: relative;
width: 78.125vw;
height: 75vh;
margin: 0 auto;
background: #fff;
box-shadow: 0 0 30px 0 rgba(8, 1, 3, .3);
overflow: hidden;
}
div>img {
position: absolute;
width: 98%;
height: 96%;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
1回答
-
好帮手慕慕子
2021-01-19
同学你好， 区别如下：
1、第一段代码只是设置图片绝对定位，然后通过margin属性调整图片的间距，图片并没有居中显示，示例：
图片的上下间距，左右间距是不相同的
2、第二段代码，设置top、right、bottom和left属性值为0，然后设置margin属性值为auto，那么图片会均分剩余的空间，实现水平垂直居中。示例：
图片上下间距，左右间距是相同的
祝学习愉快~
0
相似问题