HTML5 标签行为与 Div 标签行为

Question

我有两个相同的代码部分，其中父标记内包含三个 div。一个父标签是 HTML5 标签，另一个是带有“.footer”类的 div 标签。我已经为这两个部分提供了相同的 css 代码，但我收到了不同的结果。我将第一个包含“.one”类的 div 标签的高度调整为 400px，它大于其包含标签的高度，即 300px。使用 HTML5 标记，整个包含的 div 会随着更大的 div 展开。然而，“页脚”类的 div 保持不变。这是因为我的 css 编写不当还是 HTML5 标签的行为与 div 标签不同？

View it on JSFiddle

  <div class="footer">

        <div class="one">
            div 1
        </div>

        <div class="two">
            div 2
        </div>

        <div class="three">
            div 3
        </div>

    </div>

    <footer>

        <div class="one">
            div 1
        </div>

        <div class="two">
            div 2
        </div>

        <div class="three">
            div 3
        </div>

    </footer>

这是我使用的 CSS

.footer{
    background-color: rgba(0,0,102,1);
    width: 1000px;
    height: 1%;
    overflow: auto;
    }
.footer div {
    margin-right: 50px;
    width: 200px;
    height: 300px;
    float: left;
    margin-left: 50px;
    }
footer{
    background-color: rgba(0,51,255,1);
    width: 1000px;
    height: 1%;
    overflow: auto;
    }
footer div {
    margin-right: 50px;
    width: 200px;
    height: 300px;
    float: left;
    margin-left: 50px;
    }
.one{
    height: 400px;
    }

Answer 1

这可能是因为user agent stylesheets。浏览器为不同的元素提供默认格式。例如，Chrome 将p 显示为display: block; 并给它一些margin，但不会对span 做同样的事情。如果没有 reset stylesheet，就没有理由认为两个 HTML 元素会在给定的浏览器中显示相同的内容。

编辑：

但是，这不是您的问题。这里的问题是特异性。您可能已经知道这一点，但是当给定元素的属性有两个竞争值时，CSS 会选择由the most specific selector 定义的属性。在这种情况下，选择器.footer div 比.one 更具体，因此子div 使用.footer div 定义的高度，恰好是较短的高度。

将您孩子div 的选择器更改为更具体，您可以使用id 和it works as you'd expect. 来做到这一点