html标签和body标签的区别

首先想要总结这个问题就是因为在开发的过程中,在设置body的高度的时候,在浏览器窗口中并不起作用,一直都会显示是浏览器窗口的大小,所以想要搞清楚这面的原因。

一、前提

  1. 在页面的设计中,当我们没有为一个div块级元素设置宽度和高度的时候,浏览器会为其分配一个最大可用的宽度,但是不负责分配高度块级元素的高度是由子元素堆砌撑起来的,所以html和body标签也是由子元素撑起来的;

  2. 元素高度百分比需要向上遍历父标签要找到一个定值高度才能起作用,如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用,此时的情况是父元素高度依赖子元素堆砌撑高,而子元素依赖父元素的定高不起作用,互相依赖,却都无法依赖,死循环了;

  3. 浏览器负责分配块级元素宽度,那么浏览器也一定可以分配高度(只是没有做),那么浏览器本身是有宽度和高度的。

二、html和body中的一些问题

  1. 关于高度

    • 设置html的height:100%,就可以获取浏览器的定高了,后面的body和div也就有了依赖。
      //如果在设置body前没有设置html的高度,那么body设置高度则不会生效,所以此时的body的height为0
      <
      style type="text/css"> *{ margin:0px; padding:0px; } body{ height:100%; } div{ background:#ddd; height:50%; } </style> <body> <div></div> </body>
  2. 关于背景颜色

  •  在我们只设置body的背景色时,浏览器的背景色会获取到body的背景色。
  • 一旦html标签含有背景色,则body的背景色变成了正常的body标签自己的背景色,而此时的html标签最顶级,背景色被浏览器获取,成为浏览器的背景色。

 有一个说法不知道是不是正确的结论,但是以这种说法挺好理解的:

在没有设置html元素的任何属性时,body就会被当成是根节点设置,浏览器就会获取body的属性然后渲染,根节点设置高度都不会生效。

(在我自己学习的过程中,对前端页面布局等一系列的知识有一些混乱,所以准备从今天开始,每天记录一篇前端基础的知识,希望大家一起进步!)

Tags: