个人猜测浏览器的机制:H5页面底板上有一张画布,画布高度可以被撑高。html、body等元素是固定在画布上的。浏览器中页面的滚动是跟着画布滚动的。(fixed定位是脱离这种机制的,相对浏览器窗口定位的)

1、html 和 body高度为0为什么背景色能充满整个浏览器  : https://www.sohu.com/a/146413356_230028

   浏览器的机制,浏览器的底板(一般默认是白色,微信上是灰色),画布是透明的,就近吸收 html 或 body的颜色。html没有设置颜色,就吸收body的颜色。两者都没有就是透明的,看到底板的背景色。

   html 和 body 本身设置的背景色是生效的,和div的行为是一样的。

2、html 和 body 的高度,和div标签的行为一样。没有设置的话,被内容撑开。

3、html  的高度设置100% 后,他的高度就设置成和底板一样的高度了。即浏览器窗口的高度。    参考:https://blog.csdn.net/javaloveiphone/article/details/51098972

4、如果 html 的高度没有设置100%,body设置100%,是无效的。(css所有的标签设置百分比高度,其父元素必须要设置一个明确的高度 才有效)

总结:html 和 body 的高度设置100%,即body的高度设置为浏览器的高度,子元素的高度超过这个高度,就是溢出的部分。

html 和 body标签的 css 设置的更多相关文章

  1. html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设置同样的宽跟高,画出来的图像变形了?

    <canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...

  2. css基础(css书写 背景设置 标签分类 css特性)

      css书写位置   行内式写法 <p style="color:red;" font-size:12px;></p> 外联式写法 <link re ...

  3. CSS设置标签、图片放大、缩小、旋转、移动(tranform)

    CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...

  4. css设置超出部分文档隐藏(在table标签中不好使解决方案在下)

    css设置: .text-over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer} div设 ...

  5. 今天我们要说的画一个三角形,恩,画一个三角形,第一种呢是利用我们的html标签结合css来实现;而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕,那么顾名思义就是在网页里建造一个画板,用来画画,好,那接下来就和我一起去看看吧!

    第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...

  6. 前端之常用标签和CSS初识

    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...

  7. [css] 浏览器字体和css设置字体之间的关系

    原文链接:http://www.zhangxinxu.com/wordpress/2010/06/%E5%8F%AF%E7%94%A8%E6%80%A7%E4%B9%8B%E6%B5%8F%E8%A7 ...

  8. input标签写CSS时需要注意的几点(先收藏)

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...

  9. CSS设置行内元素和块级元素的水平居中、垂直居中

    CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...

随机推荐

  1. quick BI 修改列名备注

    有些列名太长了,所以造成些影响.注意修改即可.

  2. Fedora 26 安装搜狗拼音输入法 sogoupinyin

    Fcitx 官方 wiki Fcitx GitHub Arch wiki 上关于 Fcitx 的资料 故障排除可以参考这里 Fedora 中文社区 Fedora 中文社区软件源 Fcitx (Flex ...

  3. UCenter 与 DIscuz 通信失败的解决方法

    问题状况:Discuz 用户无法成功修改头像且帖子中上传的图片无法保存.进入 Discuz 后台检查,一切正常:进入 UCenter 检查后发现在"应用管理"中与 Discuz 论 ...

  4. python math 模块

    数学模块 引入模块:import math 注意: 使用某个模块下的函数,必须先引入这个模块,否则无法正常使用. ceil() 向上取整操作 格式:math.ceil(数值) 返回值:整型 floor ...

  5. Oracle PL/SQL基础

    1.下载sql developer数据库连接可视化工具 连接地址:点我下载 下载完成,安装有Java环境,解压即可运行,也可以在linux系统中运行.

  6. ubuntu下修改子网掩码

    1.修改网络配置 修改 /etc/netplan/01-network-manager-all.yaml 文件 vi /etc/netplan/01-network-manager-all.yaml ...

  7. [Codeforces 464E] The Classic Problem(可持久化线段树)

    [Codeforces 464E] The Classic Problem(可持久化线段树) 题面 给出一个带权无向图,每条边的边权是\(2^{x_i}(x_i<10^5)\),求s到t的最短路 ...

  8. SpringCloud-Eureka-服务注册是如何发起的

    原文:https://xsxy007.github.io Spring Cloud环境下,服务提供者和消费者启动后都会将自身注册到Eureka 一.将服务注册到Eureka 一个SpringBoot应 ...

  9. 67.Task Scheduler(任务规划)

    Level: Medium 题目描述: Given a char array representing tasks CPU need to do. It contains capital letter ...

  10. 记一次用Linux curl命令获取Django url返回值异常的问题

    问题描述: curl 检测 URL 返回值以判断服务器是否正常 原命令:curl -I -m 10 -o /dev/null -s -w %{http_code} --insecure $url 问题 ...