Question

html1和html2之间只有一个区别。
html2中只有7个字符（也就是说一对标签：<p><>/p>）而不是html1。
对于html1：

<html>
<style type="text/css">
#content{
  width:873px;
  height:400px;
  border:1px solid green;
}
#content_left{
  float:left;
  width:398px;
  height:300px;
  border:1px solid red;
}
#content_right{
  float:left;
  width:471px;
  height:300px;
  border:1px solid red;
}    
</style>    
<body>
<div id="content">i am here
  <div id="content_left">content_left
  </div>
  <div id="content_right">content_right
  </div>
</div>
</body>
</html>

html1在firefox中解析如下。 SQLite.Net PCL 3.1.1

对于html2：

<html>
<style type="text/css">
#content{
  width:873px;
  height:400px;
  border:1px solid green;
}
#content_left{
  float:left;
  width:398px;
  height:300px;
  border:1px solid red;
}
#content_right{
  float:left;
  width:471px;
  height:300px;
  border:1px solid red;
}    
</style>   
<body>
<div id="content"><p>i am here</p>
  <div id="content_left">content_left
  </div>
  <div id="content_right">content_right
  </div>
</div>
</body>
</html>

html2在firefox中解析如下。

现在很明显，对于html2：
1.div内容包含三个子元素：p lable包含文本i am here，div content_left，content_right。它们是结构中的parent_son关系。

2.p lable和content_left和content_right是结构中的兄弟关系。

很明显html2是由firefox解析的。

让我们分析一下html1，文本i am here没有问题 firefox如何解析文本i am here？ i am here和content_left与content_right之间的关系是什么？为什么html1被firefox以这种方式解析？

Answer 1

没有p标记的文字被视为display:inline。如果你添加<p> .. </p>，那就是display:block因此，它的行为与图片中的行为类似。

如果您将display:inline添加到p，它将与第一个html相同。

p {
    display: inline;
}

Fiddle with display:inline in p

什么是在css模型中没有解析p标签的文本？

1 个答案: