你未必知道的CSS知识点

你未必知道的CSS知识点

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

   

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

   

3. BFC应用】BFC应用之阻止外边距合并（margin collapsing）

   

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

   

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

   

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

   

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

   

8. 【定宽高比】css实现定宽高比的原理：padding的百分比是相对于其包含块的宽度，而不是高度

   

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

   

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

    

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

    

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

    

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

    

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

    

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

    

16. 【鼠标状态】按钮禁用时，不要忘了设置鼠标状态

    

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

    

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

    

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

    

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

    

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

    

22. 【进度条】使用渐变，一个div实现进度条

    

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

    

24. 【过渡】爱的魔力转圈圈

    

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