width: auto 和 width: 100% 的区别

width: auto Vs. width: 100%

CSS 中的 width 属性用于设置元素的宽度。默认情况下，width 设置的是内容区（content area）的宽度。如果元素有样式 box-sizing: border-box，则 width 设置的是边框区（border area）的宽度。
width 取值为百分比（percentage），表示当前元素的宽度为其包含块（containing block）的宽度的百分比。

通常情况下（即对于非定位元素而言），元素的包含块为该元素最近的块级祖先元素的内容区。
width 取值为 auto，表示浏览器根据实际情况会自动计算出一个宽度。

对于非替换的块级元素（如 <div>、<p> 等），width: auto 意味着元素会尽可能地填满其父元素的可用空间，但不会超过父元素的宽度，同时会考虑 margin、padding 和 border 的值。
- 默认情况下：如果没有设定 float、position: absolute 或 position: fixed 等样式，width: auto 会使元素的宽度自动调整，以适应其父元素的宽度。换句话说，元素会扩展到填满其包含块的可用宽度（减去 padding、border 和 margin 后的宽度）。
- 浮动元素：对于设置了 float 的元素，width: auto 会使元素的宽度收缩到内容所需的最小宽度。
- 绝对定位元素：对于设置了 position: absolute 的元素，width: auto 会使元素的宽度取决于其包含块的宽度和其他相关的 CSS 属性（如 left 和 right 等）。
对于替换元素（如 <img>、<video>、<iframe> 等），width: auto 的行为会有所不同。
- 固有尺寸：替换元素通常有一个固有的尺寸（intrinsic size）。当 width: auto 时，这些元素会优先根据它们的固有尺寸进行展示。
- 包含块的宽度：如果包含块（即父元素）的宽度有限制，替换元素会根据包含块的宽度进行调整。具体来说，替换元素会在其固有尺寸和包含块宽度之间找到一个平衡点。

总结起来，width: auto 的实际行为确实依赖于元素的类型（替换元素或非替换元素）以及元素的上下文（如是否浮动、是否绝对定位等）。这个说法正确并且在大多数情况下能够准确描述 width: auto 的行为。

width: 100% 意味着元素的宽度将被设置为其包含块的宽度。这会使元素的内容区与父元素的内容区等宽。
如果元素有 padding、border 或 margin，这些会额外占用空间，从而可能导致元素的总宽度超过父元素的宽度，造成溢出（overflow）。
如果父元素的宽度发生变化，设置 width: 100% 的元素会随之调整，始终保持与父元素等宽。