在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?
此场景适用于移动端百分比布局,背景全屏显示。
在一个没有设置宽高的容器中设置背景,想要背景全屏显示,设置bcakground-size:100%;后还需设置position:absolut;
原因:
absolute会脱离normal float, 即该元素会直接以root标签
(类似window但不是<html>标签)进行参照,而root标签的高度存在具体数值, 即浏览器视窗高度, 有明确px值
.
而relative不会脱离normal float, 他的height会直接依赖直接父元素(em单位也是), 所以百分比计算出来的高度是依照父元素继承
的.
在一个没有设置宽高的容器中,为什么设置position:absolute后就可以全屏显示了?的更多相关文章
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- 在虚拟机中安装ubuntu16.04后不能全屏显示
一.在终端输入:xrandr 二.输入:xrandr -s 1920x1440 参考网站:https://blog.csdn.net/qq_33202928/article/details/75021 ...
- 物体position:absolute后设置left:50%发生的有趣小事
今天在重构ui控件中3秒hint提示框样式,发现了一个有趣的小事,特发个文章记录一下,方便自己日后看一下 一 准备知识 ①一个已设置宽高的块状元素设置position:absolute后会保持他原来宽 ...
- <canvas>设置宽高遇到的问题
在使用<canvas>元素时必须设置宽度和高度,指定可以绘画的区域大小.但是这里设置宽度和高度的时候有一个小问题. 样例代码: <!DOCTYPE html> <html ...
- css实现定高的元素在不定高的容器中水平垂直居中(兼容IE8及以上)
容器设置相对定位 元素设置宽高,并使用绝对定位,上下左右值均为0,margin:auto 如下所示: <!DOCTYPE html> <html> <head lang= ...
- 关于“float”的一次探索--遇到了一个span元素可以设置宽高引发的思考
起初,这个问题和float还有设置宽高之间是没有任何关联的,一开始这是一个关于height和line-height的问题,目的是为了探究一下这两者之间的关系,但是在学习的过程中,我翻之前写的代码,发现 ...
- a标签什么时候可以设置宽高
行内元素(如a标签),在文档流中的时候因为是行内元素所以无法设置宽高:而当设置了绝对定位或者浮动,会生成块框(即变成块元素),所以就可以设置宽高了
- android下载网络图片,设置宽高,等比缩放
使用Picasso组件去下载图片会发现图片宽高会变形不受等比缩放控制,即使设置了图片的 scaleType,可能是对Picasso的api没有用对, Picasso.with(this.activit ...
- 第4天:JS入门-给div设置宽高背景色
今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高.背景色.一点点都是进步.核心代码如下: <!DOCTYPE html><html lang="en&quo ...
随机推荐
- 如何让shell脚本自杀
有些时候我们写的shell脚本中有一些后台任务,当脚本的流程已经执行到结尾处并退出时,这些后台任务会直接挂靠在init/systemd进程下,而不会随着脚本退出而停止. 例如: [root@maria ...
- 基于docker 部署 canvas-lms
准备: 一台8G内存的服务器.安装好docker, pull一个ubuntu镜像下来, 可以是最新版也可以是官方支持的14/ 16 Step 1: 启动docker容易加载ubuntu镜像.命令如下 ...
- Android 的消息队列模型
Android 的消息队列模型 Android是参考Windows的消息循环机制来实现Android自身的消息循环的. Android通过Looper.Handler来实现消息循环机制,Andr ...
- hibernate框架学习笔记2:配置文件详解
实体类: package domain; public class Customer { private Long cust_id; private String cust_name; private ...
- c语言字符类型作业
一.PTA实验作业 题目1:7-2 统计一行文本的单词个数 1. 本题PTA提交列表 2. 设计思路 1.定义整形变量i=0,count=0,flag. 2.定义数组str[999] 3.输入str[ ...
- js计时功能
//个位秒加 function time4jia() { //分钟60为上限 所有加停止 if (sz(a('time1').innerHTML) == 6) { return; } var m4 = ...
- python 归并排序
def merge_sort(alist): if len(alist) <= 1: return alist # 二分分解 num = len(alist)/2 left = merge_so ...
- JAVA中GridBagLayout布局管理器应用详解
很多情况下,我们已经不需要通过编写代码来实现一个应用程序的图形界面,而是通过强大的IDE工具通过拖拽辅以简单的事件处理代码即可很轻松的完成.但是我们不得不面对这样操作存在的一些问题,有时候我们希望能够 ...
- Java可重入锁如何避免死锁
本文由https://bbs.csdn.net/topics/390939500和https://zhidao.baidu.com/question/1946051090515119908.html启 ...
- python多目录字符串查找匹配
1. 需求来自于实际工作: 需要处理一批服务器上运行的redis实例,每个redis实例可能有密码,也可能没有,有密码的,密码配置格式一定是: requirepass XXXXX # XXXX是密码 ...