关于p标签不能嵌套其他块状标签

今天做项目的时候发现一个问题，例如设置html为下图所示

同时，设置css样式定义p高度为94px;得出的页面效果为

在并没有设置其他样式的情况下，发现并没有得到预料的效果，打开控制台，谷歌中解析的代码为

发现下面有一个空的p标签，而h3标签并没有在p里面，把p直接切成了两份，由此可见p标签内并不可以嵌套h3标签，其他块状的标签能不能嵌套呢？经过测试，发现，div，ul，h3，p等块状标签，并不能嵌套在内。

关于块级元素（block）与内联元素（inline）的区别：

块级元素用来搭建网站架构、布局、承载内容，负责整体的大的方面。块级元素总是会另起一行开始，其高度、行高和边距都是可控的。内联元素负责局部和细节，在同一行显示，其高度、行高和边距不可控。 通过display：block;或者display:inline两者可以相互转化。

而关于块级元素和内联元素的嵌套规则大致如下：

一、内联不能嵌套块级，块级可以嵌套内联元素

             <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>　　错误（块级和内联并列了）

 

 

转载于:https://my.oschina.net/u/3214926/blog/867296