为什么当我使用display: inline-block；时，div的顺序会改变？

当使用display: inline-block;时，div的顺序会改变是因为inline-block元素会按照其在HTML文档中出现的顺序进行排列，而不是按照其在CSS中的顺序。这意味着如果HTML文档中的div元素的顺序与CSS中的顺序不一致，那么它们在页面上的显示顺序也会不一致。

这种行为是由于inline-block元素的特性所导致的。inline-block元素既具有块级元素的特性，又具有行内元素的特性。它会在一行内显示，并且可以设置宽度、高度、边距等属性。但是，与块级元素不同的是，inline-block元素之间会有默认的空白间隔，这个空白间隔会导致元素在页面上的位置发生变化。

为了解决这个问题，可以使用以下方法之一：

1. 在HTML文档中按照需要的顺序排列div元素，保持与CSS中的顺序一致。
2. 使用浮动（float）属性来控制div元素的位置，而不使用inline-block。
3. 使用flexbox布局或者grid布局来控制元素的位置和排列顺序。

总结起来，当使用display: inline-block;时，div的顺序会改变是因为inline-block元素按照HTML文档中的顺序进行排列，并且之间会有默认的空白间隔。为了避免这个问题，可以使用其他布局方式来控制元素的位置和排列顺序。