CSS块级元素和换行符 [英] CSS Block-level elements and line breaks
问题描述
嗨
我在几个CSS教程中读到了块级元素，例如
< div& <之前使用隐式换行符进行渲染，之后使用
进行渲染。
我设置使用以下HTML测试它：
我在评论中包含了我希望在渲染输出中看到换行符（例如新的
行）的评论。
<正文>
<！ - 上面的换行符 - >
< div id =" ContainingBlock1" style =" background-color：red;">
<！ - 上面的换行符 - >
< div id = QUOT; ContainingBlock2" style =" background-color：blue;">
<！ - 上面的换行符 - >
Anonymous Block 3
<！ - 下面的换行符 - >
<！ - 换行符 - >
< p id =" ContainingBlock4"风格= QUOT;宽度：100像素;身高：100px;
背景色：紫色;颜色：白色;">
<！ - 上面的换行符 - >
Anonymous Block 5
<！ - 上面的换行符 - >
< / p>
<！ - 下面的换行符 - >
< / div>
<！ - 下面的换行符 - >
<！ - 换行符 - >
< p id =" ContainingBlock6"风格= QUOT;宽度：100像素;身高：100px;背景 -
颜色：绿色;颜色：白色;">
<！ - 上面的换行符 - >
Anonymous Block 7
<！ - 下面的换行符 - >
< / p>
<！ - 下面的换行符 - >
< / div>
<！ - 下面的换行符 - >
<！ - 上面的换行符 - - >
< div id =" ContainingBlock8" style =" background-color：red;">
<！ - 换行符 - >
< div id =" ContainingBlock9" ;风格= QUOT;宽度：100像素;身高：100px;
背景颜色：蓝色;">
< / div<！ - 下面的换行符 - >
<！ - 上面的换行符 - >
< div id =" ContainingBlock10"风格= QUOT;宽度：100像素;身高：100px;
背景颜色：绿色;">
< / div>
<！ - 换行下面 - >
< / div>
<！ - 下面的换行符 - >
< / body> ;
在IE 7和IE中都呈现上述HTML Firefox 2.0.0.7在ContainingBlock2和& ;;之间只显示一个
换行符。在ContainingBlock1和ContainingBlock9之间包含Block6以及
有人可以解释一下吗？
谢谢，
Itai
Hi
I read in several CSS tutorials that block-level elements, such as
<div& <pare rendered with an implicit line break before and
after.
I set to test this out using the following HTML:
I included comments where I would expect to see line breaks (e.g a new
line) in the rendered output.
<body>
<!-- Line break above-- >
<div id="ContainingBlock1" style="background-color:red;">
<!-- Line break above-- >
<div id="ContainingBlock2" style="background-color:blue;">
<!-- Line break above-- >
Anonymous Block 3
<!-- Line break below -->
<!-- Line break above-- >
<p id="ContainingBlock4" style="width:100px; height: 100px;
background-color:Purple; color:White;">
<!-- Line break above-- >
Anonymous Block 5
<!-- Line break above-- >
</p>
<!-- Line break below -->
</div>
<!-- Line break below -->
<!-- Line break above-- >
<p id="ContainingBlock6" style="width:100px; height: 100px; background-
color:green; color:White;">
<!-- Line break above-- >
Anonymous Block 7
<!-- Line break below -->
</p>
<!-- Line break below -->
</div>
<!-- Line break below -->
<!-- Line break above -->
<div id="ContainingBlock8" style="background-color:red;">
<!-- Line break above-- >
<div id="ContainingBlock9" style="width:100px; height: 100px;
background-color:blue;">
</div<!-- Line break below -->
<!-- Line break above-- >
<div id="ContainingBlock10" style="width:100px; height: 100px;
background-color:green;">
</div>
<!-- Line break below -->
</div>
<!-- Line break below -->
</body>
Rendering the above HTML both in IE 7 & Firefox 2.0.0.7 show only one
line break between ContainingBlock2 & ContainingBlock6 as well as
between ContainingBlock1 and ContainingBlock9
Can someone please explain this?
Thanks,
Itai
推荐答案
Scripsit Itaichuk：
Scripsit Itaichuk:
我在几个CSS教程中读到了块级元素，例如
< div& <之前使用隐式换行符进行渲染，然后使用
。
I read in several CSS tutorials that block-level elements, such as
<div& <pare rendered with an implicit line break before and
after.
你可以这样说，虽然我会用...来描述它......好吧，
块。
You can put it that way, though I would describe it in terms of... well,
blocks.
我在评论中包含了我希望在渲染输出中看到换行符（例如新的
行）的评论。
< body>
<！ - 上面的换行符 - >
< div id =" ContainingBlock1"风格= QUOT;背景颜色：红;">
I included comments where I would expect to see line breaks (e.g a new
line) in the rendered output.
<body>
<!-- Line break above-- >
<div id="ContainingBlock1" style="background-color:red;">
你怎么能打破不存在的东西？
之前没有什么< divtag应该生成一行。
也许你期望换行意味着空行？好吧，它没有。
此外，玩没有实际内容的< divelements有点
人工。浏览器可能有自己的，不同的想法如何
渲染< div>< / div>，< div< / divand< div>& nbsp;< / div> ;。你为什么要使用
呢？
-
Jukka K. Korpela（Yucca）
http://www.cs.tut.fi/~jkorpela/
How can you a break something that does not exist? There is nothing before
the <divtag that should generate a line.
Maybe you expect line break to mean an empty line? Well, it doesn''t.
Besides, playing with <divelements with no real content is somewhat
artificial. Browsers might have their own, and different, ideas of how to
render <div></div>, <div</divand <div> </div>. Why would you use
them?
--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
< body>
<body>
<！ - 上面的换行符 - >
< div id =" ; ContainingBlock1"风格= QUOT;背景颜色：红;">
<!-- Line break above-- >
<div id="ContainingBlock1" style="background-color:red;">
你怎么能打破不存在的东西？
之前没有什么< divtag应该生成一行。
也许你期望换行意味着空行？嗯，它不是。
How can you a break something that does not exist? There is nothing before
the <divtag that should generate a line.
Maybe you expect line break to mean an empty line? Well, it doesn''t.
您如何解释新行？ ContainingBlock2&
ContainingBlock6以及
之间ContainingBlock1和ContainingBlock9？
how would you explain the "new lines" between ContainingBlock2 &
ContainingBlock6 as well as
between ContainingBlock1 and ContainingBlock9?
>
此外，玩没有实际内容的< divelements有点
人工。浏览器可能有自己的，不同的想法如何
渲染< div>< / div>，< div< / divand< div>& nbsp;< / div> ;。你为什么要使用
呢？
>
Besides, playing with <divelements with no real content is somewhat
artificial. Browsers might have their own, and different, ideas of how to
render <div></div>, <div</divand <div> </div>. Why would you use
them?
我指的是''盒子模型''以及与
块元素相关的换行符。
如果DIV / P是块元素，并且换行符是
定义的一部分
那么我预计内容的缺失不会破坏
型号？
I''m referring to the ''box model'' and the line breaks associated with
block elements.
if DIV/P are block elements and line breaks are part of the
definition
then I would expect that the absence of content will not break the
model?
>
-
Jukka K. Korpela（Yucca） http：// www。 cs.tut.fi/~jkorpela/
Itaichuk写道：
Itaichuk wrote:
>>< body>
<！ - 上面的换行符 - >
< div id = " ContainingBlock1"风格= QUOT;背景颜色：红;">
>><body>
<!-- Line break above-- >
<div id="ContainingBlock1" style="background-color:red;">
你怎么能打破不存在的东西？
< divtag之前没有什么可以产生一条线。
也许你认为换行意味着空行？嗯，它不是。
How can you a break something that does not exist? There is nothing before
the <divtag that should generate a line.
Maybe you expect line break to mean an empty line? Well, it doesn''t.
您如何解释新行？在ContainingBlock2&
ContainingBlock6之间以及
之间ContainingBlock1和ContainingBlock9？
how would you explain the "new lines" between ContainingBlock2 &
ContainingBlock6 as well as
between ContainingBlock1 and ContainingBlock9?
你的意思是 ;边距？
Do you mean the "margins"?
>此外，使用<没有真实内容的潜水部分玩耍有点人为。浏览器可能有自己的，不同的想法如何渲染< div>< / div>，< div< / divand< div>& nbsp;< / div>。你为什么要用它们？
>Besides, playing with <divelements with no real content is somewhat
artificial. Browsers might have their own, and different, ideas of how to
render <div></div>, <div</divand <div> </div>. Why would you use
them?
我指的是''盒子模型''以及与
块元素相关的换行符。
如果DIV / P是块元素，并且换行符是
定义的一部分
那么我预计内容的缺失不会破坏
型号？
I''m referring to the ''box model'' and the line breaks associated with
block elements.
if DIV/P are block elements and line breaks are part of the
definition
then I would expect that the absence of content will not break the
model?
所有的盒子模型意味着当一个块元素结束而另一个块元素开始第二个''时s内容将在另一行，即不是内联的！
< div> Block 1< / div>< div> Block 2< / div>
Block 2将显示在Block 1下方，现在如果您正在谈论
之间的额外空间，那是'边距而不是换行符......
-
保重，
Jonathan
-------------- -----
LITTLE WORKS STUDIO
http：// www.LittleWorksStudio.com
这篇关于CSS块级元素和换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
