首先想要总结这个问题就是因为在开发的过程中，在设置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. shell编程之trap命令

    trap command  signal trap捕获信号(软中断),command一般是linux命令 若为' '表示发生陷阱时为空指令,'-'表示发生陷阱时采用缺省指令 signal: HUP(1 ...

  2. 对accuracy、precision、recall、F1-score、ROC-AUC、PRC-AUC的一些理解

    最近做了一些分类模型,所以打算对分类模型常用的评价指标做一些记录,说一下自己的理解.使用何种评价指标,完全取决于应用场景及数据分析人员关注点,不同评价指标之间并没有优劣之分,只是各指标侧重反映的信息不 ...

  3. fastapi+vue搭建免费代理IP网站部署至heroku

    说明 最近需要用到一些HTTP的代理,用于爬虫去爬取信息,搜索了一些网站,貌似现在这类提供免费代理IP的网站很多,刚好最近看了点vue的视频,弄个网站练练. 部署到heroku,预览地址:点击这里 F ...

  4. SpringBoot整合Xxl-Job

    一.下载Xxl-Job源代码并导入本地并运行 Github地址:https://github.com/xuxueli/xxl-job 中文文档地址:https://www.xuxueli.com/xx ...

  5. 小而精的 Docker 项目，为什么要使用 Docker？ Docker 容器

    前言 为什么要使用 Docker? Docker 容器的启动在秒级 Docker 对系统资源利用率高,一台主机上可以同时运行数千个 Docker 容器. Docker 基本不消耗系统资源,使得运行在 ...

  6. Windows SMBv3 CVE-2020-0796 漏洞分析和l漏洞复现

    0x00  漏洞描述 漏洞公告显示,SMB 3.1.1协议中处理压缩消息时,对其中数据没有经过安全检查,直接使用会引发内存破坏漏洞,可能被攻击者利用远程执行任意代码.攻击者利用该漏洞无须权限即可实现远 ...

  7. 使用 Docker 部署 Spring Boot 项目，带劲！！

    上一篇:年轻人的第一个 Docker 应用 Docker 一次构建.处处运行及快速启停的特性,在微服务架构中有着举足轻重的地位,具体的概念性的东西就不介绍了,不懂的点击这里阅读 Docker 基础教程 ...

  8. 详细了解IDM的队列功能

    队列的种类 IDM(Internet Download Manager)下载器的队列分为2种:主要下载队列和同步队列.此外,我们也可以自己创建附加队列. 在左边的[分类]窗口中,黄色的图标为主要下载队 ...

  9. 关于Camtasia2020安装完成之后无法运行问题的解决方法

    在录像编辑软件Cmtasia更新到了2020版本之后,有部分小伙伴们遇到了这样的问题:在我们安装好软件之后,居然无法运行.今天小编就给大家介绍一下该如何解决这个问题. 方法一: 第一步,选中桌面上Ca ...

  10. JavaSE 学习笔记03丨继承、接口、多态、内部类

    Chapter. 5 继承 继承作为面向对象的三大特征之一,它是多态的前提.它主要解决的问题是共性抽取. Java中的继承,是单继承.多级继承的. 已存在的类,被称为超类.基类.父类(parent c ...