Question

我有两个相同的代码段，其中有三个div包含在父标记内。一个父标记是HTML5标记，另一个是带有“.footer”类的div标记。我已经给出了这两节相同的css代码，但我收到了不同的结果。我正在调整第一个包含div标签的高度，类“.one”为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.

进行更改

HTML5标记行为与Div标记行为

1 个答案: