colla2me / css-gif

一个动图，一个CSS知识点

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

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

• 027待续

• 026.【outline使用】🐔可以使用outline来描边，不占地方，它甚至可以在里面

---

• 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.【table布局】💞display:table实现多列等高布局

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

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

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

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

• 009.【层叠上下文】💚层叠上下文：小辈就是小辈，再厉害也只是个小辈。

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

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

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

• 005.【flex不为认知的特性之一】💕flex布局下margin:auto的神奇用法

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

• 003.【BFC应用】💓BFC应用之阻止外边距合并（margin collapsing）。

• 002.【形状外在表现】❤不要自以为是了。你以为自己是方的，在别人眼里你却是圆的。

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