关于 body设置宽高的问题

来源:9-9 外边距

浩淼6924806

2021-09-22 20:02:20

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title></title>

<style type="text/css">

#one{


margin-top: 40px;

}

.two{

display: inline-block;

margin-top: 40px;

margin-left: 40px;

background-color: yellow;

width: 300px;

height: 100px;

}

body{

display: inline-block;

width: 400px;

height: 500px;

background-color: pink;

}

</style>

</head>

<body>

<div id="one">

<div class="two">HTML</div>

<div class="two">CSS</div>

<div class="two">JavaScript</div>

</div>

</body>

</html>

我给body限定了宽高,为什么加上背景颜色之后是铺满的呢?没有宽高了

写回答

1回答

好帮手慕小班

2021-09-23

同学你好,因为当html不设置背景时,body的背景将作为整个浏览器的背景色,而不是body标签自己的背景色。当设置html背景色后,body的背景色就变成了body自己的背景色,此时html的背景色将被浏览器获取成为浏览器的背景色。

所以,要让body的背景色渲染范围只在设置的body范围之内,我们需要对html进行背景样式的设置,比如

https://img.mukewang.com/climg/614bdd66090061f206580724.jpg

https://img.mukewang.com/climg/614bdd6e09f7926707050586.jpg

祝学习愉快~

0

0 学习 · 9886 问题

查看课程