###### 问题遇到的现象和发生背景
在网页中，缩放网页的时候，这个背景图片原来的格式是50×40，缩放了之后变成了小数
然后网页中的内个小图标就直接换行了
如果不缩放网页，就啥事没有
HTML部分
<div class="header wrapper">
<!-- logo -->
<h1>
<a href="#"><img src="./images/logo.png" alt="nb"></a>
</h1>
<!-- 导航 -->
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">职业规划</a></li>
</ul>
</div>
<!-- 搜索 -->
<div class="search">
<input type="text" placeholder="输入关键字"><button></button>
</div>
<!-- 用户 -->
<div class="user">
<img src="./images/user.png" alt="">
<span>GRCmade</span>
</div>
</div>
CSS部分
*{
margin: 0;
padding: 0;
/* 内减模式 */
box-sizing: border-box;
}
li{
list-style-type: none;
}
a{
text-decoration: none;
}
.clearbox::before,
.clearbox::after{
content: "";
display:table
}
.clearbox::after{
clear:both;
}
/* 版心 */
.wrapper{
width: 1200px;
margin: 0 auto;
}
/* 头部 */
.header{
height: 42px;
/* background-color:pink; */
margin: 30px auto;
/* 等价于margin-top: 30px;
margin-bottom: 30px; */
}
h1{
float: left;
}
.nav{
float: left;
margin-left: 70px;
height: 42px;
/* background-color: green; */
}
/* 表示nav里面的li */
.nav li{
float: left;
margin-right: 26px;
}
.nav a{
display: inline-block;
padding: 0 9px;
height: 42px;
line-height: 42px;
font-size: 18px;
color: #050505;
}
.nav a:hover{
border-bottom: 2px solid #00a4ff;
}
.search{
float: left;
margin-left: 59px;
width: 413px;
height: 42px;
border: solid 1px #00a4ff;
}
.search input{
float: left;
padding-left: 20px;
width: 360px;
height: 38px;
border: 0;
}
/* 控制placeholder */
.search input::placeholder{
font-size: 14px;
color: #bfbfbf;
}
.search button{
display: inline-block;
width: 50px;
height: 40px;
background-image: url(../images/btn.png);
border: 0;
}
