Question

考虑以下HTML标记：

<div>
    <p>Some text</p>
</div>

在spec siad中，每个块级元素也是一个块容器框。因此，对于Some text内的<p>匿名块级别框，因此将显示为，例如，它将位于div元素内，而不包含其他格式：

<div>
    <p> <div> Some text </div> </p>
</div>

我的上述推理是真的吗？我希望在生成匿名块级别框时更准确地理解。

Answer 1

P元素只允许包含内联元素。

<!ELEMENT P - O (%inline;)*            -- paragraph -->

这与http://www.w3.org/TR/html401/struct/text.html#h-9.3.1一致，它表示P元素“不能包含块级元素（包括P本身）。”

Answer 2

是的，每个块级元素也是一个块容器盒，我认为你的问题是， 怎么知道？

只需提供边框，

DEMO

<div id="test">
    <p> <div id="test1"> Some text </div> </p>
</div>

<强> CSS

#test{

    border:1px solid #000;
}
#test1{

 border:1px solid #000;    
}
p
{
    border:1px solid #000;    

}

Answer 3

问：你怎么知道一个元素是块还是内联？

答：您必须记住内联（p，span，b，em，I，网站，标记，代码）和阻止（p，div，form，header，nav，ul li，h1）元素。

问：元素可以在块和内联之间“变换”。你怎么知道哪个是哪个？

答：看看格式，或者看一下css。高高的内联元素已更改为块元素。

在这个FIDDLE中，您将通过更改css将五个块和内联元素显示为块和内联。

CSS

p, span, div {
    margin-top:10px;
}
.displayblock {
    display: block;
    width: 100px;
    height: 60px;
    background-color: blue;
    color: white;
    border:1px solid black;
    margin: 10px auto;
    line-height: 60px;
    text-align: center;
}
.displayinline {
    display: inline;
    width: 100px;
    height: 60px;
    background-color: red;
    color: white;
    border:1px solid black;
    margin: 10px auto;
    line-height: 60px;
    text-align: center;
}

在css中阻止容器盒

3 个答案: