有height和width的body标签的背景色铺满整个窗口问题
今天在写css代码中遇到一个问题，就是我想为body设置一个背景色，但是当我设置完之后，发现整个屏幕都跟着变色了。于是我怀疑是不是我的body占据了整个窗口，height和width没有设置好。经过给我body设置边框之后，发现的确不是我高度设置的问题。情况如下图所示：
相关代码如下：
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/alert_model.css"/>
</head>
<style type="text/css">
body{
height: 400px ;
border: 1px solid gray;
background-color: orange;
display: flex;
align-items: center; /* align-items属性定义项目在交叉轴上如何对齐。控制垂直方向； */
}
</style>
<body>
<a class="btn">Test</a>
</body>
</html>
查阅资料得知：主要是因为如果浏览器没有设置背景颜色，那么它会自动把body的背景色当成自己的背景色，从而导致body背景色占据整个窗口。也就是说，我们要想为body设置背景色，那么只需要给浏览器设置一个背景色即可。（我这里设置的橘色只是为了更好的说明，正常情况大家可以把浏览器背景色设置成白色。）
给浏览器设置背景色之后：
相关代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/alert_model.css"/>
</head>
<style type="text/css">
html{
background-color: coral;
}
body{
height: 400px ;
width: 400px;
border: 1px solid gray;
background-color: orange;
display: flex;
align-items: center; /* align-items属性定义项目在交叉轴上如何对齐。控制垂直方向； */
}
</style>
<body>
<a class="btn">Test</a>
</body>
</html>
综上所述：可以通过给浏览器设置背景色的方法，解决body的背景色铺满整个窗口的问题。
