width: auto 与 width: 100% 的区别
- auto（动态适应）：由浏览器根据内容、内外边距、边框和上下文约束自动计算盒子宽度，可能因内容变化而扩展或收缩。
- 100%（强制填满包含块内容区宽度）：宽度等于包含块的内容区宽度，不随自身内容变化；若有水平内边距/边框/外边距，可能导致视觉或实际溢出，需要配合
box-sizing: border-box或减法计算。
何时用哪个
- 需要根据内容自适应且避免不必要的溢出：优先
auto，常与max-width配合。 - 需要拉满父容器内容区：用
100%，并注意盒模型与滚动条。
常见搭配
width: auto; max-width: 100%;用于图片、视频在窄屏回缩、宽屏不放大。width: 100%; box-sizing: border-box;用于表单、卡片在父容器内满宽且不溢出。