• 充分利用可用空间。比方说，<div>、<p>这些元素的宽度默认是 100%于父级容器的。

• 收缩与包裹。典型代表就是浮动、绝对定位、inline-block 元素或 table 元素， 英文称为 shrink-to-fit。

• 收缩到最小。这个最容易出现在 table-layout 为 auto 的表格中。

例子

HTML代码

<table>
    <tr>
        <td>例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子例子</td>
        <td>当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；</td>
        <td>当父级relative，且宽度很小的时候，例如{position:relative; width:20px;}，absolute元素也会出现一柱擎天的情况；</td>
    </tr>
</table>

CSS 代码

table {
    width: 280px;
    margin: 0 auto;
    text-align: left;
}

演示结果

当每一列空间都不够的时候，文字能断就断，但中文是随便断的，英文单词不能断。

• 超出容器限制。除非有明确的 width 相关设置，否则上面 3 种情况尺寸都不会主动 超过父级容器宽度的，但是存在一些特殊情况。例如，内容很长的连续的英文和数字，或者 内联元素 被设置了 white-space:nowrap。

例子

HTML：

<div class="father">
    <span class="child">恰如一江春水向东流，流到断崖也不回头</span>
</div>

CSS :

.father {
  width: 150px;
  padding: 10px;
  background-color: #cd0000;
  white-space: nowrap;
}
.child {
  display: inline-block;
  padding: 5px;
  background-color: #f0f3f9;
}

子元素既保持了 inline-block 元素的收缩特性，又同时让内容宽度最大，直接无视父 级容器的宽度限制。