css 百分比 怎么固定正方形_你未必知道的49个CSS知识点

8f6361d388486864d0a669f6299419c7.png

本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。

鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读。

需要说明的是,顺序仍是按当时发布顺序罗列的,还没有系统的总结,多多包涵。

另外这里,老姚谢谢各位一如既往的支持。

01.【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似

5c2337228eab99a39d6b6ee25b5e1adb.gif

02.【shape-outside】❤不要自以为是了。你以为自己是方的,在别人眼里你却是圆的

3d25158a2262c1f14541e07d5cf639eb.gif

03.【BFC应用】BFC应用之阻止外边距合并(margin collapsing)

55038a6b2b039da0e61a38d3ce6f7238.gif

04.【BFC应用】BFC应用之消除浮动的影响

cf19093108d317996426a997638d0ee7.gif

05.【flex不为人知的特性之一】flex布局下margin:auto的神奇用法

788545b4872ebfe17948673ff30ac1c1.gif

06.【flex不为人知的特性之二】flex布局,当flex-grow之和小于1时,只能按比例分配部分剩余空间,而不是全部

ac23abcee0735da5ce17bc5583e83cea.gif

07.【input的宽度】并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值

22b4572aaad92e23e3ebc073e49df17b.gif

08.【定位特性】绝对定位和固定定位时,同时设置 left 和 right 等同于隐式地设置宽度

e5e9dad0191e3cfcc9ee2992c1c3d2ae.gif

09.【层叠上下文】层叠上下文:小辈就是小辈,再厉害也只是个小辈

2986096905656762525d14d446c6f513.gif

10.【粘性定位】position:sticky,粘性定位要起作用,需要设置最后滞留位置。chrome有bug,firefox完美

d21623e26ff06206e218a44409bdd03d.gif

11.【相邻兄弟选择器】相邻兄弟选择器之常用场景

5a550b0360e87dbf2c1b69f358c552a6.gif

12.【模态框】要使模态框背景透明,用rgba是一种简单方式

fa7f9e1411ecb75252e4c947583e7175.gif

13.【三角形】css绘制三角形的原理

66b086f9c281aad96dec6ce22a960c77.gif

14.【table布局】display:table实现多列等高布局

566650bd643b1b1a4c7cd519b044add8.gif

15.【颜色对比度】❣蓝底红字,由于颜色对比度比较低,故而看不清,因此不是好的配色方案

4a838fc50bd13da5b061bdd22b04c66e.gif

16.【定宽高比】♥css实现定宽高比的原理:padding的百分比是相对于其包含块的宽度,而不是高度

78b3308509bc21f9f6ee961ee0bb4f4f.gif

17.【动画方向】动画方向可以选择alternate,去回交替进行

3076973088f90b2a805eeeae35e67f73.gif

18.【线性渐变应用】css绘制彩带的原理

233747630ef77c790a8540bfb28db649.gif

19.【隐藏文本】隐藏文字内容的两种办法

a7a772d457b8bfc3d4c883e4cdaa3f81.gif

20.【居中】实现居中的一种简单方式

0c9599117e35d9e30653807be1f18c0b.gif

21.【角向渐变】新的渐变:角向渐变。可以用来实现饼图

5f09b4e72b7cb252ab1fdc5948d368e7.gif

22.【背景位置百分比】background-position百分比的正确理解方式:图片自身的百分比位置与容器同样的百分比位置重合

e56e24304c7dead207c33844ef97f361.gif

23.【背景重复新值】background-repeat新属性值:round和space。前者表示凑个整,后者表示留点缝

5a07b4ac4ae6d12eea4046a39cdba254.gif

24.【背景附着】background-attachment指定背景如何附着在容器上,注意其属性值local和fixed的使用

da07a54057f41810329fe6c17dec64a8.gif

25.【动画延时】动画添加延迟时间可以使步调不一致

e152f37393762b6f62b9338a62918eea.gif

26.【outline使用】可以使用outline来描边,不占地方,它甚至可以在里面

e94bd18d55e3e1fc1fce6d3c24b2ba3f.gif

27【背景定位】当固定背景不随元素滚动时,背景定位是相对于视口的

83816f1b77d3e1ea05610a546be7f363.gif

28【tab-size】浏览器默认显示tab为8个空格,tab-size可以指定空格长度

96ceeef70ffae375b25cf936b5fa7061.gif

29【动画暂停】CSS动画其实是可以暂停的

c0e41e76bcc8464b94a7a6f69e0eca81.gif

30【object-fit】图片在指定尺寸后,可以设置object-fit为contain或cover保持比例

d98f49281bdff556a77348091059b882.gif

31【鼠标状态】按钮禁用时,不要忘了设置鼠标状态

b237b033987e81569c48d0606fb83ec9.gif

32【背景虚化】使用CSS滤镜实现背景虚化

78fb8c5a4492a9f8effbf22d886f4a87.gif

33【fill-available】设置宽度为fill-available,可以使inline-block像block那样填充整个空间

a546e5cd811325165748b48319dde570.gif

34【fit-content】设置宽度为fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果

4413679da9f11f444f9b6d6829bc2b95.gif

35【自定义属性】CSS自定义属性的简单使用

800996d87819fc2ca7d91e07e9893a39.gif

36【min-content/max-content】可以设置宽度为min-content和max-content,前者让内容尽可能地收缩,后者让内容尽可能地展开

3bb3fc46431ac04bcdf5cf7c213fdb9f.gif

37【进度条】使用渐变,一个div实现进度条

e2573fd52258ade5f0b26aa796044331.gif

38【打印】可以在打印网页时,设置page相关属性。比如page-break-before属性来表示是否需要另起新页

57e9f05fc9e847f7562f1578ee4a7005.gif

39【逐帧动画】利用CSS精灵实现逐帧动画

64be15f29684731ae4b0fd562df094a0.gif

40【resize】普通元素也可以像textarea那样resize

c82932b89e96f638e73e4658215cf628.gif

41【面包屑】使用before伪元素实现面包屑

204c1e406d3d0cf5ff264cf47d831117.gif

42【sticky footer】使用grid布局实现sticky footer

aed972add0a6dcfc1fb92fb0cc17bead.gif

43【动画填充状态】CSS可以设置动画开始前和结束时所保持的状态

baedd97597a8be8fab3a4d7c3c1118ee.gif

44【动画负延迟】CSS动画可以设置延迟时间为负数,表示动画仿佛开始前就已经运行过了那么长时间

219603395fa7fd08c0a0e14e1076c022.gif

45【过渡】爱的魔力转圈圈

feabb378ce4587e0d521069ed28a629e.gif

46【动画案例】水波效果原理

c09cc3ba75dd49b6954d511aea499c56.gif

47【动画案例】CSS弹球动画效果的原理

75ea8b6723555fb541aa265283a71ec3.gif

48【outline】outline属性的妙用

987a22bbb75dba037c9414a8ef89d5ec.gif

49【grid】火狐浏览器grid布局检测器

997d2323304056fcf677d0480e0f1823.gif

希望有所帮助。


原链接:https://juejin.im/post/5d3eca78e51d4561cb5dde12

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/472971.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS 实现加载动画之五-光盘旋转

今天做的这个动画叫光盘旋转,名字自己取的。动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画。做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来。这个动画的实现也很简单,关键点在于…

css hover变成手_web前端入门到实战:彻底掌握css动画「transition」

马上就2020年了,不知道小伙伴们今年学习了css3动画了吗?说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(…

用Docker部署TensorFlow Serving服务

文章目录1. 安装 Docker2. 使用 Docker 部署3. 请求服务3.1 手写数字例子3.2 猫狗分类例子参考: https://tf.wiki/zh_hans/deployment/serving.html# https://tensorflow.google.cn/tfx/serving/docker 1. 安装 Docker 以下均为 centos7 环境 参考文章&#xff1a…

K-Means算法和K-Means++算法的聚类

在构成圆形的30000个随机样本点上,设置7个簇,使用K-Means算法聚类 from math import pi, sin, cos from collections import namedtuple from random import random, choice from copy import copy import matplotlib.pyplot as plt import numpy as np…

convert.todatetime指定日期格式_MATLAB的时间与日期

7 日期和时间MATLAB在2014b版本中将日期和时间独立成了一个数据类型,新的版本中对于时间数据的处理功能更为强大。比如datetime和duration等函数,可以支持对时间的高效计算、对比、格式化显示。对这类数组的操作方法和对普通数组的操作是基本一致的。下…

dategurd oracle_Oracle 时间和日期处理

-- Oracle时间SELECT SYSDATE FROM dual; -- 系统时间SELECT SYSTIMESTAMP FROM dual; -- 当前系统时间戳SELECT CURRENT_TIMESTAMP FROM dual; -- 与时区设置有关,返回的秒是系统的,返回的日期和时间是根据时区转换过的SELECT current_date FROM dual; …

关于有多个Fragment中的textview跑马灯问题

问题描述一个activity里面有多个Fragment,1,2,3,4其中fragment1中有2个textview,在第一次启动fragment1的时候跑马灯能正常跑马; 当跳转到其他fragment后,再回到fragment1的时候,跑马灯已经不跑马了?关于这个是textview的焦点问题吗?求大神解答,,,求大神解决.... 解决方案1应…

跨设备链路聚合_路由与交换技术(华为设备)第五讲---链路聚合

前言:随着网络规模不断扩大,用户对骨干链路的带宽和可靠性提出了越来越高的要求。在传统技术中,常用更换高速率的接口板或更换支持高速率接口板的设备的方式来增加带宽,但这种方案需要付出高额的费用,而且不够灵活。采…

电影评论分类:二分类问题

根据电影评论的 文字内容将其划分为正面或负面。 使用IMDB 数据集,它包含来自互联网电影数据库(IMDB)的50 000 条严重两极分 化的评论。数据集被分为用于训练的25 000 条评论与用于测试的25 000 条评论,训练集和测试 集都包含50%…

TensorFlow 2.0 - tf.distribute 分布式训练

文章目录1. 单机多卡 MirroredStrategy2. 多机训练 MultiWorkerMirroredStrategy3. TPU 张量处理单元学习于:简单粗暴 TensorFlow 2 1. 单机多卡 MirroredStrategy # 分布式训练 import tensorflow as tf import tensorflow_datasets as tfds# 1 单机多卡 Mirrore…

python抽象基类的作用_Python:多态、鸭子模型和抽象基类

1. 多态什么是多态-- 多态,指的是一种事务具有多种形态;-- python是一种动态语言,默认支持多态,同一个方法 调用 不同的类对象 ,执行的 结果各不相同;多态实现-- 继承:不同子类 继承 同一父类&a…

非抢占式优先级调度算法_华为鸿蒙操作系统内核真面目之抢占式和非抢占式内核...

华为鸿蒙操作系统内核真面目之抢占式和非抢占式内核众所周知华为鸿蒙操作系统内核是Linux内核。而Linux内核即是抢占式内核也是非抢占式内核。设置软件优先级在优先级在0-99之间是抢占式优先级。设置优先级在100-139之间是非抢占式优先级。从华为官方发布的信息--优先级高的任务…

windows下python 使用CRF++ python接口的配置

1. 下载包含python接口的版本的CRF并安装,安装成功后查看python文件夹包含setup.py 文件,内容如下: #!/usr/bin/env python from distutils.core import setup,Extension,os import string setup(name "mecab-python", p…

TensorFlow 2.0 - Hub 模型复用

文章目录1. tfhub2. 例子:神经风格转换3. retrain 例子学习于:简单粗暴 TensorFlow 2 1. tfhub 网址: https://hub.tensorflow.google.cn/ https://tfhub.dev/ 可以搜索,下载模型 安装包 pip install tensorflow-hub import…

微服务 注册中心的作用_102,谈谈微服务注册中心zookeeperamp;Eureka

首先,大家要明确一点微服务注册中心是一个重要的组件,解决的是服务的注册和发现的问题,而zookeeper,Eureka都只是其中一款落地实现的产品,再比如Nacos也是如此,所以关键是掌握注册中心的工作原理&#xff0…

python2转python3代码_2to3 – 自动Python 2到3代码翻译 – 开发工具(Python教程)(参考资料)...

使用2to3 2to3通常与Python解释器一起安装为脚本。它也位于Python根目录的Tools/scripts目录下 2to3的基本参数是要转换的文件或目录列表。这些目录以递归方式遍历Python源. 这是一个示例Python 2.x源文件, def greet(name): print "Hello, {0}!".format(…

文本表示

1 one-hot representation 该单词对应所在元素为1,向量中其他元素均为0,向量的维度就等于词库中的单词数目  所有向量都是互相正交的,我们无法有效的表示两个向量间的相似度  向量维度过大。 from sklearn.feature_extraction.text…

天池 在线编程 课程表(拓扑排序 + 回溯)

文章目录1. 题目2. 解题1. 题目 总共有n个课程,从0到n-1。 有些课程可能有先决条件,例如,你想修课程0,你必须先修一门课程1,这两门课之间的关系表示为:[0,1] 给定课程的总数和先决条件对的列表,返回你可以…

fence机制 linux_Linux ha fence设备测试

另外,在配置RHCS5.3时,Fence设备只ping通还不行,还必须经过测试,我在网上找了一篇IPMI的文章,现粘贴如下:What is IPMI?Intelligent Platform Management Interface[edit]AdvantagesLow cost.Available on…

Apache2.4 与 PHP 5.5 64位版的安装配置

我的环境:windows7 旗舰版 64位 首先下载相关文件: php 5.5.0 windows 64版 http://windows.php.net/download/#php-5.5 (选择 64位的下载) apache2.4 压缩版下载 http://www.apachelounge.com/download/VC11/ 下载版本一定要对应…