对html与body的一些研究与理解

最新推荐文章于 2022-02-25 13:07:05 发布

有谁活着不像是一场炼狱

最新推荐文章于 2022-02-25 13:07:05 发布

阅读量158

点赞数

为什么要写这篇文章？

在做项目的时候，发现有以下问题不理解：

（1）在从css文件中修改body的背景色没起效果

（2）有时候设置某个div高度100%的时候也没效果

关于html与body的一些表现：

1.关于背景色：

如果你没有设置html标签的背景色，只是设置了body的背景色，此时<html>标签未被激活，body担当类似于根节点的节点，其background背景色被浏览器俘获，所以浏览器界面背景色为body里面background的背景色，

一旦设置了<html>节点的background背景色之后，<body>的背景色将失效。

也就是说一旦html标签含有背景色，则<body>的背景色变成了正常的<body>标签（一个实实在在，普普通通标签）的背景色，而此时的<html>标签最顶级，背景色被浏览器获取，成为浏览器的背景色。

例如下面的简短代码：

html{background:#999;}
body{background:#069; margin:100px; border:30px solid #093;}

2.关于高度百分之百

要想高度百分比起作用，一般来说，要满足两个条件：

其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外讨论），如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；

其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。

而这里要讲的是关于body和html的高度百分比显示的。

实际上，<body>不是高度100%显示的，

当你只描述了body的背景色，浏览器的颜色就是<body>定义的background 颜色，给你一种错觉<body>就是满屏显示的，实际上这是因为浏览器把你设置的body的背景色获取了然后设置成浏览器的背景；正如上面所推断的，此背景已非<body>之背景。用下面这个一测便知。

代码：

效果：

如果你没有特殊声明，浏览器会自动设置div的width为100%；

但是浏览器不会自动设置div的高度，一个div的高度是由子div的高度撑起来的

参考链接：https://www.zhangxinxu.com/wordpress/2009/09/%E5%AF%B9html%E4%B8%8Ebody%E7%9A%84%E4%B8%80%E4%BA%9B%E7%A0%94%E7%A9%B6%E4%B8%8E%E7%90%86%E8%A7%A3/

关注