HTML5标签行为与Div标签行为的区别

Question

HTML5标签行为与Div标签行为的区别

3

我有两个相同的代码段，其中包含三个div标签在一个父标签中。其中一个父标签是HTML5标签，另一个是带有类名“.footer”的div标签。我已经为这两个部分提供了相同的css代码，但是我得到了不同的结果。我将第一个包含类名“.one”的div标签的高度调整为400px，这比其容器标签的高度要大，后者的高度为300px。使用HTML5标签时，整个包含div会随着更大的div扩展。然而，具有类名“footer”的div保持不变。这是因为我的css编写不当还是HTML5标签与div标签的行为不同？在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;
    }

- Biglu315

3

你正在使用哪个浏览器访问该网站？ - Josh Mein

我在Firefox、Chrome、IE和Safari中收到了相同的结果。 - Biglu315

HTML5块元素（header、footer、section、aside等）与标准DIV之间唯一的区别在于语义。它们都完全呈现为DIV，并且不会从浏览器样式表中接收任何特殊样式。使用HTML5元素的唯一优点是在代码中声明性地标记标题、页脚等，从而使您的代码对人类和计算机都更有意义。 - Ryan Wheale

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jamesplease · Accepted Answer

这可能是由于用户代理样式表的原因。浏览器为不同的元素提供默认格式。例如，Chrome将p显示为display：block; 并为其设置一些margin，但不会对span进行相同的操作。如果没有重置样式表，则没有理由认为两个HTML元素在给定的浏览器中显示相同。

编辑：

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

将子元素div的选择器更加具体化，可以使用id来实现，这样它就能按照你预期的方式工作了。