问题描述
我一直在阅读CSS2的定义，但是我很难获得某些
概念的确切含义。
这是一个有效的html和css文件：
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.01 // EN"
" http：//www.w3.org/TR/html4/strict.dtd">
< html>
< head>
< title> Float，Relative和Containment< / title>
< meta http-equiv =" ;内容类型"含量=" text / html的; charset = iso-8859-1">
< style type =" text / css">
div＃container
{background-color：teal;
position：relative;
border：solid thin green;保证金：0;填充：0;
}
div #floater
{float：left; background-color：透明;
宽度：32％;
border：solid thin blue;保证金：0;
}
div＃inner
{width：33％;
position：relative;左：33％;顶部：0;
边框：坚固的薄红色;保证金：0;
}
div＃bottommatter
{clear：both;
background-color：yellow ;最小高度：10mm;
边框：坚固的薄红色;保证金：0;
}
< / style>
< / head>
< body>
< h1>序言< / h1>
< p>容器前的东西
< / p>
< div id =" container">
< div id =" floater">
< h2>向左浮动< / h2>
< p> line< br> line< br> line< br> line< br> line< br> line< br> line< br> line< br>
line< br> line< br> line< br> line< br> line< br> line< br> li ne< br> line< br>
line< br> line< br> line< br> ; line< br> line< br> line< br> li ne< br> line< br>
line< br> line< br> line< br> line< br> line< br> line< br> li ne< br> line< br>
< / p>
< p>这个文本是否应该在容器的边界内具有蓝绿色背景？
< / p>
< / div>
< div id =" inner">
< h2>相对，左：33％，上：0< / h2>
< p>该块出现在哪里（水平）？< / p>
< p>这个区块中的文字应该（垂直）出现在哪里？< / p>
< / div>
<！ - < div style =" clear：both">< / div>
取消注释此分区，很明显
float应该包含在
蓝绿色容器。
- >
< / div>
< div id =" bottommatter">
底部横幅
< / div>
< / html>
它可以在网上找到，但在你用你的
最喜欢的浏览器查看之前，看看你是否可以告诉我它应该如何*
出现，回答文中的问题。
Mozilla 1.7.2，firefox 1.0PR和konqueror 3.1.4-7所有
以同样的方式显示，虽然不是我期待。歌剧
7.54 Final给出了关于收容的不同意见
问题，W98上的MSIE6在一个独立的世界中，
虽然在一个方面做了我期望的，当没有其他人没有。> / b $ b对于收容问题，我看到了这个（REC-CSS2,11.1）：
通常，块框的内容仅限于框的
内容边缘。在某些情况下，一个盒子可能会溢出，这意味着它的内容部分或全部位于盒子外面，例如：
*一条线不能被破坏，导致线盒比块盒宽
。
*块级盒子太宽了包含
块。这可能发生在元素''''width''
属性的值导致生成的
块框溢出包含
块。
*元素'的高度超过显式高度
分配给包含块（即
包含块的高度由
''height''属性决定，而不是由内容高度确定。
* A盒子绝对定位。
*它有负的利润。
这些都不适用。其他人在那里？
对于内部区块的水平位置（9.3; 9.3.1）：
2浮动。
在浮动模型中，首先根据正常流量将一个框格式化为
，然后将其从流程中取出并将
移至左侧或者直到
为止。内容可能会沿着浮子的一侧流动。
[...]
亲戚
盒子的位置是根据
正常流量计算的（这称为正常位置的流量）。然后该框相对于其正常的
位置偏移。当一个方框B相对定位时，下一个方框的
位置计算好像
B没有抵消。
在查看< URL：
> ;?
-
$ b $bJónFairbairn
I keep reading the definition of CSS2, but am having
difficulty acquiring the precise meaning of certain of the
concepts.
Here''s a document with valid html and css:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Float, Relative and Containment</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
div#container
{background-color: teal;
position: relative;
border: solid thin green; margin: 0; padding: 0;
}
div#floater
{float: left; background-color: transparent;
width: 32%;
border: solid thin blue; margin: 0;
}
div#inner
{width: 33%;
position: relative; left: 33%; top: 0;
border: solid thin red; margin: 0;
}
div#bottommatter
{clear: both;
background-color: yellow; min-height: 10mm;
border: solid thin red; margin: 0;
}
</style>
</head>
<body>
<h1> Preamble </h1>
<p>Stuff before the container
</p>
<div id="container">
<div id="floater">
<h2>Floating left</h2>
<p>line<br>line<br>line<br>line<br>line<br>line<br >line<br>line<br>
line<br>line<br>line<br>line<br>line<br>line<br>li ne<br>line<br>
line<br>line<br>line<br>line<br>line<br>line<br>li ne<br>line<br>
line<br>line<br>line<br>line<br>line<br>line<br>li ne<br>line<br>
</p>
<p> Should this text be within the boundary of the container
with the teal background?
</p>
</div>
<div id="inner">
<h2>Relative, left: 33%, top: 0</h2>
<p> Where (horizontally) should this block appear?</p>
<p> Where (vertically) should the text in this block appear?</p>
</div>
<!-- <div style="clear: both"></div>
Uncomment this division and it is clear that the
float should be contained within the bounds of the
teal container.
-->
</div>
<div id="bottommatter">
Bottom banner
</div>
</html>
It is available on line, but before you look at it with your
favourite browser, see if you can tell me how it *should*
appear, answering the questions in the text.
Mozilla 1.7.2, firefox 1.0PR and konqueror 3.1.4-7 all
display the same way, though not as I would expect. Opera
7.54 Final gives a different opinion about the containment
question, and MSIE6 on W98 is in a world of its own,
although in one respect does what I expect when none of the
others does.
For the containment question, I see this (REC-CSS2, 11.1):
Generally, the content of a block box is confined to the
content edges of the box. In certain cases, a box may
overflow, meaning its content lies partly or entirely
outside of the box, e.g.:
* A line cannot be broken, causing the line box to be
wider than the block box.
* A block-level box is too wide for the containing
block. This may happen when an element''s ''width''
property has a value that causes the generated
block box to spill over sides of the containing
block.
* An element''s height exceeds an explicit height
assigned to the containing block (i.e., the
containing block''s height is determined by the
''height'' property, not by content height).
* A box is positioned absolutely.
* It has negative margins.
none of these applies. What others are there?
For the horizontal position of the inner block (9.3; 9.3.1):
2 Floats.
In the float model, a box is first laid out according
to the normal flow, then taken out of the flow and
shifted to the left or right as far as
possible. Content may flow along the side of a float.
[...]
relative
The box''s position is calculated according to the
normal flow (this is called the position in normal
flow). Then the box is offset relative to its normal
position. When a box B is relatively positioned, the
position of the following box is calculated as though
B were not offset.
Anyone care to commit to an answer before looking at <URL:
http://www.cl.cam.ac.uk/~jf/FloatAndRelative.html >?
--
Jón Fairbairn Jo***********@cl.cam.ac.uk
推荐答案
404
-
Lauri Raittila < HTTP：//www.iki.fi/lr> < http://www.iki.fi/zwak/fonts>
404
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
即< URL：> ;?
和勘误表为CSS2
ie< URL：>？
你是否包括勘误表到来自邮件的勘误表
列出？当然CSS21包含REC-CSS2-19980512-errata？
白衣：
·合并所有已发布的CSS2勘误表。
所以我只需要阅读CSS21？至少它比CSS2短了几个元b $ b千字，但它也说：
作为候选推荐标准出版并不意味着
由W3C会员资格认可。除了正在进行的工作之外，
引用这个文件是不合适的。
所以我不认为它是一个权威。
准确地说这些文件的哪些（组合）（如果
any）用户代理是否符合要求？
CSS21还包括可能令人放心的：
·哪些实现与CSS2
规范完全不同，将规范修改为
按照普遍接受的惯例。
但是鉴于我发布的代码产生了来自四个不同引擎的三种不同的
效果，我没有找到
可以实现的潜力。
ie <URL: http://www.w3.org/TR/CSS21/ >?
and errata for CSS2
ie <URL: http://www.w3.org/Style/css2-updates...12-errata.html >?
do you include the errata to the errata from the mailing
lists? Surely CSS21 subsumes REC-CSS2-19980512-errata?
To whit:
· Incorporating all published CSS2 errata.
so I should only need to read CSS21? At least it''s a few
thousand words shorter than CSS2, but it also says:
Publication as a Candidate Recommendation does not imply
endorsement by the W3C Membership. It is inappropriate to
cite this document as other than work in progress.
So I don''t really think it counts as an authority.
To precisely which (combinations) of these documents (if
any) do the user agents conform?
CSS21 also includes the potentially reassuring:
· Where implementations overwhelmingly differ from the CSS2
specification, modifying the specification to be in
accordance with generally accepted practice.
but given that the code I posted produces three different
effects from four different engines, I don''t find the
potential to be realised.
404
404
哎呀！但这应该让你有机会说出b $ b b应该发生什么，而不是看看会发生什么，如果不是这样的话？
它本应该读取<网址：
假设我设法正确剪切并粘贴了这个
Whoops! But that should give you a chance to say what should
happen, without looking at what does happen, should it not?
It should have read <URL:
http://www.cl.cam.ac.uk/~jf/StyleTes...dRelative.html assuming that I managed to cut and paste it properly this
时间。 />
-
$ b $bJónFairbairn
在comp.infosystems中的
即< URL：>？
Yup
Yup
Whoops! But that should give you a chance to say what should
happen, without looking at what does happen, should it not?
我更喜欢看代码我的编辑，而不是我的新闻客户。并且使用英语来解释它应该如何运作是痛苦的。更容易
比较差异...
我可以很容易地想象它应该如何渲染。我需要花费很长时间才能描述它，你仍然很可能不会理解。一张图片
正如他们所说的那样价值1000字。
它应该读取< URL：
永远不要手工输入网址，如果可以避免的话。你只是犯了
的错误...
-
Lauri Raittila< http://www.iki.fi / LR> < http://www.iki.fi/zwak/fonts>
Never ever type URL by hand, if you can avoid it. You just make
mistakes...
--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
这篇关于难题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！