请解释下width:auto与width:100%的区别？

在前端开发中，width: auto 和 width: 100% 的主要区别体现在它们如何确定元素的宽度。

1. width: auto：

   • 当元素的宽度设置为 auto 时，浏览器会自动计算元素的宽度。这通常意味着元素会尽可能地占据其父元素的宽度，但同时也会考虑到元素内的内容。如果元素内的内容不足以填满整个父元素宽度，那么元素的宽度将会与内容的宽度相匹配。
   • 在某些布局情况下，width: auto 可能会使元素宽度小于其父元素的宽度，尤其是当元素内的内容不足以填满整个宽度时。
   • 对于块级元素，如果没有设置宽度，并且左右margin、border和padding都未设置或设置为0，那么其默认宽度就是 auto，这通常会使元素宽度自动填充其父元素的宽度。

2. width: 100%：

   • 当元素的宽度设置为 100% 时，它会强制元素宽度完全填充其父元素的宽度，不考虑元素内的内容宽度。
   • 这意味着，即使元素内的内容很少，元素的宽度也会扩展到与父元素同宽。
   • 使用 width: 100% 可以确保元素始终占据其父元素的全部宽度，无论内容多少。

总的来说，width: auto 更加灵活，它会根据内容来调整元素的宽度，而 width: 100% 则会强制元素占据其父元素的全部宽度。选择哪种方式取决于你的具体布局需求和设计目标。