为什么 CSS 中的百分比高度与百分比宽度的行为不同？

为什么CSS中的百分比高度与宽度不同

问题：尽管成功应用了宽度百分比值，但为什么百分比高度却失败了达到同样的效果吗？

答案：根本区别在于块元素的默认行为。这些元素的高度本质上适应它们所包含的内容。考虑以下示例：

<div>

这里，#inner 将垂直扩展以容纳

内的文本，而 #outer 将调整其高度以包含 #inner。

当指定百分比高度或宽度时，它指的是父元素。对于宽度，块元素通常跨越其父元素的整个宽度，从而使结果可预测。设置宽度：50% 会转换为特定的像素宽度。

但是，高度有所不同，因为块元素高度由内容决定。如果没有明确定义父元素的高度，则分配 height: 50% 是不明确的。父元素和子元素之间的这种反馈循环在确定最终高度时产生了不确定性。要打破这个循环，父元素必须具有指定的高度。

以上是为什么 CSS 中的百分比高度与百分比宽度的行为不同？的详细内容。更多信息请关注PHP中文网其他相关文章！