神奇的 inline-block
2017-08-13
突然发现inline-block真是个神奇的属性呢~当写下下面的代码的时候
<style>
.div1 {
width: 200px;
height: 200px;
display: inline-block;
background-color: #f98e90;
}
.div2 {
width: 200px;
height: 200px;
display: inline-block;
background-color: #b9d7ea;
}
</style>
<div class="div1"></div>
<div class="div2"></div>你会看到下面的两个彩色块（自古红蓝出 CP）
当我给红色块加点文字时
我是一个有文字的红色块
两个 div 块都添加文字
我是一个有文字的红色块
我也有文字！！！
咦~~~
发现只有红色 div 有文字时它会下沉，其实它们对于文字有一个基线，默认是在父元素的基线（baseline）,可以通过修改vertical-align来修改基线位置,下面是vertical-align:top
我是一个有文字的红色块
其实还是没有真正的明白基线是什么东西。