CSS术语每个开发人员都应该知道

> css可能会令人沮丧，尤其是当事情不像预期的那样。但是了解正确的术语可以产生巨大的变化。它可以帮助您编写清洁代码，更快地调试问题，并更有效地进行沟通，无论您是在寻求帮助，解释概念还是在线搜索解决方案。

>

本文涵盖了基本css概念，从基本原理到更高级的主题

1。css规则的解剖

> a css规则是一组指令，可以定义元素应如何样式。它由a选择器组成，然后是a 声明块包含在卷曲括号中。该块可以包含一个或多个声明。这是每个部分的分解：

选择器：指定样式适用于。

的元素态态在

.container { /* ".container" is a selector */   color: black; /* "color" is a property, and "black" a value */   display: grid; /* the combination of property + value is called declaration */}

2。组合者

组合剂允许您根据元素与dom中的其他元素的关系来定位元素。有四种类型的组合者：

>后代组合（[whitespace]）：选择任何深度的所有后代元素，包括孩子，孙子孙女及其他。

儿童组合

（>）：仅选择元素的直接子。
>一般同胞组合组合

（〜）（也称为随后的sibling comminator）：选择在指定元素之后出现的所有兄弟姐妹，不一定立即。

>相邻同胞

（ ）（也称为

立即学习“前端免费学习笔记（深入）”；

青泥AI

青泥学术AI写作辅助平台

302 查看详情 > sext-sibling comminator）：选择一个紧随其后的元素。>

/* descendant combinator - selects all 
 inside 
 */div p {  color: rebeccapurple;}/* child combinator - selects only direct 
 children of 
 */div > p {  font-weight: bold;}/* general sibling combinator - selects all 
 that come after 
 */h2 ~ p {  margin-inline-start: 1rem;}/* adjacent sibling combinator - selects the first 
 immediately after 
 */h2 + p {   margin-inline-start: 1rem;}

3。框型号框模型是浏览器将每个html元素作为矩形盒渲染的方式，由内容，填充，边框和边距组成。

content：默认元素根据其包含的内容（例如，文本或图像）。

填充：内容与元素边框之间的空间。

border ：围绕元素的空间，给出了定义的轮廓。

边缘
：边框和相邻元素之间的空间。它用于在元素之间创建分离。

4。逻辑属性

>逻辑属性基于文本方向（从左到右，右至左或从上到下）调整其行为，而不是固定的物理方向（顶部，右，底部，左）。这允许更加灵活，响应迅速的布局，特别是对于使用不同写作说明的语言。了解逻辑属性的两个关键字是 and

block

inline ：指根据语言编写单词的方向。对于英语，这意味着从左到右，但是对于像阿拉伯语这样的语言，它将是左右。

block ：您可以将块视为文本到达线末端后包裹的方向。在诸如英语之类的从左到右语言中，块方向是自上而下的，这就是为什么诸如<divphpcngpcngtphpcn之类的块级元素垂直堆叠的原因，一个属于另一个。

知道这一点，我们可以更好地了解逻辑属性，并使用以下示例：：

边距内线启动：在内联轴开始的方向上增加边距。对于英语（从左到右），这将等效于左翼。在左至左的语言中，它像阿拉伯语一样，在相反的一边（相当于边缘右翼）。>

>还有许多其他逻辑属性，例如填充，边界块和插图。了解有关mdn文档中逻辑属性的更多信息。 5。堆叠上下文

如果您曾经将z index应用于一个元素：99999，并且想知道为什么它不重叠其他元素，那么您可能遇到了堆叠的上下文。

>每当您将z索引分配给元素时，就会创建堆叠上下文。此上下文本质上限制了如何将其内部元素分层。这意味着，如果您具有z索引的