javascript - 与 float 和视口(viewport)百分比单位的奇怪交互

Question

使用 javascript 循环，我试图用使用视口(viewport)百分比宽度和高度调整大小并具有 float:left 的 div 覆盖主体。

这意味着这些 div 中的 100 个应该覆盖整个视口(viewport)。然而，它不是那样工作的，而是将第 10 个向下移动一行。

Javascript

for (var i=0; i<10; i++){
    var newDiv = document.createElement('div');
    newDiv.className= 'square';
    document.body.appendChild(newDiv);
}

CSS

.square {
width: 10vw;
height: 10vh;
background-color: aqua;
float: left;
}
.square:hover {
background-color:red;
}

Fiddle

我已将正文的边距设置为 0。当我制作 100 个这样的 div 时，问题就出现了。

Answer 1

因为 body 上的边距。元素的大小相对于整个视口(viewport)，但由于 body 上的默认边距，body 宽度小于此值。

https://jsfiddle.net/msqjd27y/1/

只需添加正文{ margin :0; }

如果您想要保持 body 的边距，并且仍然需要 10 个元素，则您不想使用视口(viewport)单位。您可以像这样使用 width: 10% https://jsfiddle.net/msqjd27y/2/