inline-block相关

1.行内元素设置inline-block时，不会继承父元素的宽度，并且另起一行显示？

<!-- html -->
<div class="box">
     <span>111</span>
</div>

/* css */
.box{
    width: 110px;
    height: 110px;
    padding: 10px;
    box-sizing: border-box;
    background-color: green;
}
.box span{
    /* display: block; */
    display: inline-block;
    background-color: red;
}

● 当span元素设置inline-block时，不会继承父元素宽度。

● 当span元素设置block时，会继承父元素宽度。

 2.inline-block元素可以包含block元素，但是块元素会另起一行显示，不会和行内块同行。

<span>111
     <i>222</i>
</span>

span{
    display: inline-block;
    height: 60px;
    background-color: red;
}
i{
    display: block;
    height: 20px;
    background-color: orange;
}