我们先上代码:
<p> 呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵 <div> 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 </div> 哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈 </p>
让我们看看浏览器的解析结果:
没错,出问题了,那么问题是有了,但这是为什么呢?
这时朋友跟我说:p 是行内元素,div 是块级元素,块级元素是不能放在行内元素里面的。
我:呃呃呃,就你这水平居然知道块级元素是不能放在行内元素里面的?那 p 明显是块级元素你咋不知道?
这里我们再补充一下块级元素和行内元素的区别:
块级元素: 不管内容多少,块元素都会在浏览器中独占一行。可设置宽高,如果不设置宽高那么它的宽度是100%(占满父级元素一整行)
行内元素**或称为内联元素**:内容决定所占空间的多少,内容多少就占多少空间。不能设置宽高(默认宽高是0)。margin 垂直方向无效(margin-top,margin-bottom),如果设置垂直方向用line-height属性。
仔细看看浏览器解析后的结果:
<p> 呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵 </p> <div> 嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿 </div> “哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈” <p></p>
我们发现浏览器是这么处理的:
在 p 遇见 div 还没有结束时自动给我们补上了
而后面遇见
而前面没有
时自己给我们加上了一个
其实仔细想想,它这么做确实没啥不对的,因为 html 标签的作用就是:专门给文本添加特殊的语义。那么我们的 p 标签的语义是啥?当然就是表明这是一个段落了,你往里塞一个会独占一行的 div 合适吗?显然是不合适的,那你 div 就把段落给切开来了,那么浏览器这么做也就没什么不对了,它不就是把你的段落给切开来了吗,哈哈。
所以我们要记住,p 里面不能放块级元素,像 div 或 p 这种东西可千万不要往 p 里面塞啊。