做 loading 居中

剧中通常就是 top left 50% 再调一下自己就可以了

关键是要有 width height

遇到一些base on content 决定 height 的情况一般上有几个方案。

1. set min height 至少有一个 height (但是内容出来后就会跳，这个体验不是很好)

2. 找一个可靠的 parent 来定位. 这个 parent 的 width height 要是固定的. 这样就不会跳了

3. set 100% height 跟 parent 大, div 固定了height 就不会跳了，但是这个设计不一样通用

css 学习笔记 常用到的知识的更多相关文章

  1. CSS学习笔记1：基础知识

    CSS规则由两部分组成,选择器和声明     选择器:标签,告诉浏览器哪些标签需要用到这个样式     声明:样式的内容,由一或多对属性:值以:隔开组成,由{}包围,需要多个选择器时以逗号隔开     ...

  2. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  3. CSS学习笔记08 浮动

    从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...

  4. IP地址和子网划分学习笔记之《预备知识：进制计数》

    一.序:IP地址和子网划分学习笔记开篇 只要记住你的名字,不管你在世界的哪个地方,我一定会去见你.——新海诚 电影<你的名字> 在我们的日常生活中,每个人的名字对应一个唯一的身(敏)份(感 ...

  5. CSS学习笔记之样式声明

    目录 1.背景 2.文本 3.字体 4.列表 5.表格 6.轮廓 在这篇文章中你能看到有关于 CSS 样式设置的常用属性,文章的目录如下: 1.背景 (1)背景颜色 可以使用 background-c ...

  6. 2022-07-10 第五小组 pan小堂 css学习笔记

    css学习笔记 什么是 CSS? CSS 指的是层叠样式表* (Cascading Style Sheets) CSS 描述了如何在屏幕.纸张或其他媒体上显示 HTML 元素 CSS 节省了大量工作. ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. HTML+CSS学习笔记 (6) - 开始学习CSS

    HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...

  9. HTML+CSS学习笔记（5）- 与浏览者交互，表单标签

    HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...

随机推荐

  1. Leetcode题目461：汉明距离（位运算-简单）

    题目描述: 两个整数之间的汉明距离指的是这两个数字对应二进制位不同的位置的数目. 给出两个整数 x 和 y,计算它们之间的汉明距离. 注意:0 ≤ x, y < 231. 示例: 输入: x = ...

  2. 8. String to Integer (atoi) ---Leetcode

    Implement atoi to convert a string to an integer. 题目分析: 题目本身很简单就是将一个字符串转化成一个整数,但是由于字符串的千差万别,导致在实现的时候 ...

  3. Android数据绑定DataBinding（二）入门篇

    前言 之前写了Android数据绑定DataBinding(一)入门篇,很简单的记录了如何使用DataBinding,其初衷是想要代码中的数据发生改变,不需要繁琐的setText等操作,在最后说到了只 ...

  4. html5、手机端 input 单独打开相机、摄像头、录音功能

    相机:<input type="file" name="image" accept="image/*" capture="u ...

  5. Qt 中 Oracle 数据库 QOCI 驱动问题及解决

    Qt 中 Oracle 数据库 QOCI 驱动问题及解决是本文要讲述的问题,用Qt开发Oracle程序时,常会遇到QOCI驱动问题,主要表现为程序运行时出现下面的错误. QOCI driver not ...

  6. union all 和 union 的 区别

    https://www.cnblogs.com/wen-zi/p/9133754.html 主要: Union:对两个结果集进行并集操作,不包括重复行,同时进行默认规则的排序: Union All:对 ...

  7. C++ private,public,protected 关键字

    第一: private,public,protected的访问范围:   private: 只能由该类中的函数.其友元函数访问,不能被任何其他访问,该类的对象也不能访问. protected: 可以被 ...

  8. Android：修改连接到AP端显示的设备名

    一.Android系统代码中实现设备名分配 1. \frameworks\base\services\core\java\com\android\server\ConnectivityService. ...

  9. 阶段5 3.微服务项目【学成在线】_day09 课程预览 Eureka Feign_12-课程预览功能开发-需求分析

    5 课程预览功能开发 5.1 需求分析 课程预览功能将使用cms系统提供的页面预览功能,业务流程如下: 1.用户进入课程管理页面,点击课程预览,请求到课程管理服务 2.课程管理服务远程调用cms添加页 ...

  10. PAT 甲级 1046 Shortest Distance (20 分)（前缀和,想了一会儿）

    1046 Shortest Distance (20 分)   The task is really simple: given N exits on a highway which forms a ...