HTML DOM树生成之 匿名元素

匿名(anonymous)元素有两种:  匿名 block 元素 和 匿名 inline 元素.

匿名元素是指原来的DOM树中不存在的元素，但是为了满足CSS标准  而出现的一种元素。

 

什么时候会出现匿名元素呢？ 这要分情况来说:

 

第一种情况:

block 元素内部包含有 block 元素和 inline 元素, 如:

 

<div> this is some text! <p> this is another text! </p> </div>

 

这样，为了满足CSS的标准:

一个匿名block 被生成:

 

<div> <匿名block> this is some text! </匿名block> <p> this is anthoer text </p> </div>

 

第二种情况:

当block 元素内部包含有匿名文本(Anonymous Text)和inline元素, 如:

<div> this is anonymous text! <em> this is another text included by EM </em> </div>

 

 

为了满足CSS标准, 一个匿名inline 被生成

 

<div> <匿名inline> this is anonymous text! </匿名inline> <em> this is another text included by EM </em> </div>

总结: block 元素内部要么全部是block元素，要么全部是inline元素 . (不考虑浮动块和绝对定位块).

 

第三种情况:

这种情况比较复杂， CSS规定 inline 元素内部只能包含inline元素. 但是如果还是有哪个网页作者，坚持要在inline元素里面插入包含block元素，如:

<em> this is some text! <div> this is anthoer text included by a block! </div> </em>

 

那么这时候， inline元素 <em></em> 会被破坏，拆成两部分，并且本身也被匿名block包含

<匿名block> <匿名block> <em>this is some text</em> </匿名block> <匿名block> <div> this is anther text included by a block </div> </匿名block> </匿名block>