html 和 body标签的 css 设置
个人猜测浏览器的机制: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 设置的更多相关文章
- html5之canvas困惑 在canvas标签内需要设置了宽跟高,如果在css中设置同样的宽跟高,画出来的图像变形了?
<canvas class="cvs"></canvas> 遇到的问题: 如css 中设.cvs{width:500px;height:400px;},也就 ...
- css基础(css书写 背景设置 标签分类 css特性)
css书写位置 行内式写法 <p style="color:red;" font-size:12px;></p> 外联式写法 <link re ...
- CSS设置标签、图片放大、缩小、旋转、移动(tranform)
CSS设置标签.图片放大.缩小.旋转.移动(tranform) 1.缩小和放大属性(scale) 格式:tranform:缩小类型(数值): 注意:缩小和放大都是 scale : 其中的值(0~1)代 ...
- css设置超出部分文档隐藏(在table标签中不好使解决方案在下)
css设置: .text-over{overflow: hidden;white-space: nowrap;text-overflow: ellipsis;cursor: pointer} div设 ...
- 今天我们要说的画一个三角形,恩,画一个三角形,第一种呢是利用我们的html标签结合css来实现;而第二种方法就就是我们的html5新增的一个标签canves,这个canves就是网页画幕,那么顾名思义就是在网页里建造一个画板,用来画画,好,那接下来就和我一起去看看吧!
第一种方法:利用我们的html标签结合css来实现 span{ width:0px; height:0px; border-width:7px; border-style:solid; border- ...
- 前端之常用标签和CSS初识
外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...
- [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 ...
- input标签写CSS时需要注意的几点(先收藏)
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-05-05) 飞鱼的声纳顶部的搜索框让我头疼了很长时间,原因是总不能获得跨浏览器的统一样式.主要的问题有这么两个:一是inpu ...
- CSS设置行内元素和块级元素的水平居中、垂直居中
CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-heigh ...
随机推荐
- 通过VLC的ActiveX进行二次开发,实现一个多媒体播放器 2011-04-10 00:57:23
http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=25498312&id=218294 通过VLC的ActiveX进行二 ...
- 表单组件中state依赖props
参阅避免派生状态的博文: https://zh-hans.reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
- Github建站笔记
下载Git 搜索"Git",在官网中根据系统版本下载,并双击打开,按默认已勾选组件点下一步; 勾选在Windows命令行窗口中使用Git: 使用推荐的OpenSSL库用于HTTPS ...
- hdu6354 Everything Has Changed (圆的相交弧长)
题目传送门 题意: 用一堆圆来切割一个圆心为原点,半径为R的圆A,问切割完毕后圆A外围剩余部分的周长(图中的红线部分). 思路: 首先判定圆与圆A的关系,这题我们只需要与A内切.相交的圆. 然后就是求 ...
- Django学习记录--~Biubiubiu
Day One Django常用命令 1.创建Django网站框架 django-admin startproject mysite # mysite为定义的项目文件夹名称 2.超级用户创建 py m ...
- vue-froala-wysiwyg 富文本编辑器
近期需要在vue3项目上做一个富文本编辑器,找了很多插件组件,最终决定用 froala.虽然不是免费的,但是功能实在是太强大了. froala 文档:https://www.froala.com/wy ...
- YARN的伪分布式安装
前提:安装完HDFS以后 1.修改mapred-site.xml 这个文件初始时是没有的,有的是模板文件,mapred-site.xml.template 所以需要拷贝一份,并重命名为mapred-s ...
- CGAffineTransform 图像处理类
CGAffineTransform 介绍 概述 CGAffineTransform是一个用于处理形变的类,其可以改变控件的平移.缩放.旋转等,其坐标系统采用的是二维坐标系,即向右为x轴正方向,向下为y ...
- Linux设置数据库自动备份
本文为转载,最末端为原地址 以CentOS 7.6系统与Oracle 11g为例: 一.先找到数据库的环境变量 如果是在root账户下,须先登录到数据库所在账户 su oraclecat ~/.bas ...
- Git--04 Github使用
目录 Github使用 1.注册用户 2.配置ssh-key 3.创建项目 4.克隆项目到本地 5.推送新代码到github Github使用 Github顾名思义是一个Git版本库的托管服务,是目前 ...