关于display:inline,block,inline-block作为子级元素设置宽高时的细小区别

<div class="box">
   <div class="child"></div>
 </div>

首先定义一个 父级的div和子级的div
首先我们知道的是 div是块级元素，会自动独占一行，而子级的div更会继承父级div的宽度
css代码
.box{
width: 100px;
margin:0 auto;
}
.child{
height: 60px;
background-color: red
}
效果

如果将子级的div设置 display: inline-block,效果如图

如果将子级的div设置 display: inline,效果如图

实验结果表明，子级的div自动继承父级的宽度，所以在自适应布局中非常有用
只需要将最外层设置一个百分比的宽度，子级div设置一个固定宽度并且居中，这样页面的缩放对布局的影响就会降低很多。