inline-block元素错位背后的原因
inline-block元素是一种特殊类型的块级元素，它可以与其他元素行内排列。但是，在某些情况下，inline-block元素可能会出现错位显示的问题。
错位的原因
当inline-block元素设置了overflow:hidden属性时，它会影响元素的基线位置。基线是指文字底部对齐的参考线。因为其他inline-block元素也设置了overflow:hidden，所以它们的基线也发生了改变，导致后续元素与前一个元素的基线对齐不当，从而产生错位。
解决方案
要解决这个问题，可以通过修改vertical-align属性来调整inline-block元素的垂直对齐方式。例如，将其设置为middle可以使元素水平居中。
代码示例
.list {
display: inline-block;
width: 80px;
height: 80px;
overflow: hidden;
vertical-align: middle;
}
.add {
display: inline-block;
width: 76px;
height: 76px;
color: #ccc;
border: 2px dashed;
vertical-align: middle;
}设置了vertical-align: middle后，inline-block元素就会垂直居中对齐，从而消除错位问题。
