本文的每一条,都是我曾经发过的掘金沸点,其中有很多条超过了百赞(窃喜)。
鉴于时不时有童鞋翻我以前的沸点,因此,本文收集了个人目前发过的所有CSS知识点动图,以便阅读。
需要说明的是,顺序仍是按当时发布顺序罗列的,还没有系统的总结,多多包涵。
另外这里,老姚谢谢各位一如既往的支持。😘😘😘
01.【负边距】💘负边距的效果。注意左右负边距表现并不一致。左为负时,是左移,右为负时,是左拉。上下与左右类似
![](https://img-blog.csdnimg.cn/img_convert/7706091c95b2abd5a74b66ca5596d690.webp?x-oss-process=image/format,png)
02.【shape-outside】❤不要自以为是了。你以为自己是方的,在别人眼里你却是圆的
![](https://img-blog.csdnimg.cn/img_convert/058cb582deb9c7db224b76549b8fb64b.webp?x-oss-process=image/format,png)
03.【BFC应用】💓BFC应用之阻止外边距合并(margin collapsing)
![](https://img-blog.csdnimg.cn/img_convert/748e2453d77a8e954ace5b4ce875054e.webp?x-oss-process=image/format,png)
04.【BFC应用】💔BFC应用之消除浮动的影响
![](https://img-blog.csdnimg.cn/img_convert/adf056319d97e8b2be2fff40d319e642.webp?x-oss-process=image/format,png)
05.【flex不为人知的特性之一】💕flex布局下margin:auto的神奇用法
![](https://img-blog.csdnimg.cn/img_convert/00fac5f37d0bc7c2c12ec0ffadbc26f5.webp?x-oss-process=image/format,png)
06.【flex不为人知的特性之二】💖flex布局,当flex-grow之和小于1时,只能按比例分配部分剩余空间,而不是全部
![](https://img-blog.csdnimg.cn/img_convert/058337cc3f724d8ea8690de52d053aeb.webp?x-oss-process=image/format,png)
07.【input的宽度】💗并不是给元素设置display:block就会自动填充父元素宽度。input 就是个例外,其默认宽度取决于size特性的值
![](https://img-blog.csdnimg.cn/img_convert/19f15afeadab4328e25e62758ceea0b5.webp?x-oss-process=image/format,png)
08.【定位特性】💙绝对定位和固定定位时,同时设置 left 和 right 等同于隐式地设置宽度
![](https://img-blog.csdnimg.cn/img_convert/c26523a6484f722c84928534b87e4eff.webp?x-oss-process=image/format,png)
09.【层叠上下文】💚层叠上下文:小辈就是小辈,再厉害也只是个小辈
![](https://img-blog.csdnimg.cn/img_convert/a791b3fe6eb92beaf1257f3f124db79c.webp?x-oss-process=image/format,png)
10.【粘性定位】💛position:sticky,粘性定位要起作用,需要设置最后滞留位置。chrome有bug,firefox完美
![](https://img-blog.csdnimg.cn/img_convert/9b80c252c32be834ba4451315c3cfff0.webp?x-oss-process=image/format,png)
11.【相邻兄弟选择器】💜相邻兄弟选择器之常用场景
![](https://img-blog.csdnimg.cn/img_convert/d04ef458a64f73ec02a38d144eb7b79e.webp?x-oss-process=image/format,png)
12.【模态框】🖤要使模态框背景透明,用rgba是一种简单方式
![](https://img-blog.csdnimg.cn/img_convert/8bad94433d97e7a2e247562f52876b43.webp?x-oss-process=image/format,png)
13.【三角形】💝css绘制三角形的原理
![](https://img-blog.csdnimg.cn/img_convert/a9d04d7da777b9a6070fbccd7cee7a22.gif)
14.【table布局】💞display:table实现多列等高布局
![](https://img-blog.csdnimg.cn/img_convert/1808ecd254f8b992ffcb2e32edd0d173.webp?x-oss-process=image/format,png)
15.【颜色对比度】❣蓝底红字,由于颜色对比度比较低,故而看不清,因此不是好的配色方案😂
![](https://img-blog.csdnimg.cn/img_convert/8bdeeef14260d063cecf014a7ca77dff.webp?x-oss-process=image/format,png)
16.【定宽高比】♥css实现定宽高比的原理:padding的百分比是相对于其包含块的宽度,而不是高度
![](https://img-blog.csdnimg.cn/img_convert/53b8fd6c5bf12fe676c9c23927b07977.webp?x-oss-process=image/format,png)
17.【动画方向】🐹动画方向可以选择alternate,去回交替进行
![](https://img-blog.csdnimg.cn/img_convert/411fdf4072ae91325d67a037b8c16e47.webp?x-oss-process=image/format,png)
18.【线性渐变应用】🐮css绘制彩带的原理
![](https://img-blog.csdnimg.cn/img_convert/bf0ef0ffab2efe86bb56034aff3c32d2.webp?x-oss-process=image/format,png)
19.【隐藏文本】🐯隐藏文字内容的两种办法
![](https://img-blog.csdnimg.cn/img_convert/83259ba976e5fb3caeba1e863e2b3061.webp?x-oss-process=image/format,png)
20.【居中】🐰实现居中的一种简单方式
![](https://img-blog.csdnimg.cn/img_convert/9fab9fb611cbb8d0e46b286f337d7a6c.webp?x-oss-process=image/format,png)
21.【角向渐变】🐲新的渐变:角向渐变。可以用来实现饼图
![](https://img-blog.csdnimg.cn/img_convert/c13768f97a0d677607b7d7fa410bbd62.webp?x-oss-process=image/format,png)
22.【背景位置百分比】🐍background-position百分比的正确理解方式:图片自身的百分比位置与容器同样的百分比位置重合
![](https://img-blog.csdnimg.cn/img_convert/9ace8bf49712c8d4ed68c16251e683ea.webp?x-oss-process=image/format,png)
23.【背景重复新值】🐴background-repeat新属性值:round和space。前者表示凑个整,后者表示留点缝
![](https://img-blog.csdnimg.cn/img_convert/1ef47c8e94bd0ef3d18f3409b0d2851d.webp?x-oss-process=image/format,png)
24.【背景附着】🐐background-attachment指定背景如何附着在容器上,注意其属性值local和fixed的使用
![](https://img-blog.csdnimg.cn/img_convert/a0cdf246ae9113c61d9157e243597a5b.webp?x-oss-process=image/format,png)
25.【动画延时】🐵动画添加延迟时间可以使步调不一致
![](https://img-blog.csdnimg.cn/img_convert/cbd825fec899cbab766c882ca0f40235.webp?x-oss-process=image/format,png)
26.【outline使用】🐔可以使用outline来描边,不占地方,它甚至可以在里面
![](https://img-blog.csdnimg.cn/img_convert/38cf0ae7c1d981e296b3be2646992db0.webp?x-oss-process=image/format,png)
27【背景定位】🐶当固定背景不随元素滚动时,背景定位是相对于视口的
![](https://img-blog.csdnimg.cn/img_convert/14ee78d280980bc1c2a584c4369745e3.webp?x-oss-process=image/format,png)
28【tab-size】🐷浏览器默认显示tab为8个空格,tab-size可以指定空格长度
![](https://img-blog.csdnimg.cn/img_convert/73ccb3148b8e86baf30c5775c7bd6c41.webp?x-oss-process=image/format,png)
29【动画暂停】🥝CSS动画其实是可以暂停的
![](https://img-blog.csdnimg.cn/img_convert/b37e77f023fef1dbac1a187921dcc4c1.webp?x-oss-process=image/format,png)
30【object-fit】🍓图片在指定尺寸后,可以设置object-fit为contain或cover保持比例
![](https://img-blog.csdnimg.cn/img_convert/4c6c3cd275fe5d4a197b25fa1eab69ce.webp?x-oss-process=image/format,png)
31【鼠标状态】🍒按钮禁用时,不要忘了设置鼠标状态
![](https://img-blog.csdnimg.cn/img_convert/b6d214dc2acedc725e94181f7af3bbfb.webp?x-oss-process=image/format,png)
32【背景虚化】🍑使用CSS滤镜实现背景虚化
![](https://img-blog.csdnimg.cn/img_convert/a65661ef5afa51d233519ac010c74920.webp?x-oss-process=image/format,png)
33【fill-available】🍏设置宽度为fill-available,可以使inline-block像block那样填充整个空间
![](https://img-blog.csdnimg.cn/img_convert/8328c3ea11984527d55bcb596e35c78f.webp?x-oss-process=image/format,png)
34【fit-content】🍎设置宽度为fit-content,可以使block像inline-block那样实现收缩宽度包裹内容的效果
![](https://img-blog.csdnimg.cn/img_convert/3b6aaa015ca59ad6425c43374d1ab8cf.webp?x-oss-process=image/format,png)
35【自定义属性】🍋CSS自定义属性的简单使用
![](https://img-blog.csdnimg.cn/img_convert/b14243d73896c953dc95e4c50569d149.webp?x-oss-process=image/format,png)
36【min-content/max-content】🍍可以设置宽度为min-content和max-content,前者让内容尽可能地收缩,后者让内容尽可能地展开
![](https://img-blog.csdnimg.cn/img_convert/3758676395a86bfdb3999e7cffc855b5.webp?x-oss-process=image/format,png)
37【进度条】🍊使用渐变,一个div实现进度条
![](https://img-blog.csdnimg.cn/img_convert/82695bb4d2b886fa4c7e40a1fc4d8a0e.webp?x-oss-process=image/format,png)
38【打印】🍉可以在打印网页时,设置page相关属性。比如page-break-before属性来表示是否需要另起新页
![](https://img-blog.csdnimg.cn/img_convert/13b9b8c94dc4baa8680cf949d307bf93.webp?x-oss-process=image/format,png)
39【逐帧动画】🍌利用CSS精灵实现逐帧动画
![](https://img-blog.csdnimg.cn/img_convert/219b059570927d30e2288262cfdac0b7.webp?x-oss-process=image/format,png)
40【resize】🍐普通元素也可以像textarea那样resize
![](https://img-blog.csdnimg.cn/img_convert/4715185ca4b9068776110b01dea09a99.webp?x-oss-process=image/format,png)
41【面包屑】🍇使用before伪元素实现面包屑
![](https://img-blog.csdnimg.cn/img_convert/e050de5e9c8ae61171e47d40cf49ffa9.webp?x-oss-process=image/format,png)
42【sticky footer】🍈使用grid布局实现sticky footer
![](https://img-blog.csdnimg.cn/img_convert/da79f7982eea4176034adf936c478b71.webp?x-oss-process=image/format,png)
43【动画填充状态】🍅CSS可以设置动画开始前和结束时所保持的状态
![](https://img-blog.csdnimg.cn/img_convert/f3b25387ef49d7796078f0abbc8cf703.webp?x-oss-process=image/format,png)
44【动画负延迟】🥑CSS动画可以设置延迟时间为负数,表示动画仿佛开始前就已经运行过了那么长时间
![](https://img-blog.csdnimg.cn/img_convert/df6580e6f0e1d8f73976789e30eaafe7.webp?x-oss-process=image/format,png)
45【过渡】🍆爱的魔力转圈圈
![](https://img-blog.csdnimg.cn/img_convert/1ea3cad03752538f919f7d5dd33379b7.webp?x-oss-process=image/format,png)
46【动画案例】🍬水波效果原理
![](https://img-blog.csdnimg.cn/img_convert/12e4e59e6232dbd47e340acfeb08a033.webp?x-oss-process=image/format,png)
47【动画案例】🌸CSS弹球动画效果的原理
![](https://img-blog.csdnimg.cn/img_convert/20a598dcfe999d896058595ab8494a54.webp?x-oss-process=image/format,png)
48【outline】🌻outline属性的妙用
![](https://img-blog.csdnimg.cn/img_convert/9e32ad319bdcedef219f410c119ecb3c.webp?x-oss-process=image/format,png)
49【grid】💕火狐浏览器grid布局检测器
![](https://img-blog.csdnimg.cn/img_convert/e5ee4dab62b6fd4aaf7f692304ed37b8.webp?x-oss-process=image/format,png)
希望有所帮助。
也欢迎阅读本人的《JS正则迷你书》。
本文完。