有时候我们设置相邻元素样式时，比如三个div块元素，我们想要让它在一行显示，当然除了定位，浮动之外我们可以设置他的display为inline-block,让它变成行内块进行一行显示。当然普通的行内元素我们有时候也会这样设置。下面的例子我们用div举例
如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.item {
width: 150px;
height: 200px;
background: red;
display: inline-block;
}
</style>
</head>
<body>
<div class="list">
<div class="item">111111</div>
<div class="item">2222</div>
<div class="item">333</div>
</div>
</body>
</html>
我们设置好便签的内容，我们理想的呈现状态是这样的：
期望正常显示状态
但我们真正写业务时，标签的数据是不可控的，不是像我们写demo那样数据是写死的，动态的数据有时我们也会出现标签内的内容为空的时候，这里我们将第二个item的内容置为空，看看效果是不是会变
<div class="list">
<div class="item">111111</div>
<div class="item"></div>
<div class="item">33333</div>
</div>
此时显示的效果是
此时显示成这样
不甘心，再让第一个item内容变为空
前两个内容都为空
此时我们好像发现了什么，当相邻元素设置成display：inline-block，有数据的元素与没有数据的元素相邻，有数据的元素会发生偏移。似乎好诡异，查下资料发现：当元素display设置为inline-block,可以将对象呈递为内联对象，但是对象的内容作为块对象呈递。对象呈递为内联元素，而同一行内的内联元素默认是基于 baseline 对齐的，如下图
基线
图中的黑色线条就是我们所说的基线：为什么3个元素的方向不是相同的呢？为什么有内容的元素向下，而无内容的元素会向上呢？就此我们需要了解CSS渲染机制：对于一个inline-block元素，如果内部没有inline内联元素，或者overflow不是visible，则该元素的基线就是它margin的底边缘，否则就是元素内部最后一行内联元素的基线。
简单地就以上这种情况来说，没有内容的item会基于它的margin底边缘也就是它的下边缘对齐，而包含内容的item会基于其内部内联元素的基线对齐，所以会造成这种一上一下的情况。
了解清楚这些原理我们想想有什么方法可以解决以上问题。当然我们首先可以想到，还用啥inline-block,直接float浮动一下，问题瞬间解决，想到了浮动，当然我们也可以想到定位去解决；当浮动和定位对于上下文布局影响太大，当然你要说一句再清除浮动，这话我没法接，我只想说能不能少点代码，有简单的干嘛去复杂了写，我们可以改变vertical-align的属性，根据需求设置相关的值（top/middle/bottom），鉴于上面的实例我们试一下：
.item {
width: 150px;
height: 200px;
background: red;
display: inline-block;
vertical-align: top;
}
此时的效果：
完美
有内容的和没内容的已经完美“平等”，没有“高低”
网友评论