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

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

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

我今天实验了一番,直接展示效果图做一个对比:
first
second

解析:
当我们点击最外层div时,展现的选择元素包括了其内部的div,并且宽度为518*211

而当我们点击第二张图的最外层的span元素时,其展现的元素仅仅只是span内的文字,而内嵌套的块级元素并没有包括,但是其宽度也是518*211,而且也没有实现内联效果,及元素不换行,如下图,同是内联元素,并没有在一行上显示
third

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页