前端入门之＜body＞设置背景被撑开

最新推荐文章于 2021-08-10 22:48:05 发布

<菜鸟>

最新推荐文章于 2021-08-10 22:48:05 发布

阅读量617

点赞数 3

分类专栏： HTML 文章标签： html5 css

本文链接：https://blog.csdn.net/qq_40942568/article/details/115696672

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前端入门之设置背景被撑开

问题描述:<body>里有<div>盒子,<div>盒子有130px 的高度,然后<body>被撑开为130px高,但是我给<body>加上颜色后,却是占满整个全屏.

当时的代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>1_标准盒模型</title>
        <style>
            .box{
                width: 100px;
                height: 100px;
                border: 10px solid thistle;
                padding:10px 5px 4px 6px;
                margin:20px 19px 10px 7px;
            }
            /* 为什么body的宽度只有130,但是颜色确是充满全屏 */
            body{
                background: blueviolet;
            }
        </style>
    </head>
    <body>
        <div class="box">盒子</div>
    </body>
</html>

页面显示如下：
在这里插入图片描述
后来经过上网查询，该问题得到了解决。
原来浏览器会将<body>的背景色"吃掉"，也就是说，事实上，当我们单独给<body>设置背景颜色时，并不是body标签被赋予了背景色，而是【浏览器画布】赋上了颜色。

由于浏览器也会“吃掉”<html>的背景色，所以当给<html>和<body>同时设置背景色时，因为<html>与<body>相比，它离浏览器更近一些，所以<body>的背景色就真实生效了，添加代码如下：

/*添加html背景色设置（这里我更换了前面的颜色）*/
 /* 为什么body的宽度只有130,但是颜色确是充满全屏 */
            body{
                background: yellowgreen;
            }
            html{
                background: rgba(0, 0, 255, 0.39);
            }

效果如下：
在这里插入图片描述
可以看到，我们为设置的背景色按照它真实的大小显示了，不再是撑开状态。

这个知识点我是通过访问这个连接学到的知识点来源网址

特别感谢这位作技术分享的大大。

从那篇文章中我还学到了设置渐变背景色是不会被浏览器"吃掉"的哦。

<菜鸟>

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
前端入门之＜body＞设置背景被撑开

前端入门之设置背景被撑开问题描述:里有盒子,盒子有130px 的高度,然后被撑开为130px高,但是我给加上颜色后,却是占满整个全屏.当时的代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>1_标准盒模型</title> <style> .b
复制链接

扫一扫