您的位置：首页 > 其它

解决设置了body宽高，但设置背景颜色仍然会铺满问题

2017-12-12 15:03 316 查看

近期开发遇到一个问题，明明给body设置了宽高，然后给body设置背景，背景仍然会铺满整个屏幕。以下是我的代码：

[html] view
plain copy



[html] view
plain copy

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{

            width: 200px;

            height:200px;

            margin: 0 auto;

            background: green;

        }

    </style>

</head>

<body>



</body>

</html>

代码看出，我给body设置了宽高并设置居中，然后设置颜色为green，结果却是这样的：

可以看到，绿色的背景铺满了整个浏览器。

经过查询资料，出现以上的原因主要是因为：

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

所以，要让body的背景色渲染范围只在设置的body范围之内，我们需要对html进行背景样式的设置，这里我们给html设置一个#fff白色的背景色，代码如下：

[html] view
plain copy

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        html{

            background: #fff;

        }

        body{

            width: 200px;

            height:200px;

            margin: 0 auto;

            background: green;

        }

    </style>

</head>

<body>



</body>

</html>

得到的效果如下：

到这里就解决了设置了body宽高，但设置背景颜色仍然会铺满的问题。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航