问题描述
嗨
我在几个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
推荐答案
你可以这样说，虽然我会用...来描述它......好吧，
块。
You can put it that way, though I would describe it in terms of... well,
blocks.
你怎么能打破不存在的东西？
之前没有什么< divtag应该生成一行。
也许你期望换行意味着空行？好吧，它没有。
此外，玩没有实际内容的< divelements有点
人工。浏览器可能有自己的，不同的想法如何
渲染< div>< / div>，< div< / divand< div>& nbsp;< / div> ;。你为什么要使用
呢？
-
Jukka K. Korpela（Yucca）
这篇关于CSS块级元素和换行符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！