如果块元素包含另一个块元素，那么将它更改为与CSS内联是错误的？ [英] Is it wrong to change a block element to inline with CSS if it contains another block element?
问题描述
我知道把一个块元素放在内联元素中是错误的，但是下面的内容呢？
想象一下这个有效的标记：
< div>< p>这是一个段落< / p>< / div>
现在添加此CSS：
div {
display：inline;
}
这会创建一个内联元素包含块元素的情况
页面元素是否仍然有效？
如何以及何时执行我们判断HTML是否有效 - 在应用CSS规则之前或之后？
UPDATE：将块级元素放置在链接标签内是完全有效的，例如：
< a href =＃>
< h1>标题< / h1>
< p>段落。< / p>
< / a>
这实际上是非常有用的，如果你想要一个大块的HTML是一个链接。 >
从 CSS 2.1规格：
当行内框包含流入块 - 水平框，内联框（及其在同一行框内的内联祖先）围绕块级框（以及任何块级别的兄弟节点，它们只是由可折叠空格和/或流出区域连续或分隔元素），将内联框分割为两个框（即使任一侧为空），在框级框的每一侧有一个框。分隔符之前和分隔符之后的行框包含在匿名块框中，块级框将成为这些匿名框的兄弟。当这样的内联框受到相对定位的影响时，任何结果的翻译也会影响内联框中包含的块级框。
此模型将应用于以下示例如果以下规则：
p {display：inline}
span {display： block}
与此HTML文档一起使用：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 // EN>
< HEAD>
< TITLE>由块中断的匿名文字< / TITLE>
< / HEAD>
< BODY>
" P>
这是SPAN之前的匿名文本。
< SPAN>这是SPAN的内容。< / SPAN>
这是SPAN之后的匿名文本。
< / P>
< / BODY>
P元素包含一个匿名文本的块（C1），后跟块级元素另一个块（C2）的匿名文本。结果框将是代表BODY的块框，包含C1周围的匿名块框，SPAN块框和C2周围的另一个匿名块框。
属性的匿名框从包含的非匿名框继承（例如，在示例中正好在分段标题匿名块框下面，DIV的一个框）。非继承属性具有其初始值。例如，匿名框的字体从DIV继承，但边距将为0.
在导致匿名块框仍然生成的元素上设置的属性适用于该元素的框和内容。例如，如果在上述示例中已经在P元素上设置了边框，则将在C1（在线的末端打开）和C2（在线的开头打开）之间绘制边框。
一些用户代理已经通过其他方式在包含块的内联上实现了边界，例如，通过将这样的嵌套块包装在匿名线框内，从而在这些框周围绘制内联边框。由于CSS1和CSS2没有定义此行为，仅限于CSS1和仅限CSS2的用户代理可能实现此替代模型，并仍声称符合CSS 2.1的此部分。这不适用于本规范发布后开发的UA。
做你想做的事。显然，在CSS中指定了行为，虽然它是否涵盖所有情况，或在今天的浏览器中实现一致是不清楚的。
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>
Now add this CSS:
div {
display:inline;
}
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?
How and when do we judge if the HTML is valid - before or after the CSS rules are applied?
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>
This is actually really useful if you want a large block of HTML to be a link.
From the CSS 2.1 Spec:
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 }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>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.
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.
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).
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.
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.
这篇关于如果块元素包含另一个块元素，那么将它更改为与CSS内联是错误的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
