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

在一个没有设置宽高的容器中设置背景，想要背景全屏显示，设置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. mybatis代码生成器

    mybatis代码生成器 1.pom.xml文件添加依赖 <build> <finalName>mybatis</finalName> <pluginMana ...

  2. APS期刊投稿准备: REVTex格式

    APS是American Physics Society的简称.旗下比较有影响力的期刊有: "pra, prb, prc, prd, pre, prl, prstab, prstper, o ...

  3. 四十六、android中的Bitmap

    四十六.android中的Bitmap: http://www.cnblogs.com/linjiqin/archive/2011/12/28/2304940.html 四十七.实现调用Android ...

  4. C#中的String类

    一.String类的方法 1. Trim():清除字符串两端的空格 2. ToLower():将字符串转换为小写 3. Equals():比较两个字符串的值,bool 4. IndexOf(value ...

  5. java基础笔记（9）----集合之list集合

    集合 对于集合的理解,集合是一个容器,用于存储和管理其它对象的对象 集合,首先了解所有集合的父接口----collection 特点:存储任意object元素 方法 boolean add(Objec ...

  6. Leetcode 27——Remove Element

    Given an array and a value, remove all instances of that value in-place and return the new length. D ...

  7. 云计算之路-阿里云上-容器难容：优化自建 docker swarm 集群的部署

    在上周六遭遇阿里云容器服务 swarm 版的故障之后,我们决定还是走自建 docker swarm 之路,只要不是阿里云底层的问题,我们相信会找到办法解决或避开自建 docker swarm 不稳定的 ...

  8. oracle数据库修改连接数

    最近在用weblogic部署项目,同时用的是oracle数据库,然后今天遇到一个问题:多个用户连接数据库连接不成功,有时提示被锁住,经检查发现一方面weblogic控制台中数据源的连接池配置没有配置足 ...

  9. 2017级C语言教学总结

    一个学期下来,对于这门课教学还是感受挺多,多个教学平台辅助,确实和我前10年的教学方式区别很多,也辛苦很多. 一.课堂教学方面 1.课堂派预习作业 主要借助课堂派平台,每次课前发布预习作业.而预习作业 ...

  10. 网络1712--c语言第一次作业总结

    1.作业亮点 1.1大家均能较为独立自主地完成第一次c语言作业,无明显抄袭现象 1.2 以下几位同学博文写的较为优秀,可作为范例供大家参考 田亚琴--态度端正,及时回复评论并及时完善修改博文 戴洁-- ...