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

（ ）（也称为

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

无限画

千库网旗下AI绘画创作平台

下载

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
：围绕元素的空间，给出了定义的轮廓。

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

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

block

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

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

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

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

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

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

>每当您将z索引分配给元素时，就会创建堆叠上下文。此上下文本质上限制了如何将其内部元素分层。这意味着，如果您具有z索引的<nav>：3和带有z索引的<div>：2 cn，不管他们自己的z索引有多高。 <div>的堆叠上下文限制了其中的元素，这意味着它们只能在该范围内分层，该范围的z索引为2。 6。层（@layer规则）

层使您可以以一种使您对特异性和级联的控制方式组织css规则。这在风格冲突和意外覆盖可能成为问题的大型项目中特别有用。

base

组件和 utisition。

> base
• 层中，您可以包含适用于整个项目的重置和基本样式。
  >
组件

• 层，您定义了项目中组件的核心样式（例如，按钮，卡片，卡片，导航）。 >>在

  >实用程序
层中，您可以创建应用小型可重复使用的样式规则的实用程序类（例如，设置显示的隐藏类：无）。

>通过将图层订购为

，
• 组件
>和

>，您确保重置不会意外地覆盖组件中的样式，并且该公用事业类优先于核心组件样式。

该组织提供更好的可预测性和控制权，尤其是随着您项目的增长。

@layer base, components, utilities;

@layer base { 
  *, *::before, *::after { ... }
}

@layer components {
  .button { ... }
}

@layer utilities {
  .hidden { ... }
}

了解有关@layer规则的更多信息 结论

掌握关键css概念，例如《规则解剖》，组合器，框模型，逻辑属性，堆叠式上下文和层，对于构建有效，可维护的web布局至关重要。这些原则使您可以更好地控制样式，定位和元素互动，从而更容易应对设计挑战。