Question

我有一个看起来像这样的HTML页面

body {
  height: 200px;
  background-color: lightblue;
  padding: 0px;
  border: 1px solid red;
}

<html>

<head>
</head>

<body>
  <p> First para </p>
  <p> Second para </p>

</body>

</html>

在这里，我将body height指定为200px，将background-color指定为body light为“lightblue”。为什么身体的background-color会被应用到整个页面而不仅仅是身体的200px高度？

Answer 1

如果html元素没有背景，则正文背景将覆盖页面。如果html元素上有背景，则主体背景的行为与任何其他元素一样。

因此，为了防止这种情况，您只需为background-color:white定义html。

＆＃13;

html {
  background-color: white;
}

body {
  height: 200px;
  background-color: lightblue;
  padding: 0px;
  border: 1px solid red;
}

＆＃13;

<html>

<head>
</head>

<body>
  <p> First para </p>
  <p> Second para </p>

</body>

</html>

＆＃13;