此场景适用于移动端百分比布局，背景全屏显示。

在一个没有设置宽高的容器中设置背景，想要背景全屏显示，设置bcakground-size:100%;后还需设置position:absolut;

原因：

absolute会脱离normal float, 即该元素会直接以root标签(类似window但不是<html>标签)进行参照,而root标签的高度存在具体数值, 即浏览器视窗高度, 有明确px值.

而relative不会脱离normal float, 他的height会直接依赖直接父元素(em单位也是), 所以百分比计算出来的高度是依照父元素继承的.

在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?的更多相关文章

  1. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  2. 在虚拟机中安装ubuntu16.04后不能全屏显示

    一.在终端输入:xrandr 二.输入:xrandr -s 1920x1440 参考网站:https://blog.csdn.net/qq_33202928/article/details/75021 ...

  3. 物体position:absolute后设置left:50%发生的有趣小事

    今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下 一 准备知识 ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽 ...

  4. <canvas>设置宽高遇到的问题

    在使用<canvas>元素时必须设置宽度和高度,指定可以绘画的区域大小.但是这里设置宽度和高度的时候有一个小问题. 样例代码: <!DOCTYPE html> <html ...

  5. css实现定高的元素在不定高的容器中水平垂直居中（兼容IE8及以上）

    容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示: <!DOCTYPE html> <html> <head lang= ...

  6. 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考

    起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...

  7. a标签什么时候可以设置宽高

    行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高:而当设置了绝对定位或者浮动,会生成块框(即变成块元素),所以就可以设置宽高了

  8. android下载网络图片，设置宽高，等比缩放

    使用Picasso组件去下载图片会发现图片宽高会变形不受等比缩放控制,即使设置了图片的 scaleType,可能是对Picasso的api没有用对, Picasso.with(this.activit ...

  9. 第4天：JS入门-给div设置宽高背景色

    今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...

随机推荐

  1. Flashing Back a Failed Primary Database into a Physical Standby Database（闪回FAILOVER失败的物理备库）

    文档操作依据来自官方网址:https://docs.oracle.com/cd/E11882_01/server.112/e41134/scenarios.htm#SBYDB4888 闪回FAILOV ...

  2. Ubuntu安装Anaconda

    安装Anaconda的最简单方法是下载最新的Anaconda安装程序bash脚本,然后运行它. 在Anaconda Downloads页面找到最新版本的Anaconda for Python 3 .当 ...

  3. Chrome浏览器及调试教程

    ==>(微信公众号:IT知更鸟)欢迎关注<^>@<^> Chrome浏览器及调试教程 在web开发过程中,我们在写JavaScript脚本时难免会遇到各种bug,这时,我 ...

  4. [活动] 【奖品撩人】部落守卫者集结令·这一回同程SRC的安全由“我”守卫！

    i春秋SRC部落联合同程SRC发布首届部落守卫者漏洞提交任务(代号G001)! 你准备好了吗! [部落守卫者集结令]拿巨额奖金?上白帽子排行榜?近距离膜拜大佬?学技术?掌握窍门?又或者你是个责任感爆棚 ...

  5. MySQL之集合函数与分组查询

    这是分组查询用到的语句,也包括了排序以及常用的集合函数

  6. 201621123040《Java程序设计》第3周学习总结

    1.本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词,如类.对象.封装等 面向对象的思想 对象 类 1.2 用思维导图或者Onenote或其他工具将这些关键词组织起来. 掌握的还不够深 ...

  7. BAT齐聚阿里安全-ASRC生态大会：呼吁联合共建网络安全白色产业链

    图说:近日,阿里安全-ASRC生态大会在杭州举行,包括BAT在内的20余家国内知名互联网企业代表,回顾过去一年网络安全面临的问题与挑战,共谋生态安全治理思路. "123456.111111. ...

  8. Web Api 利用 cors 实现跨域

    一.安装 cors 二.修改 Web.config <appSettings> <add key="cors:allowedMethods" value=&quo ...

  9. BizTalk 2016 配置 RosettaNet遇到的坑

    本文只针对已经安装好BizTalk 2016 需要在安装RosettaNet加速器的伙伴. IIS配置 权限问题 错误信息 Failed to get IIS metabase property. E ...

  10. Python内置函数(51)——hasattr

    英文文档: hasattr(object, name) The arguments are an object and a string. The result is True if the stri ...