【深入理解】width 的默认值

• min-content —— 意为 收缩至最小，在古老的表格布局中会出现（擎天柱的效果）。

• max-content —— 意为 超出容器限制。

[](()fill-avaliable

---

它是 width:auto 的一种表现，主要体现在块级元素的流动性上，何谓流动性？可以这么理解：流动，就像水流一样，可以想象往一个容器中注入水的效果，水面一定是水平平铺在一个水平面上的，并且充满了这个水平面，这就是水的流动性。

块级元素的流动性，就是尽可能多的占有父级容器的空间，默认情况下，它会充满整个父级元素（100%），也就是为什么将块级元素的特征总结为：独占一行。

[](()shrink-to-fit

---

shrink-to-fit 也是 width:auto 的一种表现，意为收缩到合适，典型的代表是浮动元素，绝对定位元素，弹性盒子，inl **《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】** ine-block 元素。

一旦开启了浮动，绝对定位，弹性盒子（flex）之中的任意一项，元素的宽度就会表现为 shrink-to-fit ，从而，这也就解释了为什么开启浮动后块级元素不再独占一行，因为块级元素的流动性被破坏了，块级元素由原来的 fill-avaliable 变成了 shrink-to-fit 。绝对定位和弹性布局也是同样的道理。

此时的元素宽度由子元素撑开，父级元素会包裹着子元素，这种现象也被称为元素的包裹性。

[](()min-content

---

可以理解为 “首选最小宽度”，意思是元素最适合的最小宽度。为了不让图文在 width:auto 时宽度变成0