你未必知道的49个CSS知识点
作者:老姚,《JS正则迷你书》的作者 https://github.com/qdlaoyao/css-gif
本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读。
需要说明的是,顺序仍是按当时发布顺序罗列的,还没有系统的总结,多多包涵。另外这里,老姚谢谢各位一如既往的支持。
01.【负边距】负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似
02.【shape-outside】❤不要自以为是了。你以为自己是方的,在别人眼里你却是圆的
03.【BFC应用】BFC应用之阻止外边距合并(margin collapsing)
04.【BFC应用】BFC应用之消除浮动的影响
05.【flex不为认知的特性之一】flex布局下margin:auto的神奇用法
06.【flex不为认知的特性之二】flex布局,当flex-grow之和小于1时,只能按比例分配部分剩余空间,而不是全部
07.【input的宽度】并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值
08.【定位特性】绝对定位和固定定位时,同时设置 left 和 right 等同于隐式地设置宽度
09.【层叠上下文】层叠上下文:小辈就是小辈,再厉害也只是个小辈
10.【粘性定位】position:sticky,粘性定位要起作用,需要设置最后滞留位置。chrome有bug,firefox完美
11.【相邻兄弟选择器】相邻兄弟选择器之常用场景
12.【模态框】要使模态框背景透明,用rgba是一种简单方式
13.【三角形】css绘制三角形的原理
14.【table布局】display:table实现多列等高布局
15.【颜色对比度】❣蓝底红字,由于颜色对比度比较低,故而看不清,因此不是好的配色方案
16.【定宽高比】♥css实现定宽高比的原理:padding的百分比是相对于其包含块的宽度,而不是高度
17.【动画方向】动画方向可以选择alternate,去回交替进行
18.【线性渐变应用】css绘制彩带的原理
19.【隐藏文本】隐藏文字内容的两种办法
20.【居中】实现居中的一种简单方式
21.【角向渐变】新的渐变:角向渐变。可以用来实现饼图
22.【背景位置百分比】background-position百分比的正确理解方式:图片自身的百分比位置与容器同样的百分比位置重合
23.【背景重复新值】background-repeat新属性值:round和space。前者表示凑个整,后者表示留点缝
24.【背景附着】background-attachment指定背景如何附着在容器上,注意其属性值local和fixed的使用
25.【动画延时】动画添加延迟时间可以使步调不一致
26.【outline使用】可以使用outline来描边,不占地方,它甚至可以在里面
27【背景定位】当固定背景不随元素滚动时,背景定位是相对于视口的
28【tab-size】浏览器默认显示tab为8个空格,tab-size可以指定空格长度
29【动画暂停】CSS动画其实是可以暂停的
30【object-fit】图片在指定尺寸后,可以设置object-fit为contain或cover保持比例
31【鼠标状态】按钮禁用时,不要忘了设置鼠标状态
32【背景虚化】使用CSS滤镜实现背景虚化
33【fill-available】设置宽度为fill-available,可以使inline-block像block那样填充整个空间
34【fit-content】设置宽度为fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果
35【自定义属性】CSS自定义属性的简单使用
36【min-content/max-content】可以设置宽度为min-content和max-content,前者让内容尽可能地收缩,后者让内容尽可能地展开
37【进度条】使用渐变,一个div实现进度条
38可以在打印网页时,设置page相关属性。比如page-break-before属性来表示是否需要另起新页
39【逐帧动画】利用CSS精灵实现逐帧动画
40【resize】普通元素也可以像textarea那样resize
41【面包屑】使用before伪元素实现面包屑
42【sticky footer】使用grid布局实现sticky footer
43【动画填充状态】CSS可以设置动画开始前和结束时所保持的状态
44【动画负延迟】CSS动画可以设置延迟时间为负数,表示动画仿佛开始前就已经运行过了那么长时间
45【过渡】爱的魔力转圈圈
46【动画案例】水波效果原理
47【动画案例】CSS弹球动画效果的原理
48【outline】outline属性的妙用
49【grid】火狐浏览器grid布局检测器
希望有所帮助。
也欢迎阅读本人的《JS正则迷你书》
本文完。
References
《JS正则迷你书》(https://github.com/qdlaoyao/js-regex-mini-book)
你未必知道的49个CSS知识点的更多相关文章
- 【转载】你未必知道的49个CSS知识点
原文链接: https://juejin.im/post/5d3eca78e51d4561cb5dde12 虽然大多数我都会,嘻嘻.不过案例太生动了,值得收藏.
- 5种你未必知道的JavaScript和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...
- 5种你未必知道的JS和CSS交互的方法
随着浏览器不断的升级改进,CSS和JavaScript之间的界限越来越模糊.本来它们是负责着完全不同的功能,但最终,它们都属于网页前端技术,它们需要相互密切的合作.我们的网页中都有.js文件和.css ...
- 12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 1.CSS的color属性并非只能用于文本显示 对于CSS ...
- 你未必知道的css小知识
1:当按百分比设定一个元素的宽度时,它是相对于父容器的宽度计算的,但是,对于一些表示竖向距离的属性,例如padding-top,padding-bottom,margin-top,margin-bot ...
- 你需要知道的8个CSS带@的规则
1:@charset(用来设置html文档字符编码的格式,比如我们常用的,charset='utf-8') 注:建议CSS文件最顶部都加上@charset "utf-8";,避免出 ...
- 【转载】49个CSS知识点
01.[负边距]
- Android 程序员必须知道的 53 个知识点
1. android 单实例运行方法 我们都知道 Android 平台没有任务管理器,而内部 App 维护者一个 Activity history stack 来实现窗口显示和销毁,对于常规从快捷方式 ...
- 12个很少被人知道的CSS事实
之前没有认真的研究过,padding-bottom的值如果是百分比,那么它的实际值是根据父类的宽度来调整的.我还以为是根据这个元素的本身的宽度来定义呢?汗..padding-top/padding-l ...
随机推荐
- Redis相关概念
redis和memcache的比较 1 .Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,hash等数据结构的存储: 2 .Redis当物理内存用完时,可以将一些很久没用到的v ...
- mysql基础知识整理(一)
一.数据库基本操作 登录: 开启数据库服务,在cmd中输入指令 mysql -u用户名 -p密码 3退出: 在cmd中输入exit/quit;启动服务: net start 服务名 停止服务:net ...
- Python学习日记(十六) time模块和random模块
time模块 python表示时间的三种方式:时间戳.元祖(struct_time).格式化时间字符串 三种格式之间的转换: 1.时间戳 就是从1970年1月1日0点0分0秒开始按秒计算的偏移量,时间 ...
- 数据库操作语句类型(DQL、DML、DDL、DCL)
数据库操作语句类型(DQL.DML.DDL.DCL)简介 SQL语言共分为四大类:数据查询语言DQL,数据操纵语言DML,数据定义语言DDL,数据控制语言DCL. 1. 数据查询语言DQL 数据查询语 ...
- SQL Server 字段提取拼音首字母
目前工作中遇到一个情况,需要将SQL Server中的一个字段提取拼音的首字母,字段由汉字.英文.数字以及“-”构成,百度了一堆,找到如下方法,记录一下,以备后用! 首先建立一个函数 --生成拼音首码 ...
- POST请求接口实列
通过响应状态来判断是否读取数据与抛出异常,然后通过判断获取的字节数去读取数据或抛出异常 /** * 发送HttpPost请求 * @param strURL * 服务地址 * @param param ...
- 深度学习 吴恩达深度学习课程2第三周 tensorflow实践 参数初始化的影响
博主 撸的 该节 代码 地址 :https://github.com/LemonTree1994/machine-learning/blob/master/%E5%90%B4%E6%81%A9%E8 ...
- dt二次开发之-地区链接伪静态标签用法
用法:开启伪静态功能,参照前台,看看哪里有按照地区浏览,然后打开对应的模块和模板,修改 <a href="{$MOD[linkurl]}search.php?areaid={$v[ar ...
- java中的String要点解析
String类使我们经常使用的一个类,经常用来表示字符串常量. 字符串一旦被创建赋值,就不能被改变,因为String 底层是数组实现的,且被定义成final类型.我们可以看String源码. /** ...
- Java获取视频的大小、时长
前端上传视频之后,根据上传的视频文件获取视频的大小和时长 1.获取视频时长 private String ReadVideoTime(File source) { Encoder encoder = ...