CSS 中，嵌套元素的 display 属性对父元素高度的影响是什么？

大家好，今天本人给大家带来文章《CSS 中，嵌套元素的 display 属性对父元素高度的影响是什么？》，文中内容主要涉及到，如果你对文章方面的知识点感兴趣，那就请各位朋友继续看下去吧~希望能真正帮到你们，谢谢！

嵌套元素对父元素高度的影响

在 css 中，span 元素的 display 属性可以设为 inline-block 或 inline，这会影响其父元素的高度。以下是一段代码示例：

<div   style="max-width:100%">
  <span></span>
</div>

• 当 span 的 display 为 inline-block 时，div 的高度为 30px。
• 当 span 的 display 为 inline 时，div 的高度为 0。

原因

原因在于块级格式化上下文 (bfc) 和内联格式化上下文 (ifc) 的区别。

• 当 span 的 display 为 inline-block 时，它会创建自己的 bfc，并且不会影响其父元素的高度。
• 当 span 的 display 为 inline 时，它不会创建 bfc，并且会被视为其父元素内容的一部分。由于 div 没有任何其他内容，所以其高度为 0。

参考

• [why empty display inline block element create height but display inline and display block not?](https://stackoverflow.com/questions/15428710/why-empty-display-inline-block-element-create-height-but-display-inline-and-displa)
• [how to determine height of content-box of a block and inline element](https://stackoverflow.com/questions/14371045/html-how-to-determine-height-of-content-box-of-a-block-and-inline-element)

终于介绍完啦！小伙伴们，这篇关于《CSS 中，嵌套元素的 display 属性对父元素高度的影响是什么？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！