為什麼 CSS 中的百分比高度與百分比寬度的行為不同？

為什麼CSS中的百分比高度與寬度不同

問題：儘管成功應用了寬度百分比值，但為什麼百分比高度卻失敗了達到同樣的效果嗎？

答案：根本差別在於區塊元素的預設行為。這些元素的高度本質上適應它們所包含的內容。考慮以下範例：

這裡，#inner 將垂直擴展以容納

內的文本，而 #outer 將調整其高度以包含 #inner。

當指定百分比高度或寬度時，它指的是父元素。對於寬度，塊元素通常跨越其父元素的整個寬度，從而使結果可預測。設定寬度：50% 會轉換為特定的像素寬度。

但是，高度有所不同，因為塊元素高度由內容決定。如果沒有明確定義父元素的高度，則分配 height: 50% 是不明確的。父元素和子元素之間的這種回饋循環在確定最終高度時產生了不確定性。要打破這個循環，父元素必須有指定的高度。

以上是為什麼 CSS 中的百分比高度與百分比寬度的行為不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！