html - CSS 宽度/高度与 HTML 宽度/高度属性具有不同的效果，具体取决于元素类型

Question

例如，它们在自动边距方面会导致完全不同的行为。

看看这个 fiddle :https://jsfiddle.net/L1rk46xy/

<style>
.fixed {
    display:fixed;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}
.centered {
    position:absolute;
    margin:auto;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
</style>
<div class="fixed">
    <div class="centered" style="width:100px;height:30px;" width="200" height="30">
        CENTERED
    </div>
</div>

它有一个固定的元素来填充视口(viewport)，里面有一些居中的文本。在我实际的网络应用程序中，这是一个加载指示器，应该位于内容上方。为了使 margin:auto 工作，居中元素需要将 top/right/bottom/left 全部设置为零，并且需要有宽度和高度。 (注意:我明确避免使用 top/left:50% 的替代居中方法，因为它需要大小的硬编码负半偏移量，而此方法适用于任何大小的对象)。

注意 fiddle 中带有文本的 div 元素是如何居中的。现在，删除设置宽度/高度的样式属性，只保留居中的 div 上的 HTML 宽度/高度属性。 div 元素不再居中。

此外，如果您将 div 替换为 img，则 HTML 宽度/高度属性足以使其居中。这里发生了什么？为什么 CSS 与 HTML 属性以及 DIV 和 IMG 标签之间存在差异？无论这些元素是 block 元素还是内联元素(例如，无论如何它都使用绝对定位)，都会发生这种情况。

Answer 1

答案是 div 元素没有 height 和 width 属性。如果您在标记中指定这些属性，它们将被完全忽略。您只能通过 CSS 样式调整 div 的大小。

另一方面，

img 元素确实具有这些属性。

参见 div对比img .