<div class="box">
我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>
此时在浏览器运行这段代码就会出现折行,如果未折行可以在增加文字,这时候div的高度是由所有文字的行高所撑起来的。
<div class="box">
我是div我是div我是div<span class="inner-box"></span>我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div
我是div我是div我是div我是div我是div我是div我是div我是div我是div
</div>
style {
.inner-box {
display:inline-block;
width:100px;
height:100px;
}
}
接下来我们在文字里面添加一个span元素并给其样式如上所示,此时div元素中第一行的高度不在是第一行文本的行高 高度,效果如下:
这时候我们引入行盒的概念,行盒可以有多行,一个div元素中可以存在多个行盒,行盒是要包裹当前行所有的内容。
以下案例div中只有一个行盒,行盒要包裹所有元素那变成了如下效果
div {
background-color: black;
color: #fff;
}
span {
display: inline-block;
background: red;
width: 100px;
height: 100px;
}
<div>
我是普通的文本
<span></span>
</div>
你会发现下方出现了像素问题,并不是只有图片下方才会有3像素问题,问题的产生是因为行盒要包裹当前行所有内容,但这时候文本和span之间默认是基于baseline对齐的,span就会偏上一点点因为是基于字母x去对齐的,这时候只要我们给span一个vertical-align为bottom就会解决或者top或者middle
vertical-align: baseline/ top/ bottom/ middle
是设置给行内块元素的