body 没有被撑开_body没有高度设置背景色为什么可以全屏显示?

原标题:body没有高度设置背景色为什么可以全屏显示?

--- 关于html和body的那些事

还记得我们开发全屏页面或者是移动端页面时经常会设置一句话

html, body { height: 100%; }

是不是只知道用?却不知道怎么回事?

原因是,当没有内容撑开高度时,html和body的默认高度是0,如果内容想要按照比例或是撑满全屏时,就没办法正常使用百分比

而如果只设置body { height: 100%; },这时body以html的高度为基准,但html默认高度也是0,所以需要设置html与body高度同与浏览器等高

但!

当我们没有设置任何高度的情况下,给body设置背景色,颜色竟然是可以布满浏览器的,然而可以看到控制台中,body实实在在是没有高度的,这究竟是为什么呢?

body {

background: pink;

}

事实上,当我们单独给body设置背景颜色时,并不是body标签被赋予了背景色,而是【 浏览器画布 】赋上了颜色,可以理解为,body的背景色被浏浏览器”吃掉“

那如果我们同时给html与body设置背景色,会发生什么样的结果呢

html {

background: orange;

}

body {

background: pink;

}

可以看到,我们设置的body背景色竟然“失效了”,浏览器被赋予了html的背景色

而在我看来,实际是我们设置的body背景色[生效了],但因body默认高度为0,所以在页面中并没有粉色区块显示,那我们尝试在body中添加一些内容

可以看出,body的高度被撑开,而body的背景色则是实实在在只给了body

所以我们可以得出一个结论

浏览器会“吸收”html与body的背景色

当只设置了body背景色时,浏览器发现了,于是把这个背景色“占为己有”

而如果html设置了背景色,浏览器则会认为html离我更近,所以会“拿走”html的背景色当成自己的颜色

当然,到现在为止,我们实验的都是纯色背景,那如果我们设置成渐变色,还是相同的结果吗?

疑问产生,开始实验

首先,只设置body的背景为线性渐变粉色pink到白色#fff,预想结果应该是和背景一样,直接浏览器从上往下的渐变

body {

background: linear-gradient(pink, #fff);

}

嗯?这怎么和预想不一样,再放大页面看一下渐变,就可以发现每个渐变的高度和html的高度是一致的,而html的高度则是body的默认margin撑开

于是开始设置

* {

margin: 0;

padding: 0;

}

同样,如果渐变给html设置的,也不会作用到浏览器上

说明浏览器并不会把渐变色据为己有,那如果想要设置全屏渐变,就需要用到我们文章开头说到的

html, body { height: 100%; }

责任编辑:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/245475.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python抽象工厂模式_Python设计模式之抽象工厂模式

Python设计模式之抽象工厂模式这篇文章主要为大家详细介绍了Python设计模式之抽象工厂模式,感兴趣的小伙伴们可以参考一下python面向对象编程入门,我们需要不断学习进步"""抽象工厂模式的实现"""import randomclass PetSh…

岗位理解_当面试官问求职者对应聘岗位的理解情况

虽然求职是看的是岗责是否匹配自己的经历和能力,但是很多面试官还是会问这样的问题。对于求职者来说,对岗位的理解其实就是把岗位职责背一遍,但是面试官既然问了,就要说出一些其他内容来。想回答好这个问题,就要清楚面…

指针和引用的区别_浅析指针与引用

关注“杜明c”,每天进步一点点!已经时隔一个多月没有发文章了,主要是太忙了,绝不是偷懒今天给大家聊一聊指针和引用的不同之处在哪里。摘要指针的使用引用的使用二者的区别后话指针的使用在C语言中,我们怎么样在子函数…

python打印所有花数_Python中使用while循环实现花式打印乘法表

废话不多说,直接上代码吧! #python中,while语句用于循环执行程序,即在某个条件下,循环执行某段程序,以处理需要重复处理的相同任务。#while是“当型”循环结构。i1while i20: print(i,end" ") i1…

cad线性标注命令_CAD线性标注如何使用的

我们应该知道每次画完图之后都会进行标注,所以在CAD标注也要活灵活用。但是很多同学还不知道。那么接下来下面是学习啦小编整理的一些关于CAD线性标注如何使用,供您参阅。CAD线性标注使用的方法您可以使用 DIM 命令创建水平、垂直、对齐和半径标注。标注…

转行学python后悔_月薪13k的我为什么要转行学Python?

在职业规划包括人生方向上,选择很重要。一句很经典的话做总结“方向不对,努力白费”。选择自己感兴趣的工作,全力以赴投入其中,“唯有爱的深,才能做的好”当你付出不亚于任何人的努力,出彩是必然的。作为职…

python流式下载处理_流式下载 - 对象存储 OSS - 阿里云

如果要下载的文件太大,或者一次性下载耗时太长,您可以通过流式下载,一次处理部分内容,直到完成文件的下载。以下代码用于流式下载文件:# -*- coding: utf-8 -*-import oss2# 阿里云主账号AccessKey拥有所有API的访问权…

python程序如何封装成接口_python接口自动化如何封装获取常量的类

这篇文章主要介绍了python接口自动化如何封装获取常量的类,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下背景:一、执行case的过程:首先需要,我们能够通过excel获取单元格的内…

华为云备份会上传私密相册吗_2 亿部华为手机背后,这个功能不能忽视

原标题:2 亿部华为手机背后,这个功能不能忽视华为消费者业务昨天宣布,在全球消费者和合作伙伴的热情支持下,凭借华为 P20 系列、Mate20 系列、荣耀10 等多款华为、荣耀机型在市场上的优异表现,2018 年华为智能手机发货…

python批量识别图中文字自动命名_python实现批量命名照片

python批量命名照片的具体代码,供大家参考,具体内容如下废话不多说,上效果图全部代码from tkinter import *import os#添加文件夹路径def rename():path entry.get()filelist os.listdir(path) #获取文件路径total_num len(filelist) #获取…

运行catia_教程 | CATIA宏的录制及应用

首先和大家聊一聊宏。宏,英文Macro,是很多软件中都带有的功能,能够将一系列操作的过程录制下来,即将若干命令集合为一个命令,无论是CATIA还是Office软件,甚至很多游戏也有宏功能。用户基于录制的宏进行适当…

arccatalog点要素显示不完_如果你读不完显示屏说明书,至少读完这几句话吧

如果说起LED显示屏现在能够被那么多人熟知的原因,常规全彩LED显示屏绝对是不可或缺的基础,常规全彩屏有两大分类分别是户外全彩LED显示屏和室内全彩LED显示屏,这个很多人也都知道,但你知道它们的区别在哪吗?让我们力诺…

bootstraptable合并标题_bootstrapTable 合并单元格

/*** 合并单元格* param data 原始数据(在服务端完成排序)* param fieldName 合并属性名称* param colspan 合并列* param target 目标表格对象*/function mergeCells(data,fieldName,colspan,target){//声明一个map计算相同属性值在data对象出现的次数和var sortMap {};for(v…

python爬虫beautifulsoup_python爬虫初步之BeautifulSoup实战

1.学习beautifulsoupStep.1 BeautifulSoup是基于标签的,所以我们第一步要准确定位到我们需- 要信息所在的标签。Step.2 从定位的标签中提取我们需要的信息(一般在属性或者在string中)Step.3 对于提取数据的简单处理2.使用beautifulsoup提取丁香园论坛的回复内容2.1用…

css 模拟器方向_GDS变方向动态循环单剪实验系统VDDCSS

原标题:GDS变方向动态循环单剪实验系统VDDCSS变方向循环简单剪切(VDDCSS)允许在两个方向进行简单剪切,而不是标准单向。这通过具有作用于其上的次级剪切作动器来实现,此剪切作动器与主剪切作动器相差90度排布。当用作可变方向的机器时&#x…

win10安装ipython_windows10下安装IPython notebook 用来查看.ipynb文档

在github下有部分文档是以.ipynb格式存档的,所以在windows10环境下安装IPython notebook,期间遇到一些问题记录下来。步骤:1、到python.org去下载python3.5.msi,因为是windows环境python2.7就算了吧2、将python3.5配置进环境变量(安装时选择加…

antd table动态表头_解决react使用antd table组件固定表头后,表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...

1、固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决。css按照官网说的:react一、若列头与内容不对齐或出现列重复,请指定…

python slice类型_复合类型Slice python中的list

# GO types Slice### Author 品茶> Slice(切片)代表变长的序列,序列中每个元素都具有相同的类型,slice类型写成[]T,T代表slice中元素的类型,slice的语法和数组很像> 只是没有固定长度而已。> slice的底层引用一个数组对象…

vue通过class获取dom_.NET Core通过Json或直接获取图形验证码(务必收藏备用)

(给DotNet加星标,提升.Net技能)转自:殷慈航cnblogs.com/jiyuwu/p/11803979.html很多人写的博客大家看了会一知半解,不知道怎么用,应该引用什么类库或者代码不全,这样很多小白很是头疼,尤其是尝新技术更是如…

c++ 动态分配数组_C/C++编程笔记:「C语言指针」民间解读版本

相信很多同学在初学C语言时候,都会遇到遇到一个问题:指针,永远的神!好消息,这个痛点将会在这篇文章得到解决,妈妈再也不用担心我的学习了!一说指针,第一反应,指针是一种数…