1. 包裹性： 张大大在css世界里对 shrink-to-fit 理解后的一种称谓。


包裹性除了包裹外，还有自适应性

自适应性指的是元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸（除非容器尺寸小于元素的“首选最小宽度”）。因此，对于一个元素，如果其display属性值是inline-block，那么即使其里面的内容再多，只要是正常文本，宽度也不会超过容器。


button 是 css中极具代表的 inline-block 元素(最大宽度240像素),

2. 首选最小宽度：指的是元素最适合的最小宽度

  • 东亚文字（如中文）小宽度为每个汉字的宽度
  • 西方文字小宽度由特定的连续的英文字符单元 决定。并不是所有的英文字符都会组成连续单元， 一般会终止于空格（普通空格）、短横线、问号以 及其他非英文字符等。

小例子：

<body>
  <span class="ao"></span>
  <span class="tu"></span>
</body>
<style>
.ao,
.tu {
  display: inline-block;
  width: 0;/*  宽度为0时，因为图片和文字的权重远大于布局，所以展现的宽度是“首选最小宽度”*/
  font-size: 14px;
  line-height: 18px;
  margin: 35px;
  color: #fff;
}
.ao:before,
.tu:before {
  outline: 2px solid #cd0000;
  font-family: Consolas, Monaco, monospace;
}
.ao:before {
  content: "love你love";
}
.tu {
  direction: rtl;
}
.tu:before {
  content: "我love你";
}
</style>

这样会不会明显点