首先,模板网写了个如下的代码,运行后发现正常,火狐firebug也显示了正常解析:
提示:您可以先修改部分代码再运行
火狐firebug解析如下:
当模板网把div放到p里面就出问题了:
<p style="border:3px solid red; width:300px; height:100px;"> <div style="border:3px solid #000; width:280px; height:80px;"></div> </p>运行后还是和上面没有放到里面一个效果:
火狐firebug解析的代码如下,它把p直接分成两份,就像div是把刀,把p切成了两部分:
由此可见,p标签内部是不能嵌套div标签的。那么,如果把div变成行内标签呢,模板网给div加了“display:inline;”的样式,发现仍旧没有效果,只是div变成了黑条。
继续推理,p标签能不能嵌套其他块状标签呢,比如再嵌套个p。经过模板网测试,发现,p内部不能嵌套div、p、ul等等。估计,的确不能嵌套块状标签吧,即使把块状标签变成行内标签仍旧没有作用。
再继续推理,p标签能不能嵌套行内标签呢?经过测试,可以。即使把行内标签变成块状标签也可以,测试代码和效果图如下:
<p style="border:3px solid red; width:300px; height:100px;"> <span style="border:3px solid #000; width:280px; height:80px; display:block">dddd</span> </p>