width: auto 根据内容、父容器及盒模型动态计算宽度，使块级元素在扣除 margin、padding 后自动填满可用空间；相比 width: 100% 可能导致溢出，width: auto 更安全，常用于自适应布局、居中元素和避免拉伸，配合 box-sizing 和 max-width 使用更灵活。
在css中，width: auto 是实现宽度自适应最常用的方法之一。它不是简单地让元素“自动”变宽，而是根据元素的内容、父容器以及盒模型的设置来动态计算宽度。
width: auto 的默认行为
大多数块级元素（如 div、p）默认的 width 就是 auto。这种状态下，元素会尽可能占满父容器的可用宽度，但会减去 margin、padding 和 border 所占用的空间。
例如：
<div style=”width: auto; margin: 20px; padding: 10px;”>内容</div>
这个 div 会从父容器中扣除左右 margin 和 padding 后，自动填满剩余的水平空间。
立即学习“前端免费学习笔记（深入）”；
与其它宽度设置的对比
理解 auto 的作用，最好和固定值、100% 做比较：
- width: auto：考虑 margin、padding，自动伸缩以适应布局上下文
- width: 100%：强制宽度等于父容器内容宽度，可能造成溢出（如果加了 padding 或 border）
- width: fit-content：宽度由内容决定，同时可居中（配合 margin: auto）
举个例子，当设置了 padding 时：
<div style=”width: 100%; padding: 20px; box-sizing: border-box;”>内容</div>
如果不加 box-sizing: border-box，width: 100% 加上 padding 会导致横向滚动条。而 width: auto 在正常文档流中不会出现这个问题。
常见应用场景
width: auto 特别适合以下情况：
- 希望元素自然填充父容器剩余空间
- 使用浮动或 flex 布局中的子元素自动分配宽度
- 需要居中块级元素：margin: 0 auto 配合 width: auto 或指定宽度
- 避免内容被拉伸，保持内容实际宽度（结合 max-width 使用更灵活）
基本上就这些。合理利用 width: auto 能让布局更自然、响应更灵活，尤其是在不确定内容长度或屏幕尺寸多变的情况下。关键是理解它如何与盒模型、margin 和父容器交互。不复杂但容易忽略细节。