body与背景色的问题

最新推荐文章于 2022-12-03 12:47:28 发布

#咸菜

最新推荐文章于 2022-12-03 12:47:28 发布

阅读量398

点赞数

文章标签： html5 html css

本文链接：https://blog.csdn.net/qq_44850230/article/details/120122485

版权

一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test2body问题</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        
        body {
            height: 100%;
            background-color: red;
        }
        
        div {
            background: #ddd;
            height: 50%;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

如下三个图，html、body、div的高度都为0
在这里插入图片描述

在这里插入图片描述

令我以外的是，当给body设置背景色是整个屏幕，但是body高度确实0

当html标签无背景样式时，body的背景色其实不是body标签的背景色，而是浏览器的。
一旦html标签含有背景色，则body的背景色变成了正常的body标签自己的背景色，而此时的html标签最顶级，背景色被浏览器获取，成为浏览器的背景色。
详细查看链接：https://www.cnblogs.com/xiaoyuersdch/p/9156240.html

#咸菜

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
body与背景色的问题

一个div块级元素没有主动为其设置宽度和高度，浏览器会为其分配可使用的最大宽度(比如全屏宽度)，但是不负责分配高度，块级元素的高度是由子元素堆砌撑起来的。那么，html和body标签的高度也都是由子级元素堆砌撑起来的。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=
复制链接

扫一扫