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%; }

责任编辑：

body 没有被撑开_body没有高度设置背景色为什么可以全屏显示？相关推荐

w10投影全屏设置_win10投影怎么全屏显示,投影和电脑同时显示
1.打开计算抄机并连接计算机和投影仪之间的数据线(VGA或HDMI). 2.右键单击计算机桌面的空白区域并选择"屏幕分辨率"(某些系统通过:鼠标右键菜单 - >显示设置 - ...
前端问题之body没设置高度背景色为什么会全屏显示？
还记得我们开发全屏页面或者是移动端页面时经常会设置一句话是不是只知道用?却不知道怎么回事? 原因是,当没有内容撑开高度时,html和body的默认高度是0,如果内容想要按照比例或是撑满全屏时,就没办 ...
VMware ubuntu虚拟机怎么设置分辨率？（全屏显示、大屏显示）
参考文章:ubuntu设置分辨率的两种方式
html中背景图片自动全屏显示,HTML设置body背景图片全屏显示
JMeter中返回Json数据的处理方法 Json 作为一种数据交换格式在网络开发,特别是 Ajax 与 Restful 架构中应用的越来越广泛.而 Apache 的 JMeter 也是较受欢迎的压力 ...
小米android9使用全屏,小米8应用怎么全屏显示小米8应用全屏运行设置方法
小米8怎么全屏显示应用?小米8应用怎么全屏显示?小米8手机采用的全面屏设计,显示屏比例是18.5:9,但是,最近很多小伙伴表示使用的应用都无法全屏显示,怎么回事呢?那是,因为你还没由设置允许应用全屏运 ...
Win10玩魔兽争霸不能全屏显示的设置教程
Win10玩魔兽争霸不能全屏显示的设置教程: 1.右击桌面左下角的windows图标,显示图片内容,然后点击运行: 2.点击运行,有个输入框,输入regedit,点击确认: 3.显示win10注册表, ...
【Android】Android 设置Activity窗体不显示标题和全屏显示
[一]Android 设置Activity窗体不显示标题 android:theme="@android:style/Theme.NoTitleBar" 1 <activi ...
设置Dialog全屏显示(转)
昨天有人问怎样让Dialog全屏显示? 默认的Dialog是不能全屏的. 也就是怎么设置Dialog的Layout都无用的. 有一个地方能够设置. 就是. . . . 看代码直观. 先设置一个styl ...
有道云笔记设置界面占满全屏（右侧）
有道云笔记设置界面占满全屏(右侧) 其实是叫视角,但是一般查询的时候不会查这个词语吧总之一开始是阅读视角,界面窄一点普通视角会宽一点吧

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

body 没有被撑开_body没有高度设置背景色为什么可以全屏显示？相关推荐

最新文章

热门文章