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

你在学习文章相关的知识吗？本文《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）：选择在指定元素之后出现的所有兄弟姐妹，不一定立即。

>相邻同胞

（ ）（也称为

> sext-sibling

comminator）：选择一个紧随其后的元素。
• >

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

  3。框型号
• 框模型是浏览器将每个html元素作为矩形盒渲染的方式，由内容，填充，边框和边距组成。
  content
：默认元素根据其包含的内容（例如，文本或图像）。

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

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

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

4。逻辑属性

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

了解逻辑属性的两个关键字是 and

block

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

block
• ：您可以将块视为文本到达线末端后包裹的方向。在诸如英语之类的从左到右语言中，块方向是自上而下的，这就是为什么诸如 知道这一点，我们可以更好地了解逻辑属性，并使用以下示例：：
  边距内线启动：在内联轴开始的方向上增加边距。对于英语（从左到右），这将等效于左翼。在左至左的语言中，它像阿拉伯语一样，在相反的一边（相当于边缘右翼）。
>

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

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

。

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