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

在一个没有设置宽高的容器中设置背景，想要背景全屏显示，设置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. 【Linux】 linux的进程系统一点补充

    linux进程系统 ■ 程序 vs. 进程 程序静态地存放在磁盘中.用户可以触发执行程序,被触发后的程序就存进内存中成为一个个体,即为进程. 有些进程(比如crond需要每分钟都扫描.守护进程等等)是 ...

  2. 01_搭建Linux虚拟机（下）_我的Linux之路

    原文发布在特克斯博客www.susmote.com ​ 上一节已经给大家讲解了如何用VMware安装虚拟机,但是只讲了在VMware里面的操作 接下来我们讲在Linux内部的安装步骤 首先我们启动Li ...

  3. [Java反射机制]用反射改进简单工厂模式设计

    如果做开发的工作,工厂设计模式大概都已经深入人心了,比较常见的例子就是在代码中实现数据库操作类,考虑到后期可能会有数据库类型变换或者迁移,一般都会对一个数据库的操作类抽象出来一个接口,然后用工厂去获取 ...

  4. C#编写一个大字母游戏，详细代码，不懂问博主。。。。

    using System; using System.Drawing; using System.Windows.Forms; using System.Media; namespace dazimu ...

  5. 【Spring源码深度解析学习系列】容器的基础XmlBeanFactory（二）

    一.配置文件封装 Spring的配置文件读取是通过ClassPathResource进行封装的,如new ClassPathResource("test.xml"),那么Class ...

  6. hibernate框架学习笔记1：搭建与测试

    hibernate框架属于dao层,类似dbutils的作用,是一款ORM(对象关系映射)操作 使用hibernate框架好处是:操作数据库不需要写SQL语句,使用面向对象的方式完成 这里使用ecli ...

  7. windows下apache报os 10048错误

    在apache的bin目录下运行httpd -k install,报错os10048 (错误信息是跟443端口有关),网上的答案说的是改掉httpd.conf里的默认端口或者关闭占用端口的进程,默认端 ...

  8. 配置 CSV Data Set Config 来参数化新增客户信息操作

    1.首先根据新增客户信息的http请求,来确定需要参数化的变量,选取符合测试需求且经常变化或未来会变化的变量为需要参数化的变量,如本文中的客户端名称(sys_name).描述(description) ...

  9. [福大软工] W班 总成绩排行榜

    评分链接 作业1   作业2    作业3    作业4 总分排名

  10. 听翁恺老师mooc笔记（16）--程序设计与C语言

    问题1:计算机遍布生活的各个方面,若你需要一个功能可以下载APP,我们需要的大部分功能都可以找到对应的APP,如果没有可以自己写一个软件,但是很少人需要这么做,那么我们为什么学习计算机编程语言? 学习 ...