如果块元素包含另一个块元素，则将块元素更改为与 CSS 内联是错误的吗?

2022-01-30 00:00:00 html css xhtml w3c

我知道将块元素放在内联元素中是错误的，但是下面呢?

I know it's wrong to put a block element inside an inline element, but what about the following?

想象一下这个有效的标记:

Imagine this valid markup:

<div><p>This is a paragraph</p></div>

现在添加这个 CSS:

Now add this CSS:

div {
   display:inline;
}

这会造成内联元素包含块元素的情况(div变为内联，p默认为块)

This creates a situation where an inline element contains a block element (The div becomes inline and the p is block by default)

页面元素是否仍然有效?

Are the page elements still valid?

我们如何以及何时判断 HTML 是否有效 - 在应用 CSS 规则之前或之后?

How and when do we judge if the HTML is valid - before or after the CSS rules are applied?

更新:我后来了解到，在 HTML5 中，将块级元素放在链接标签中是完全有效的，例如:

UPDATE: I've since learned that in HTML5 it is perfectly valid to put block level elements inside link tags eg:

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>

如果您想将一大块 HTML 用作链接，这实际上非常有用.

This is actually really useful if you want a large block of HTML to be a link.

推荐答案

来自 CSS 2.1 规范:

当内联框包含流内块级框时，内联框(及其在同一行框内的内联祖先)在块级框(以及任何连续或连续的块级兄弟姐妹)周围被打断.仅由可折叠的空格和/或流外元素分隔)，将内联框分成两个框(即使任一侧为空)，一个位于块级框的每一侧.断点前和断点后的行盒被封闭在匿名块盒中，块级盒成为这些匿名盒的兄弟.当这样的内联框受到相对定位的影响时，任何由此产生的平移也会影响内联框中包含的块级框.

When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes, and the block-level box becomes a sibling of those anonymous boxes. When such an inline box is affected by relative positioning, any resulting translation also affects the block-level box contained in the inline box.

如果满足以下规则，此模型将适用于以下示例:

This model would apply in the following example if the following rules:

p    { display: inline }
span { display: block }

与此 HTML 文档一起使用:

were used with this HTML document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
  <TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
  <BODY>
    <P>
      This is anonymous text before the SPAN.
      <SPAN>This is the content of SPAN.</SPAN>
      This is anonymous text after the SPAN.
    </P>
  </BODY>

P 元素包含一个匿名文本块 (C1)，后跟一个块级元素，然后是另一个匿名文本块 (C2).生成的盒子将是一个代表 BODY 的块盒子，包含 C1 周围的匿名块盒子、SPAN 块盒子和 C2 周围的另一个匿名块盒子.

The P element contains a chunk (C1) of anonymous text followed by a block-level element followed by another chunk (C2) of anonymous text. The resulting boxes would be a block box representing the BODY, containing an anonymous block box around C1, the SPAN block box, and another anonymous block box around C2.

匿名框的属性继承自封闭的非匿名框(例如，在标题匿名块框"小节下方的示例中，即 DIV 的那个).非继承属性有其初始值.例如匿名框的字体继承自DIV，但边距为0.

The properties of anonymous boxes are inherited from the enclosing non-anonymous box (e.g., in the example just below the subsection heading "Anonymous block boxes", the one for DIV). Non-inherited properties have their initial value. For example, the font of the anonymous box is inherited from the DIV, but the margins will be 0.

在元素上设置的导致匿名块框生成的属性仍然适用于该元素的框和内容.例如，如果在上例中的 P 元素上设置了边框，则边框将围绕 C1(在行尾打开)和 C2(在行首打开)绘制.

Properties set on elements that cause anonymous block boxes to be generated still apply to the boxes and content of that element. For example, if a border had been set on the P element in the above example, the border would be drawn around C1 (open at the end of the line) and C2 (open at the start of the line).

一些用户代理以其他方式在包含块的行内实现边框，例如，通过将此类嵌套块包装在匿名行框"内，从而在此类框周围绘制内嵌边框.由于 CSS1 和 CSS2 没有定义这种行为，CSS1-only 和 CSS2-only 用户代理可以实现这个替代模型，并且仍然声称符合 CSS 2.1 的这一部分.这不适用于本规范发布后开发的 UA.

Some user agents have implemented borders on inlines containing blocks in other ways, e.g., by wrapping such nested blocks inside "anonymous line boxes" and thus drawing inline borders around such boxes. As CSS1 and CSS2 did not define this behavior, CSS1-only and CSS2-only user agents may implement this alternative model and still claim conformance to this part of CSS 2.1. This does not apply to UAs developed after this specification was released.

随心所欲.很明显，该行为是在 CSS 中指定的，尽管它是否涵盖所有情况，还是在当今的浏览器中始终如一地实现尚不清楚.

Make of that what you will. Clearly the behaviour is specified in CSS, although whether it covers all cases, or is implemented consistently across today's browsers is unclear.

相关文章