元素之间嵌套

刚刚无意中用p元素嵌套了div元素。
发现div后面的元素没有采用p的css
上网搜了一下；
p元素不能嵌套div元素
不然会渲染会变成这样：

<p>11111<div>22222</div>22222</p>
<p>11111</p><div>22222</div>22222<p></p>

总结一下：

1内联不能嵌套块级，块级可以嵌套内联元素；

有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1、h2、h3、h4、h5、h6、p、dt。所以说p里面不能嵌套div。

2特殊的<li>里面可以嵌套div

css计算规则：

1：块级只包含块级的时候，进入的模式是块级∈块级模式，相关计算规则大致是内层宽自适应于外层的content-box的宽；外层的content-box自适应于内部所有块级容器的高；等等等等。

2：块级只包含内联元素的时候，进入的模式是内联∈块级模式，相关的规则大致是：内联构成line-box，line-box的高由内联元素的高、line-height和vertical-align决定；通过断行算法，内联元素组成N个line-box，line-box的宽由块级元素的content-box的宽决定；各个line-box撑高块级；等等等等。

3：块级元素同时包含块级元素和内联元素的时候，会为每个内联元素创建匿名块，从而拆解问题为块级/匿名块∈块级模式和内联∈块级/匿名块模式，回到规则1,2去计算各个元素的最终宽、高。