0
点赞
收藏
分享

微信扫一扫

P不能做div的父元素?


P和div同为块元素,为什么P不能做div的父元素?

P不能做div的父元素?_嵌套


执行结果:

P不能做div的父元素?_块级元素_02


可以在控制台看到这样一段信息:

P不能做div的父元素?_块元素_03

div像一条分割线一样,把无辜的 P标签 一分为二

是什么原因导致的呢?
W3C这样说:“ 如果你这样做,将会严重违反P的语义 ”
解决方法暂时没有
于是我找到了块级元素和内联元素的嵌套规则,如下:

最基本:内联不能嵌套块级,块级可以嵌套内联元素

< div>< h1>< /h1>< p>< /p>< /div> 正确(块级并列)
< a href=“#”>< span>< /span>< /a> 正确(内联嵌套内联)
< span>< div>< /div>< /span> 错误(内联嵌套块级)

有几个特殊的块级元素只能包含内嵌元素,不能再包含块级元素

这几个特殊的标签是:h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div,就是我犯的错误。

< p>< ol>< li>< /li>< /ol>< /p> —— 错
< p>< div>< /div>< /p> —— 错

特殊的< li>里面可以嵌套div(< li>可以但< p>不行)

块级元素与块级元素并列、内联元素与内联元素并列

< div>< h2>< /h2>< p>< /p>< /div>  正确
< div>< a href=“#”>< /a>< span>< /span>< /div>  正确
< div>< h2>< /h2>< span>< /span>< /div>  错误(块级和内联并列了,正确的写法如下)

<div>
<h2></h2>
<div>
<span></span>
</div>
</div>

以上是它的嵌套规则,但违反了不一定报错,比如我经常用 a 标签去嵌套 div,就没有什么问题。

我是 “ 我不是费圆 ”,一个正在努力的人。

  前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。持续不断的努力才能让你我有所收获。


举报

相关推荐

0 条评论