与浮点数和视口百分比单位的奇怪交互

Question

使用javascript循环我尝试使用视口百分比宽度和高度调整大小的div来覆盖正文，并使用float：left。

这意味着其中100个div应覆盖整个视口。然而，它不会那样工作，而是将第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

由于身体的边缘。元素相对于整个视口的大小，但由于正文上的默认边距，因此主体宽度小于此值。

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

添加 body { margin: 0; }

如果要保留正文上的边距，并且仍然需要10个元素，则不希望使用视口单位。您可以像https://jsfiddle.net/msqjd27y/2/

一样使用width: 10%

Answer 2

您的问题在于body元素，您必须编写如下的css规则： body {margin：0}解决您的问题