1.精灵二倍图
原因:精灵图缩放后位置发生了变化
二倍精灵图做法:
1.在firework里面将精灵图缩放为原来的一半
2.根据大小 测量坐标
3.注意代码里面background-size也要写:原来精灵图的一半
注意:因为虽然在firework里面将缩放为一半后测量的,但是实际导入背景的精灵图没有缩放 */
.sou {
/* 精灵图缩放后位置发生了变化 */
/* 二倍精灵图做法: */
/* 1.在firework里面将精灵图缩放为原来的一半 */
/* 2.根据大小 测量坐标*/
/* 3.注意代码里面background-size也要写:原来精灵图的一半 */
/* 注意:因为虽然在firework里面将缩放为一半后测量的,但是实际导入背景的精灵图没有缩放 */
position: absolute;
top: 8px;
left: 50px;
width: 18px;
height: 15px;
background: url(../imgs/jd-sprites.png) no-repeat;
background-position: -81px 0;
/* 精灵图缩放为一半 */
background-size: 200px auto;
}
2.nav
子盒子的margin-top会到导致,塌陷问题
<nav>
<div class="search-btn">
</div>
<div class="search">
</div>
<div class="search-login">
</div>
</nav>
nav {
overflow: hidden;
position: relative;
height: 44px;
line-height: 44px;
text-align: center;
color: #fff;
}
nav .search-btn {
position: absolute;
top: 0;
left: 0;
width: 40px;
height: 44px;
}
.search-btn::before {
content: "";
display: block;
width: 20px;
height: 18px;
margin: 14px 0 0 15px;
background: url(../imgs/s-btn.png) no-repeat;
background-size: 20px 18px;
}
nav .search-login {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 44px;
}
nav .search {
position: relative;
height: 30px;
background-color: #fff;
/* 子盒子的margin-top会到导致,塌陷问题 */
margin: 7px 50px 0;
border-radius: 15px;
}
3.固定定位的盒子需要给宽度
原因:固定定位的盒子以浏览器屏幕为主,与父盒子无关。