带你深入剖析inline-block属性值的前世今生

当我们需要在页面上放置多个块级元素时，通常使用float或display: inline-block属性。其中，inline-block属性在使用过程中可能会遇到一些奇怪的问题，因此我们需要深入剖析这个属性值的前世今生。

1. inline-block基本属性

display:inline-block是将元素显示为内联对象，但可以保留其内部的块级属性，比如设置了宽度和高度后还能在同一行显示。因为内部块级元素也有可能受到inline-block属性的影响，可能会有一些意料之外的问题。

其基本属性如下：

display:inline-block;

2. inline-block的宽度问题

使用display:inline-block属性时，内部块级元素的宽度通常会被默认赋予父元素的宽度，但是当内部元素的宽度大于父元素的宽度时，就会产生意想不到的问题。此时可以使用white-space: nowrap或float:left的方法来解决宽度问题。

示例1

<div class="parent">
  <div class="child">Child 1</div>
  <div class="child">Child 2 with very long text</div>
  <div class="child">Child 3</div>
</div>

.parent {
  background: #f2f2f2;
  font-size: 0;
  text-align: center;
  white-space: nowrap;
}

.child {
  background: #333;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  margin: 0 5px;
  padding: 10px;
  white-space: normal;
}

示例1 效果展示

在这个例子中，我们使用了white-space:nowrap属性来阻止文本换行，并使用font-size:0来移除块级元素之间的空白间隔。不过当我们为内部元素设置了padding属性后，可以看到它们不再对齐。这是因为内部块级元素的宽度受到了padding的影响。要解决这个问题，可以将.child设置为box-sizing:border-box。

示例2

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  background: #f2f2f2;
  padding: 10px;
}

.child {
  background: #333;
  color: #fff;
  display: inline-block;
  height: 50px;
  margin: 0 10px;
  vertical-align: middle;
  width: 100%;
}

示例2 效果展示

在这个例子中，我们想让内部元素.child的宽度填充父元素.parent的宽度，但是我们发现.child留有一定的空白。这是因为inline-block元素设置为相对定位或浮动时，它的宽度会受到子元素的影响。因此，我们可以将.child设置为width:100%，解决宽度问题。

总结

以上是关于inline-block属性的基本属性、宽度问题的解决方案的详细讲解。通过这些例子，我们可以更好地理解inline-block属性的应用方法，更好地解决inline-block属性在实际使用中遇到的问题。