【问题标题】:<HTML> and <BODY>: Why are there no new lines?<HTML> 和 <BODY>:为什么没有新行?
【发布时间】:2013-02-28 04:23:20
【问题描述】:

所以我读到&lt;html&gt;&lt;body&gt; 是块级元素,就像&lt;div&gt;&lt;p&gt; 一样。

我知道块级元素开始一个新行。

例如aaa&lt;div&gt;b&lt;/div&gt;ccc 看起来像这样:

aaa
b
ccc

那么,为什么不&lt;html&gt;&lt;body&gt; 在您的html 页面顶部添加两行?

【问题讨论】:

  • 他们只是在定义标签,并没有真正将内容放在任何地方。

标签: html line-breaks


【解决方案1】:

块级元素不会“开始新行”...它们只是无限期地扩展到两侧,直到碰到容器元素或显示器的侧面(width:100%)...因此,它们有将任何其他内容“推”到它们下方,或放在它们之前的任何内联内容下方的效果。这也意味着块级元素只会“下推”兄弟级元素。

&lt;html&gt;&lt;body&gt; 元素没有兄弟姐妹,只有孩子,所以他们不需要置换任何东西。

这是正在发生的事情的图形表示:

鉴于此标记:

<html>
<head></head>
<body>
  <div>&nbsp;</div>
  <div>&nbsp;</div>
  <div style='width:45%; float:left;'>
    <div>&nbsp;</div>
  </div>
  <div style='width:45%; float:left;'>&nbsp;</div>
</div>
</body>
</html>

【讨论】:

  • 漂亮的图形! (更多字符)
  • 很棒的答案。谢谢 我想我现在明白了。因此,默认情况下,块级元素设置为 100% 宽度,这就是为什么它们将自身以及之后的所有内容向下推?除非你改变宽度?
  • 好吧,在这里扮演魔鬼代言人,如果你做了data and stuff...,理论上身体会在一个新的行比“数据和东西”?
  • 是的,大多数浏览器会将正文块推到文本下方。如果您在没有错误处理程序的情况下进行任何服务器端编程,您会注意到页面上的错误消息printed 将出现在&lt;body&gt;(和&lt;html&gt;)标签上方,因为服务器正在发送error message text&lt;html&gt;...&lt;/html&gt;返回浏览器。
【解决方案2】:

这样想:

<div>
    <div>Text</div>
</div>

只有一行文字:

文字

这就像正文中有任何文本的情况:

<html>
    <body>Text</body>
</html>

当文本在子元素中时,不引入新行。

【讨论】:

    【解决方案3】:

    它们是定义页面的块元素。浏览器控制他们想要如何查看它。您可能会发现一些糟糕的浏览器通过添加新行来显示&lt;body&gt;(这是可能的)。但是,您的主要关注点是将&lt;body&gt;&lt;html&gt; 标签视为在屏幕上显示所有内容的标签。 我还想补充一点,您可以使用标签来完全适应浏览器屏幕,方法是使用

    body {padding:0;margin:0;}
    

    希望这会有所帮助。

    【讨论】:

      【解决方案4】:

      块级元素默认情况下(即,当不使用 CSS 来改变这一点时)在前后暗示 换行。它们并不意味着空行

      所以当您有&lt;div&gt;foo&lt;/div&gt; 时,“foo”会出现在新行的开头,并且它也是一行,即它后面的任何文本都在下一行。但这并不意味着创建空行。如果你有&lt;div&gt;foo&lt;/div&gt;&lt;div&gt;bar&lt;/div&gt;,那么“foo”和“bar”出现在连续的行上,它们之间没有空行。

      html 元素本身不会生成可见内容;仅显示其中的 body 元素。 body 内容从页面的开头开始,这被视为从新行开始。是否有&lt;body&gt; 标签无关紧要;总是有body 元素,它从第一行开始。

      【讨论】:

      • "html 元素本身不会生成可见内容;只显示其中的 body 元素。"见jsfiddle.net/NxSm6
      猜你喜欢
      • 1970-01-01
      • 2011-09-12
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-09-25
      • 1970-01-01
      • 2015-12-08
      • 2011-05-18
      相关资源
      最近更新 更多