CSS body怎么设置100%

在网页开发中，经常会有对页面整体布局样式的要求，其中调整body元素的样式就尤为重要。其中一个常见的需求是让body元素的高度和宽度都占满整个浏览器窗口，实现全屏展示的效果。本文将详细介绍如何使用CSS来设置body元素的高度和宽度为100%。

设置body元素高度为100%

要让body元素的高度占满整个浏览器窗口，我们首先要确保html和body元素的高度也是100%，避免出现高度不够的情况。通常我们会在CSS中添加以下代码：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

上面的代码中，我们将html和body元素的高度设置为100%，并且将margin和padding都设为0，避免出现浏览器默认的间距。

接下来，我们可以通过以下代码来设置body元素的高度为100%：

body {
  height: 100%;
}

这样就可以确保body元素的高度占满整个浏览器窗口了。

设置body元素宽度为100%

要让body元素的宽度占满整个浏览器窗口，我们同样需要确保html和body元素的宽度也是100%。我们可以使用以下代码来设置：

html, body {
  width: 100%;
  margin: 0;
  padding: 0;
}

同样，我们将html和body元素的宽度设置为100%，并且将margin和padding都设为0，以确保不受浏览器默认样式的影响。

接着，我们可以通过以下代码来设置body元素的宽度为100%：

body {
  width: 100%;
}

这样就可以确保body元素的宽度占满整个浏览器窗口了。

综合设置body元素的高度和宽度为100%

如果我们希望同时让body元素的高度和宽度都占满整个浏览器窗口，可以使用以下代码来设置：

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  box-sizing: border-box;
}

这里我们在html和body元素中同时设置了高度和宽度为100%，并且将margin和padding都设为0。另外，我们还添加了box-sizing: border-box;的样式，用来指定元素的宽度和高度包括边框和内边距，避免因为元素的边框和内边距而导致元素无法完全占满浏览器窗口。

经过以上设置，我们就可以确保body元素的高度和宽度都占满整个浏览器窗口了。

总结

本文介绍了如何使用CSS来设置body元素的高度和宽度为100%，以实现全屏展示的效果。通过设置html和body元素的高度和宽度为100%，以及将margin和padding设置为0，我们可以确保body元素完全占满整个浏览器窗口。同时，通过box-sizing: border-box;的样式，可以避免元素边框和内边距导致无法完全占满浏览器窗口的情况。