width: auto Vs. width: 100%
關于 width 屬性
-
CSS 中的
width屬性用于設置元素的寬度。默認情況下，width設置的是內容區（content area）的寬度。如果元素有樣式box-sizing: border-box，則width設置的是邊框區（border area）的寬度。 -
width取值為百分比（percentage），表示當前元素的寬度為其包含塊（containing block）的寬度的百分比。通常情況下（即對于非定位元素而言），元素的包含塊為該元素最近的塊級祖先元素的內容區。
-
width取值為auto，表示瀏覽器根據實際情況會自動計算出一個寬度。
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時，這些元素會優先根據它們的固有尺寸進行展示。 - 包含塊的寬度：如果包含塊（即父元素）的寬度有限制，替換元素會根據包含塊的寬度進行調整。具體來說，替換元素會在其固有尺寸和包含塊寬度之間找到一個平衡點。
- 固有尺寸：替換元素通常有一個固有的尺寸（intrinsic size）。當
總結起來，width: auto 的實際行為確實依賴于元素的類型（替換元素或非替換元素）以及元素的上下文（如是否浮動、是否絕對定位等）。這個說法正確并且在大多數情況下能夠準確描述 width: auto 的行為。
width: 100% 的行為
-
width: 100%意味著元素的寬度將被設置為其包含塊的寬度。這會使元素的內容區與父元素的內容區等寬。 -
如果元素有
padding、border或margin，這些會額外占用空間，從而可能導致元素的總寬度超過父元素的寬度，造成溢出（overflow）。 -
如果父元素的寬度發生變化，設置
width: 100%的元素會隨之調整，始終保持與父元素等寬。
小結
通常情況下（元素非定位元素，且為非替換元素），100% 的取值可能會導致元素溢出，而 auto 的取值不會導致元素溢出。
REFERENCES
https://developer.mozilla.org/en-US/docs/Web/CSS/width
https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#calculating_percentage_values_from_the_containing_block
https://forsethingvild.medium.com/the-difference-between-width-auto-and-width-100-a58e2ac7832f
