【译】一张图搞定CSS选择器知识

【译】一张图搞定CSS选择器知识

原文:CSS selectors cheatsheet & details

作者:nana Jeon 译者:gylidian

📜 CSS selectors cheatsheet

这些天,我一直在折腾 CSS 选择器

拥有杂七杂八符号的 CSS 选择器太多了,比如 > . , * + ~ [] 等等,因此我经常被如何使用这些选择器搞得头大。

终于,我把它们在我脑海中理顺了,并按照我的理解来构建知识体系。

*事实上,为了节省纸张、保护地球,我原本是想把它们全部只放在一张 A4 大小的页面上,但因为有太多的选择器我想添加,所以我不得不做成多页。除了封面外,其余四页都是 A4 的。

把这张纸打印出来,贴在墙上,别刻意去记,只是用来没事儿偷瞄几眼而已。我希望这张 cheatsheet 能帮助你快速找到合适的 CSS 选择器并节省时间。

CSS selectors cheatsheet

又来盘点最大公约数的算法👩

又来盘点最大公约数的算法👩

你媽的,为什么又双叒叕开学了!假期,你不要停下来啊!

嘛,第一节课是 算法设计与分析课,郑某人带的学生由原来的俺们整个软工三个班换成原来俺们一个班和计嵌软嵌了。首先呢,郑某人自我介绍了一下:”我是普通老师郑玉!”,嗯,普通市民刘青云?还是 普通家庭马化腾?

开学第一节课就讲最大公约数(greatest common divisor,简写为gcd),老师要是不说我差点儿就忘了,俺就趁下课时间温习一下我遇到过的几个最大公约数的算法。

CSS实现下划线动画的各种姿势

CSS实现下划线动画的各种姿势

该文章还在施工中… 过几天再来看吧。

总结CSS水平垂直居中的各种骚操作

总结CSS水平垂直居中的各种骚操作

CSS 是世界上最难的语言! #(手动滑稽)
​ ———— 啊哈呵嗨

水平居中

NameTag
margin:0 auto;基础, 常用
利用 inline-block基础, 常用
width:fit-content;CSS3
width:fill-available;CSS3

垂直居中

NameTag
padding上下相等基础, 常用
line-height基础, 常用
CSS 表(table)布局 👍常用
“精灵元素”,利用伪类实现 👍奇技淫巧

水平垂直居中

NameTag
“完全居中法” 👍基础, 常用
margin 负值法基础, 常用
translate 负值50%变换CSS3, 常用
CSS3 flex(弹性)布局 👍CSS3, 常用
vw vh和translate 👍CSS3
通过JavaScript代码实现居中JavaScript
通过隐藏节点+float
利用CSS3 grid(网格)布局CSS3
object-fit和object-postion居中奇技淫巧

Blog tasks

1 / 4 tasks

  • About 页面大修

    • Mark done
    • Edit
    • Delete
  • TOC 滚动更新位置
  • 设计 Logo SVG

    • Mark done
    • Edit
    • Delete
  • todo 小组件大小单位用 rem

    • Mark done
    • Edit
    • Delete
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×