CSS 速查表!盒子模型组合器定位显示

2025-05-25

CSS 备忘单!

盒子模型

组合器

定位

展示

我们都知道彼得·格里芬在《恶搞之家》里放的那个动图,他无法控制一些百叶窗。这张动图总是让人联想到 CSS 带来的挫败感。有些东西变了,然后有些东西就崩溃了。为什么人们会遇到这些问题?如何提高你的 CSS 技能?为了编写简洁、可维护的样式,你需要理解哪些关键概念?

本周在Ladybug Podcast上,我们讨论了 CSS 的细微差别 —— 它是什么、它如何工作以及如何更好地使用它。

并且,我们为大家制作了一些备忘单来记住所有内容!

向 Emma 致谢,感谢她制作了这些!

[已删除用户] 图片

[已删除用户]

盒子模型

内容位于中心。<br> 周围是填充。<br> 然后是边框。<br> 最后是边距!

组合器

后代选择器:您可以使用空格来表示后代选择器。它会匹配指定元素的所有后代元素。<br> 子选择器:使用大于号 (>) 来选择指定元素的所有直属子元素。<br> 相邻兄弟选择器:使用加号 (+) 来选择指定元素的所有相邻兄弟元素。它们必须具有相同的父元素,并且紧跟在该元素之后。<br> 常规兄弟选择器:使用波浪号 (~) 来选择元素的所有兄弟元素。

定位

静态:HTML 元素的默认定位。<br> 固定:元素相对于视口定位,即使页面滚动也保持在原位。它也会从文档流中移除。因此,DOM 中的元素会假装它不存在!<br> 相对:元素相对于其正常位置定位。<br> 绝对:元素相对于最近的相对定位祖先元素定位。如果未找到位置为相对的祖先元素,则元素将根据文档主体进行定位。

展示

块元素:从新行开始,并占据整个宽度。<br> 示例:h1 - h6 和 p 元素<br> 内联元素:与其他元素内联显示。任何高度和宽度属性,以及 margin-top 和 margin-bottom 均无效。<br> 示例:a 和 span 元素<br> 内联块元素:该元素是内联元素,但可以使用宽度、高度以及上下边距进行格式化。<br> 示例:具有宽度/高度属性的标签

无论您在哪里收听播客,都可以收听完整剧集!

另外,请查看我们的第二个 CSS 剧集,我们在其中更深入地讨论了布局、动画和最佳实践!

我们还有该集的更多备忘单!

文章来源:https://dev.to/ladybug/css-cheat-sheets-3ee0
PREV
编程面试的五个技巧
NEXT
成为高级开发人员的 5 件事:初级到高级开发人员:程序员的职业发展自主性主动性沟通解决问题的指导