首先想要总结这个问题就是因为在开发的过程中，在设置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的属性然后渲染，根节点设置高度都不会生效。

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

html标签和body标签的区别的更多相关文章

  1. i标签和em标签的区别

    很多人以为i标签和em标签都只是HTML用于斜体的标签,并不知道他们有什么区别. 其实对于熟悉SEO的人来说,他们的区别挺大的(普通用户略过). i标签的作用:仅仅是为了让字体显示斜体,对于SEO没什 ...

  2. JS点击任意标签获得该标签属性，以获得ID为例，以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别

    js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = ...

  3. @Autowired标签与 @Resource标签 的区别

    Spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...

  4. em标签和strong标签的区别

    今天模拟面试,第一个问题就是这个,然后我回答说就是表示强调,然后老师说还有吗,我说不知道了,然后,就没有然后了... 第一个层次的区别: <em>标签是告诉浏览器把其中的文本表示为强调的内 ...

  5. input 标签和a标签实现超链接的区别

    a 标签和 input 标签都可以做链接点击的.代码: ------------------------------------------------------------------------ ...

  6. HTML+css基础 p段落标签 a 超链接标签 Src和href有什么区别和关联？ target属性 Meta标签

    p段落标签: <p></p> 1.他是唯一一个可以不写结束标签的双标签. a 超链接标签: 从一个页面链接到另一个页面.靠的是href属性.  Src和href有什么区别和关联 ...

  7. arclist标签和list标签区别

    很多站长朋友在刚入门织梦的时候对织梦的标签存在很多的困惑,关于arclist标签和list标签,甚至不知道啥时候用arclist,啥时用list标签.arclist 为自由列表,全局模板中都生效,一般 ...

  8. HTML 5的革新——语义化标签section和article的区别

    原文地址:https://stackoverflow.com/questions/33910294/what-is-the-difference-between-article-and-section ...

  9. <span> 标签与<p>标签的区别

    p标签指一个段落,是块级元素,有换行效果:span是行内元素,一般单独修饰文字: span 标签可以放在p标签里,p标签不应该放在span标签里:

  10. code标签和pre标签

    code标签: 1.code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容.软件代码的编写者习惯了编写代码时的代码格式,那么这个<code> ...

随机推荐

  1. Git仓库的提交记录乱成一团，怎么办？

    大家好,今天和大家聊聊git当中一个非常好用的功能--区间选择,它可以帮我们处理看起来非常复杂的提交记录.从而帮助我们很快找到我们需要的内容. 如果大家有参与过多人协同的项目开发,比如十几个人甚至更多 ...

  2. 6.java设计模式之适配器模式

    基本需求: 将一个220V的电压输出成5V的电压,其中220V电压为被适配者,变压器为适配器,5v电压为适配目标 基本介绍: 适配器模式属于结构型模式,将某个类的接口转换成客户端期望的另一个接口表示, ...

  3. 【JVM第四篇--运行时数据区】堆

    写在前面的话:本文是在观看尚硅谷JVM教程后,整理的学习笔记.其观看地址如下:尚硅谷2020最新版宋红康JVM教程 一.堆的概述 JVM的运行时数据区如下: 一个Java程序运行起来对应着一个进程(操 ...

  4. modprobe: FATAL: Module ceph not found解决办法

    问题 有可能你在进行 Ceph 文件系统挂载的时候出现下面的提示: modprobe: FATAL: Module ceph not found. mount.ceph: modprobe faile ...

  5. parted分区对齐

    分区提示未对齐 [root@lab8106 ceph]# parted /dev/sdd GNU Parted 3.1 Using /dev/sdd Welcome to GNU Parted! Ty ...

  6. java8的stream功能及常用方法

    Java8中stream对集合操作做了简化,用stream操作集合能极大程度简化代码.Stream 就如同一个迭代器(Iterator),单向,不可往复,数据只能遍历一次,遍历过一次后就用尽了. 一. ...

  7. MGR(MySQL Group Replication)部署测试

    1. 环境说明 192.168.11.131 mgr1 主节点 192.168.11.132 mgr2 从节点 192.168.11.133 mgr3 从节点 2. 在mgr1.mgr2.mgr3上安 ...

  8. 「CEOI2013」Board

    description 洛谷P5513 solution 用一个二进制数维护这个节点所处的位置,那么"1"操作就是这个数\(*2\),"2"操作就是这个数\(* ...

  9. 【Flask】学习笔记（一）入门

    Flask 入门基础 Flask是一个轻量级的后台框架,用Flask作为Web框架的公司有Netfix,Reddit等,国内豆瓣,果壳等.使用flask的公司列表.Flask 有主要的两个依赖,一个是 ...

  10. Jinja2语法自动补全配置

    Jinja2语法自动补全配置 说明 在使用Pycharm社区版进行Web开发时,Jiaja2的语法是不会自动提示补全的,为了提高开发效率,需要根据个人习惯进行一些常用语法的自动补全配置,具体如下. 配 ...