做 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. Go by Example-Switch分支结构

    上一节提到了Go语言中的if/else结构,但是条件过多的时候就不适合用if语句了,这个时候我们就可以使用switch语句了. 基本特性 switch 是一个条件语句,用于将一个表达式的求值结果与可能 ...

  2. Fiddler自动响应AutoResponder正则匹配

    AutoResponder-Add-Rule Editor 两个文本框,先说第一个: Mathes: 前缀为“EXACT:”表示完全匹配(大小写敏感) 无前缀表示基本搜索,表示搜索到字符串就匹配 前缀 ...

  3. java内存空间简述

    JVM的内存空间: 1. 寄存器 (Registers):最快的保存区域,位于处理器内部,由编译器分配.主要作用是记录当前线程所执行的字节码的行号.字节码解释器工作时就是通过改变当前线程的程序计数器选 ...

  4. js根据数据条数与每页多少条数据计算页数，js前端计算页数

    /**  *根据数据条数与每页多少条数据计算页数   * totalnum 数据条数  * limit 每页多少条  */ function pageCount (totalnum,limit){   ...

  5. angular父组件通过@ViewChild 主动获取子组 件的数据和方法

    1.调用子组件给子组件定义一个名称 <app-footer #footerChild></app-footer> 2. 引入 ViewChild import { Compon ...

  6. ISO/IEC 9899:2011 条款5——5.2.4 环境限制

    5.2.4 环境限制 1.翻译与执行环境都约束了语言翻译器和库的实现.下面概述了对一个顺应标准实现的语言相关的环境限制:库相关的限制在条款7中讨论. 5.2.4.1 翻译限制 1.实现应该能够翻译并执 ...

  7. Greenwich.SR2版本的Spring Cloud Eureka实例

    作为微服务架构中最为核心和基础的服务治理,注册中心提供了微服务实例的自动化注册与发现.而作为一个服务注册中心,eureka的作用与传统的zk.etcd的作用是一样的,同样也支持高可用(集群).不同之处 ...

  8. web手工项目04-测试报告的核心内容-HTTP请求和响应-fiddler工具进行抓包

    回顾 登录功能测试(需求分析(输入分析,处理分析,输出分析),数据构造,编写用例) 测试点设计思路--扩展(相关业务,特殊角度-分支,异常,逆向) 流程图元素与画法(开始/结束,路径,数据,判定,步骤 ...

  9. CentOS7下搭建zabbix监控（三）——Zabbix监控服务配置

    CentOS7下搭建zabbix监控(一)——Zabbix监控端配置 CentOS7下搭建zabbix监控(二)——Zabbix被监控端配置 (1).配置Zabbix监控Apache服务 主机名:yo ...

  10. 配置Apache控制浏览器端的缓存的有效期

    这个非常有用的优化,mod_expires可以减少20-30%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求.但要注意更新快的文件不要这么做.这个模块控制服 ...