Question

当我使用“经典形式”

    .mycontainer {
        width: 300px;
        height: 100px;
        
        border: solid cyan 1px;
        border-radius: 0.5em;

        display: flex;
        flex-flow: column;
    }
    .title {
        border: solid blue 1px;
        border-radius: 0.5em;
        margin: 2px;
        text-align: center;
    }
    h2 {
        margin: 0 0 0 0;
    }
    .item {
        flex: 1 1 auto;

        border: solid blue 1px;
        border-radius: 0.5em;
        margin: 2px;
    }

<div class="mycontainer">
    <div class="title">
        <h2>title</h2>
    </div>
    <div class="item">
        <h2>item</h2>
    </div>
</div>

我得到了预期的结果

但是当我使用现代形式时。

        mycontainer {
            width: 300px;
            height: 100px;
            
            border: solid cyan 1px;
            border-radius: 0.5em;

            display: flex;
            flex-flow: column;
        }
        title {
            border: solid blue 1px;
            border-radius: 0.5em;
            margin: 2px;
            text-align: center;
        }
        h2 {
            margin: 0 0 0 0;
        }
        item {
            flex: 1 1 auto;

            border: solid blue 1px;
            border-radius: 0.5em;
            margin: 2px;
        }

    <mycontainer>
        <title>
            <h2>title</h2>
        </title>
        <item>
            <h2>item</h2>
        </item>
    </mycontainer>

我一共想念一遍。

我最好的选择是，这是由于缺少DIV的默认声明造成的。

猜测正确吗？如果是，那么声明是什么，所以我可以手动添加它。如果不是，那么导致差异的原因是什么？

Answer 1

<title>是一个HTML元素，可更改浏览器标签中的文本。通常它位于<head>中，但即使在身体中也可以正常工作。

用现代等效物替代DIV

1 个答案: