子元素类型对父元素高度的影响
在 html 和
css
中，子元素的类型可能会对父元素的高度产生影响。考虑以下示例：
`
` 此示例中，子元素 具有行高 50px，而父元素.outerbox1 { 使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件 如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更 下载这是外层元1width: 600px; line-height: 300px; background-color: thistle; } .outerbox1 span { display: inline-block; // 此处改成block，父元素高度有变化，为什么？ /* display: block; */ background-color: teal; }
具有行高 300px。当子元素为行内元素（display: inline）时，父元素的高度会被限制为其子元素的最大高度。
然而，当子元素更改为块元素（display: block）时，父元素的高度会发生变化：
因为块元素占据整个可用宽度， 的宽度与
相同（600px）。
的 line-height 属性会应用于子元素 。然而， 自己的行高属性优先级更高，因此 的高度仍为 50px。
由于 是唯一子元素，
的高度被调整为匹配其子元素的高度，即 50px。
因此，尽管
的 line-height 设置为 300px，但由于其子元素 的 display 属性更改为 block，
的实际高度缩小至 50px。