Administrator
发布于 2020-07-24 / 11338 阅读 / 0 评论 / 0 点赞

你未必知道的CSS知识点

你未必知道的CSS知识点

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img

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

    img


评论