个人猜测浏览器的机制: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. cts-on-gsi测试流程

    测试前提: 1.发货user版本 2.selinux:Enable 3.连接ADB,stay awake 4.烧录XXX申请的key 5.外网环境(ipv6) ATV9测试准备(正常准备环境+fast ...

  2. 阅读笔记02-读懂HTTPS及其背后的加密原理

    1 为什么需要https 使用https的原因其实很简单,就是因为http的不安全. 当我们往服务器发送比较隐私的数据(比如说你的银行卡,身份证)时,如果使用http进行通信.那么安全性将得不到保障. ...

  3. Learning OSG programing---Multi Camera in Multi window 在多窗口中创建多相机

    这个例子演示了在多个窗口中创建多个相机,函数的代码如下: void multiWindowMultipleCameras(osgViewer::Viewer& viewer,bool mult ...

  4. [Linux] 016 压缩解压命令

    1. 压缩解压命令:gzip 命令名称:gzip 命令所在路径:/bin/gzip 执行权限:所有用户 语法:gzip [文件] 功能描述:压缩文件 压缩后文件的格式:.gz 补充: 解压 .rar ...

  5. elasticsearch 基础 —— Mapping参数boost、coerce、copy_to、doc_values、dynamic、

    boost 在查询时,各个字段可以自动提升 - 更多地依赖于相关性得分,boost参数如下: PUT my_index { "mappings": { "_doc&quo ...

  6. shell设置用户自己的环境变量

  7. 微信小程序(13)--页面滚动到某个位置添加类效果

    微信小程序页面滚动到某个位置添加类,盒子置顶效果. <!-- vh,是指CSS中相对长度单位,表示相对视口高度(Viewport Height),1vh = % * 视口高度 --> &l ...

  8. 毕设问题(1)表格table的表头自定义、复合表头,组合表格

    毕业设计,是一个web项目,遇到的些问题,记录下来.也许也有同样只知道一些,不是那么系统的学过的人,会遇到同样的问题,希望有所帮助. 百度知道有这样一个问题: bootstrap table 如何实现 ...

  9. 关于TVS、ESD、稳压二极管、压敏电阻

    一.稳压管和TVS管的工作原理 稳压二极管(又叫齐纳二极管),是一种直到临界反向击穿电压前都具有很高电阻的半导体器件,在这临界击穿点上,反向电阻降低到一个很小的数值,在这个低阻区中电流增加而电压则保持 ...

  10. 实现多线程的三种方法:Thread、Runnable和Callable

    继承Thread类,重写run()方法 步骤: (1) 定义类继承Thread类 (2) 复写Thread类中的run方法. (3) 调用线程的start方法 (start方法有两种含义:1. 启动多 ...