基础知识

层叠（Cascading）、优先级

样式表来源

在CSS中，样式表可以按照来源被划分为三种类型：用户代理样式、用户样式表和作者样式表。

1. 用户代理样式（User Agent Styles）：用户代理（User Agent，通常指浏览器）为HTML元素提供了一组默认的样式。这些样式在没有任何外部样式表的情况下应用于网页，以确保即使在没有CSS的情况下，网页内容依然具有基本的可读性和可访问性。用户代理样式因浏览器而异，通常包括基本的字体、颜色、边距等设置。
2. 用户样式表（User Stylesheets）：用户样式表是由用户自定义的样式表，可以用于覆盖用户代理样式和作者样式表中的某些样式。用户可以根据自己的偏好设置用户样式表，例如调整字体大小、颜色等。用户样式表主要用于改善网页的可访问性和可用性，满足个别用户的特殊需求。在现代浏览器中，用户可以通过安装扩展或修改浏览器设置来应用自定义的用户样式表。
3. 作者样式表（Author Stylesheets）：作者样式表是由网页开发者创建的样式表，用于定义网页的布局、外观和交互。作者样式表通常是网页设计的主要组成部分，它可以覆盖用户代理样式和用户样式表中的样式。作者样式表可以包含内联样式、嵌入式样式和外部样式表，以及通过@import引入的其他样式表。

选择器

• 元素选择器：根据HTML元素类型选择元素。

• 类选择器：根据元素的类属性选择元素。

• ID选择器：根据元素的ID属性选择特定元素。

• 属性选择器：根据元素的属性和属性值选择元素。例如，[data-attribute]选择具有data-attribute属性的所有元素，[data-attribute="value"]选择具有data-attribute属性且其值为value的所有元素。

• 伪类选择器：根据元素的状态或文档结构选择元素。例如，:hover选择鼠标悬停在其上的元素，:first-child选择作为其父元素的第一个子元素的元素。

• 伪元素选择器：选择元素的某个部分，例如内容的前后。例如，::before选择元素内容之前的一个虚拟元素，::after选择元素内容之后的一个虚拟元素。

• 组合选择器：通过组合多个选择器来选择符合所有条件的元素。

  • 后代选择器（空格）：例如，div p选择所有作为<div>元素后代的<p>元素。
  • 子元素选择器（>）：例如，div > p选择所有作为<div>元素直接子元素的<p>元素。
  • 相邻兄弟选择器（+）：例如，div + p选择紧跟在<div>元素后面的<p>元素。
  • 一般兄弟选择器（~）：例如，div ~ p选择在<div>元素后面的所有<p>兄弟元素。

• 多个选择器：使用逗号分隔的多个选择器可以同时选择符合任一选择器条件的元素。例如，div, p选择所有的<div>和<p>元素。

在CSS中，选择器的优先级（也称为特指性，Specificity）决定了当多个规则应用于同一元素时，哪个规则将最终生效。特指性是根据选择器的组成部分计算出来的。例如：

• 内联样式的权重为 1000
• ID选择器的权重为 100
• 类选择器、属性选择器和伪类的权重为 10
• 元素选择器和伪元素的权重为 1

当多个选择器应用于同一元素时，具有较高特指性的选择器将覆盖较低特指性的选择器。如果两个选择器具有相同的特指性，那么它们将按照在CSS代码中出现的顺序进行解析，最后出现的选择器将覆盖之前的选择器。

需要注意的是，!important声明可以改变规则的优先级。在同一特指性级别下，带有!important声明的规则将优先于没有!important声明的规则。然而，如果有多个!important声明冲突，那么仍然需要参考特指性和源代码顺序来确定哪个规则生效。

源码位置

建议：

• 选择器尽量少用id
• 尽量不要用！important
• 自己的样式加载在引用库样式的后面

继承

CSS 中的继承是一种机制，通过它，子元素可以从其父元素接收样式属性值。这使得我们可以在一个地方设置通用样式，然后让其他元素自动继承这些样式，从而减少代码的重复和提高可维护性。

盒模型

浏览器根据视觉格式化模型将所有元素表示为盒子模型，css通过盒模型做布局

视觉格式化模型：视觉格式化模型 - CSS：层叠样式表 | MDN (mozilla.org)

由盒模型的特性能实现的一些展现形式

实现三角形

/* 创建一个空的 div 元素，将其作为三角形 */
<div class="triangle"></div>
​
/* 添加样式 */
<style>
  .triangle {
    width: 0;
    height: 0;
​
    /* 使用 border 来制作三角形 */
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
​
    /* 三角形的高度*/
    border-bottom: 50px solid red;
​ 
  }
</style>

实现固定比例矩形

<div class="rectangle"></div>
<style>
.rectangle {
  background-color: lightblue;
  /* 设置矩形的宽度为父元素宽度的100% */
  width: 100%;
  height: 0;
  padding: 0; 
  padding-bottom: 75%;
  
  /* 另一种方法：使用 aspect-ratio 属性设置矩形的宽高比为 4:3 */  
  aspect-ratio: 4 / 3;
}
​
</style>

实现水平居中

实现渐变边框

盒模型——负外边距

padding、border、margin中，只有margin可以设置负值

注：负外边距可能会导致布局上的问题，例如元素重叠、脱离正常文档流等。

布局

常规流布局

常规流（Normal Flow）布局，也被称为文档流（Document Flow）布局，是浏览器默认的 CSS 布局方式。在常规流布局中，元素按照它们在 HTML 代码中的顺序自上而下、自左向右地排列。常规流布局主要包括两类元素：块级元素（block-level elements）和行内元素（inline elements）。

1. 块级元素：

   • 块级元素会独占一行，即它们会从上到下排列。
   • 块级元素默认的宽度为其父容器的宽度，高度取决于其内容。
   • 常见的块级元素有：<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>等。

2. 行内元素：

   • 行内元素会在同一行内从左到右排列，直到容器宽度不足时才会换行。
   • 行内元素的宽度和高度取决于其内容，而不是父容器的尺寸。
   • 常见的行内元素有：<span>、<a>、<strong>、<em>、<img>等。

在常规流布局中，元素遵循一定的规则进行排列，这些规则取决于元素的 display 属性。display 属性有几个常用值，例如：block（块级元素）、inline（行内元素）和 inline-block（既具有块级元素的特点，又具有行内元素的特点）。

格式化上下文（Formatting Context）是 CSS 盒子模型的一部分，它定义了一组规则来描述如何对元素进行布局。

块级格式化上下文(block formatting context， BFC)

• BFC 是块级元素的布局环境，这些元素按照垂直方向一个接一个地排列。
• 在 BFC 中，每个元素的左外边距与上一个元素的右外边距相邻，但不会重叠。
• BFC 中的元素不会受到外部浮动元素的影响，可以用来清除浮动。
• BFC 是一个独立的容器，内部元素的布局不会影响到外部元素，反之亦然。

BFC 可以通过以下方式触发：

• display 属性值为 block、inline-block、table、table-cell、table-caption 等；
• position 属性值为 absolute 或 fixed；
• float 属性值不为 none；
• overflow 属性值不为 visible。

内联级格式上下文（Inline Formatting Context，IFC）

• IFC 是行内元素的布局环境，这些元素按照水平方向一个接一个地排列。
• 在 IFC 中，行内元素会根据它们在文档流中的顺序排列，并根据字体的基线对齐。
• IFC 会自动调整行高以适应最高的行内元素，因此，IFC 中的行高可能不同。
• IFC 中的元素与块级元素不同，不会独占一行，而是尽可能地填充水平空间，直到容器宽度不足时才会换行。

IFC 可以通过以下方式触发：

• display 属性值为 inline、inline-block、inline-table 等

外边距塌陷