Question

我正在尝试制作一个完全适合方形浏览器的画布。问题是继续在屏幕的顶部和左侧获得额外的余量，我无法摆脱它。知道如何解决这个问题吗？

代码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
</head>
<style type="text/css">

#gameCanvas {
    background-color: blue;
}

</style>

<canvas id="gameCanvas"></canvas>
<script type="text/javascript">
    var canvas = document.getElementById("gameCanvas");  
    canvas.width = window.innerWidth;
    canvas.height = window.innerWidth;
</script>
<script src="cocos2d.js"></script>
</body>
</html>

Answer 1

正如@Katherine Huang所说，浏览器有默认的样式表，包括边距，填充......

您可以设置：

html, body{
    margin:0;
    padding:0;
}
#gameCanvas{
    margin:0;
    padding:0;
    background-color: blue;
}

现在你必须在身体内的每个新元素上设置特定的边距和填充，因为默认情况下它们将为0。

Answer 2

浏览器具有默认样式表，包括边距，填充等。试试这个：

body {
    padding: 0;
}

通常，在重写默认样式时，CSS重置会派上用场。

画布中的额外余量

2 个答案: