内联元素内放入块级元素会出现什么情况呢？

最新推荐文章于 2024-03-31 19:45:48 发布

原创

最新推荐文章于 2024-03-31 19:45:48 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

本文探讨了内联元素不应嵌套块级元素的规则，并通过实例展示了违反这一规则时的效果。实验结果显示，内联元素中嵌套块级元素会导致选择元素时的范围异常，同时内嵌的块级元素并未按内联方式排列，而是保持了其原有的宽度和独立行显示。

我们知道元素可分为块级元素和内联元素，也知道块级元素内既可以嵌套内联元素也可以嵌套块级元素，但是内联元素就只能嵌套内联元素，不可以嵌套块级元素，当然表格下的tr除外，那么如果违反了规定会出现什么样的效果呢？？
代码如下所示

<!--内联元素内嵌套块级元素的展示效果-->
<div>
    这是块级元素
    <div style="width: 200px;height: 200px;background-color: #00bbbb;">这是块级元素</div>
</div>
<span>这是内联元素
    <div style="width: 200px;height: 200px;background-color: #00bbbb;">这是块级元素