我不确定你是否会认为这是对你的问题的完整答案,因为我知道你正在使用< td>在您的示例中,< td>之间存在一个差异.和< dd>或者< li>元素是< td>的事实.在不破坏< table>的情况下,元素不能与其周围元素相抵消具体行为.但至少我可以回答你的第三个问题的一部分：
If it’s true that it’s not possible to define a CSS rule which creates the same format for both kinds of HTML…
事实并非如此,你总是可以渲染一个浮动：前面的伪元素,宽度为100％;设置,并设置兄弟的一半边缘< p>它上面的元素.
dd {
border: 1px dashed lightblue; /* this line is for demonstration purposes only */
}
dd:before {
float: left;
content: "";
width: 100%;
margin: 0.5em;
}
An introductory sentence as a text node.
A further sentence as a paragraph.
An introductory sentence as a paragraph.
A further sentence as a paragraph.
这引入了一个空的“虚拟”段落,它只影响< dd>的直接文本节点.作为< p>元素只会执行their automatic margin collapsing magic而不是向下移动.我认为这证明至少可以定义一个CSS规则,它为这两种HTML创建相同的格式.
这是如何工作的,或者至少我理解这是如何工作的. W3C在CSS规范中有一个例子,它告诉我们问题中的文本节点必须是anonymous block box,因为它是一个文本节点,在一个带有display：block的框内呈现;设置,< dd>,它有一个带display：block的兄弟;设置,< p>.
通过添加伪元素 – 在此匿名块框内呈现(它必须是,因为否则它将永远不会像内联元素一样,或者它可能呈现为两个anonymous inline boxes,没有包含块框) – 但无论如何,我们最终得到两个匿名内联框(伪元素和文本节点).
下一步是获取这些匿名内联框中的第一个,伪元素,并通过向左浮动将其从正常流中取出,然后将其宽度设置为100％,并使其占据与高度匹配的高度兄弟&< p>的余量(我通过设置< p>的余量的一半来完成,但你可以通过设置与< p>的匹配的高度或下边距来做同样的事情.保证金).
现在前面的文本节点有一个人为的上边距.问题仍然存在,为什么这不会影响< p>如果没有前面的文本节点？我认为这是因为 – 因为没有前面的文本节点 – 伪元素本身被渲染为应用它的元素内的空匿名块框(作为伪元素,内容总是在应用它们的元素内部呈现),这与渲染空的< span>基本相同< p>之前的元素.
这是一个概念证明：
dd {
border: 1px dashed lightblue;
}
span {
float: left;
height: 1em;
width: 100%;
background-color: lightgray;
}
dd:not(:first-child)::before {
content: "";
float: left;
height: 1em;
width: 100%;
background-color: lightgray;
}
The dashed light blue line marks the paragraphs margin Box,the light grey Box is the span.
The dashed light blue line marks the paragraphs margin Box,the light grey Box is the pseudo element.
这个“人工边缘”是一个左浮动的块框(在伪元素的情况下是匿名块框)在其包含元素内.如果他们需要,所有其他的块盒都将向下移动(因为它们是根据W3C floating spec假设浮动盒子没有为它们留下任何空间),这只发生在浮动盒开始超出它的边缘时隐藏,并且它不会在这个特定问题的解决方案中发生,因为我特意将人工边缘设置为与< p>的实际边缘一样高.
我认为秘密在于W3C浮动规范的这一部分,这有点难以理解：
Since a float is not in the flow,non-positioned block Boxes created
before and after the float Box flow vertically as if the float did not
exist. However,the current and subsequent line Boxes created next to
the float are shortened as necessary to make room for the margin Box
of the float.
A line Box is next to a float when there exists a vertical position
that satisfies all of these four conditions: (a) at or below the top
of the line Box,(b) at or above the bottom of the line Box,(c) below
the top margin edge of the float,and (d) above the bottom margin edge
of the float.
Note: this means that floats with zero outer height or negative outer
height do not shorten line Boxes.
If a shortened line Box is too small to contain any content,then the
line Box is shifted downward (and its width recomputed) until either
some content fits or there are no more floats present. Any content in
the current line before a floated Box is reflowed in the same line on
the other side of the float. In other words,if inline-level Boxes are
placed on the line before a left float is encountered that fits in the
remaining line Box space,the left float is placed on that line,
aligned with the top of the line Box,and then the inline-level Boxes
already on the line are moved accordingly to the right of the float
(the right being the other side of the left float) and vice versa for
rtl and right floats.
我理解这是指“在浮动框垂直流动之前和之后创建的非定位块框,就像浮动不存在一样”,因此< p> s,非定位块框不应受到浮箱子.
但这并不意味着什么.相反,它指出,当盒子向左浮动时,在浮动盒子的右侧创建一个线框,填充浮动盒子右侧和容纳盒子右侧之间的空间.并且在该行框内部存在块框,该框是随后的< p>元件.如果那< p>元素可以适合满足上述四个条件的空间,它将位于行框中的浮点旁边.
由于浮点数设置为100％的宽度,因此< p>不适合浮动的盒子旁边,它坐在它的线框内,向下移动到下一行,它以某种方式神奇地决定部分地遵守规则的第一部分：“之前创建的非定位块盒和在浮动框垂直流动之后,好像浮动不存在“,这似乎只是边缘的真实,因为只要浮动框超出边距,块框就会开始向下移动,也许是因为它位于还有一个线盒..
现在除了< td>之外的所有内容如果通过将包含内容的元素与其包含元素相抵消可以轻松完成,则可以轻松地将顶部添加的空间消失,这将非常简单.
dd {
position: absolute;
margin-top: -1em;
}
dd:before {
float: left;
content: "";
width: 100%;
margin: 0.5em;
}
div {
position: relative;
/* everything below this line is for demonstration purposes only */
border-top: 1px dashed lightblue;
height: 80px;
}
An introductory sentence as a text node.
A further sentence as a paragraph.
An introductory sentence as a paragraph.
A further sentence as a paragraph.
我认为回答第二个问题,至少对于< dd>和< li>元素,甚至允许前一个文本节点中的内联元素.
如果你想在< td>内进行此操作你必须开始管理< td>或< table>高度其他方式,因为你必须在< td>内使用绝对定位.并通过将表格单元格设置为display来阻止表格增长的默认表格行为：block; (或者通过在< td>中渲染一个额外的< div>并将其用作块级元素,但这也会破坏默认的单元格增长行为).
table
{
width: 100%;
min-height: 80px;
float: left;
}
dd {
position: absolute;
margin-top: -1em;
}
dd:before {
float: left;
content: "";
width: 100%;
margin: 0.5em;
}
td {
position: relative;
display: block;
border-top: 1px dashed lightblue; /* this line is for demonstration purposes only */
}
An introductory sentence as a text node. A further sentence as a paragraph. |
An introductory sentence as a paragraph. A further sentence as a paragraph. |
