Skip to content
/ css-gif Public
forked from qdlaoyao/css-gif

一个动图,一个CSS知识点

Notifications You must be signed in to change notification settings

KieSun/css-gif

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

本项目通过动图来展示 CSS 相关知识点。

相信时间的力量,每天学一点,一年后会有很大的进步。

  • 026待续

  • 025.🐵动画添加延迟时间可以使步调不一致


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

  • 023.🐴background-repeat新属性值:round和space。前者表示凑个整,后者表示留点缝。

  • 022.🐍background-position百分比的正确理解方式:图片自身的百分比位置与容器同样的百分比位置重合

  • 021.🐲新的渐变:角向渐变。可以用来实现饼图

  • 020.🐰实现居中的一种简单方式

  • 019.🐯隐藏文字内容的两种办法

  • 018.🐮css绘制彩带的原理

  • 017.🐹动画方向可以选择alternate,去回交替进行。

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

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

  • 014.💞display:table实现多列等高布局

  • 013.💝css绘制三角形的原理

  • 012.🖤要使模态框背景透明,用rgba是一种简单方式。

  • 011.💜相邻兄弟选择器之常用场景

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

  • 009.💚层叠上下文:小辈就是小辈,再厉害也只是个小辈。

  • 008.💙绝对定位和固定定位时,同时设置 left 和 right 等同于隐式地设置宽度。

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

  • 006.💖flex布局,当flex-grow之和小于1时,只能按比例分配部分剩余空间,而不是全部。

  • 005.💕flex布局下margin:auto的神奇用法

  • 004.💔BFC应用之消除浮动的影响

  • 003.💓BFC应用之阻止外边距合并(margin collapsing)。

  • 002.❤不要自以为是了。你以为自己是方的,在别人眼里你却是圆的。

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

About

一个动图,一个CSS知识点

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published