CSS宽度/高度具有与HTML宽度/高度属性不同的效果，具体取决于元素类型 [英] CSS width/height having different effect than HTML width/height attributes, depending on element type

问题描述

例如，它们会导致完全不同的关于汽车边距的行为。

查看这个小提琴： https://jsfiddle.net/L1rk46xy/

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

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

请注意，带有文本的div元素如何居中。现在，删除设置宽度/高度的样式属性，并在中心的div上仅留下HTML width / height属性。 div元素不再居中。

此外，如果用一个img替换div，那么HTML宽度/高度属性足以使它居中。这里发生了什么？为什么CSS与HTML属性以及DIV和IMG标签之间的区别？这发生不管这些元素是块还是内联（例如，它使用绝对定位）。

解决方案

code> div 元素没有 height 和 width 属性。如果在标记中指定这些属性，它们将被完全忽略。你只能通过CSS样式来定义一个div。

img 另一方面，元素有这些属性。

请参阅 div 与 img 相关。

For example, they cause completely different behavior in regards to auto margins.

Check out this 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>

It has a fixed element to fill the viewport, and inside that there's some centered text. In my actual web app, this is a loading indicator that's supposed to be centered above content. In order for margin:auto to work, the centered element needs to have top/right/bottom/left all set to zero and it needs to have a width and height. (Note: I'm explicitly avoiding the alternative centering method of using a top/left:50%, because it requires a hard-coded negative half-offset of the size, whereas this method will work for any size object).

Notice in the fiddle how the div element with text is centered. Now, remove the style attribute that sets the width/height and leave only the HTML width/height attributes on the centered div. The div element is no longer centered.

Furthermore, if you replace the div with an img, then HTML width/height attribute ARE sufficient to center it. What is going on here? Why the difference in CSS vs HTML attributes and between DIV and IMG tags? This occurs regardless of whether these elements are block or inline (e.g. it uses absolute positioning anyway).

解决方案

The answer is that div elements don't have height and width attributes. If you specify those attributes in the markup, they are completely ignored. You can only size a div through CSS styles.

img elements on the other hand, do have those attributes.

See div vs img.

这篇关于CSS宽度/高度具有与HTML宽度/高度属性不同的效果，具体取决于元素类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！