FreeCodeCamp CSS 学习总结

以下是freeCodeCamp CSS学习总结，快速熟悉下基础概念。工具文档参考 MDN。

Pseudo-elements 伪元素

::before

创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。此元素默认是行级的。

1
2
3

a::before {
  content: '🔗';
}

::after

创建一个伪元素，作为所选元素的最后一个子元素。它通常用于为具有 content 属性的元素添加修饰内容。默认情况下，它是行向布局的

1
2
3

a::after {
  content: ' (' attr(href) ')';
}

定位（position）

CSS可以通过 position 属性设置元素在浏览器中的定位方式，有 static、absolute、relative、sticky 和 fixed 等值。

设置 position 属性后，可以通过 top、right、bottom、left 中一个或多个设置 px 或百分比值来移动元素。

static 是所有元素的默认定位。如果将其分配给某个元素，则无法使用 top、right、bottom、left 来移动元素。

relative: 元素在正常位置上定位，但可以通过 top、right、bottom、left 来移动。
absolute: 元素脱离正常文档流，其位置由 top、right、bottom、left 来决定，且元素不会影响其他元素。
fixed: 将元素固定到页面，无论用户滚动到页面上哪个位置。
sticky: 它是 relative 和 fixed 的混合体，它允许元素根据滚动位置粘贴到其包含元素或 viewport（视窗）的特定位置。

垂直和水平居中

通过定位实现

position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;

层级 z-index

z-index 是一个可用于定义重叠 HTML 元素顺序的属性，较高值得元素将始终位于较低值元素之上。

响应式设计（适配）

@media，也称为媒体查询，用于有条件的应用 CSS。通常用于使用 max-width 和 min-width 属性根据 viewport 宽度应用 CSS。

以下示例：当屏幕宽度小于 960px 时，里面的 CSS 生效。

@media (max-width: 960px) {
  .card {
    padding: 2rem;
  }
}

使用逻辑运算符，可用于构造更复杂的媒体查询。比如 and 逻辑运算符用于查询两个媒体条件。

以下示例：当屏幕宽度在 500px 到 1000px 之间时，里面的 CSS 生效。

1
2
3

@media (min-width: 500px) and (max-width: 1000px){

}

CSS 变量

CSS 变量定义使用 -- 开头，给定 name 和 value 类似这样：--variable-name: value;

要使用变量，使用 var(--variable-name, fallback-value) 函数。这里可以指定 fallback 值，当变量名不存在时，则使用 fallback 值（也可以不指定）。

.bb1 {
  width: 10%;
  height: 70%;
  display: flex;
  flex-direction: column;
  align-items: center;
  --building-color1: #999;
}

.bb1a {
  width: 70%;
  height: 10%;
  background-color: var(--building-color1, green);
}

变量通常在 :root 选择器中声明，这是 CSS 中最高级别的选择器，将变量放在那里任何地方都可以使用。

1
2
3

:root {
  --building-color1: #999;
}

CSS 注释

1	/* Comment here */

网格布局 Grid Layout

CSS 网格布局提供了基于网格的二维布局，允许您将项目水平和垂直居中，同时仍然保留对重叠元素等操作的控制。

main {
  display: grid;
  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(
            2rem,
            1fr
          );
  row-gap: 3rem;
}

.heading {
  grid-column: 2 / 3;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 1.5rem;
}

grid-template-columns：该属性是基于网格列的维度，去定义网格线的名称和网格轨道的尺寸大小。上面定义了3列，并指定每一列的宽度。

row-gap：行间距，也就是垂直空间。

grid-column：用于指定一个网格项（grid item）应该位于网格容器（grid container）的哪几列。

/* 这个属性值表示网格项位于第一列。如果网格容器有三列，那么这个网格项将从第一列的起始线开始，一直延伸到第一列的结束线。 */
grid-column: 1;

/* 这个属性值表示网格项起始于第一列，并跨越到第三列结束。换句话说，它将占据从第一列到第三列的整个空间，总共跨越了三列。 */
grid-column: 1 / 3;

/* 这个属性值表示网格项起始于第二列，并一直延伸到网格容器的最后一列。-1 是一个特殊值，它代表网格容器的最后一条垂直线（即最后一列的结束线）。如果网格容器有五列，那么这个网格项将跨越从第二列到第五列的结束线。 */
grid-column: 2 / -1;

/* 这个属性值表示网格项起始于第一列，并跨越两个单元格的宽度。span 关键字后面跟着的数字表示要跨越的列数。在这个例子中，网格项将从第一列的起始线开始，跨越两个单元格的宽度，这意味着它将占据第一列和第二列的整个空间。 */
grid-column: 1 / span 2;

repeat(): repeat(2, 1fr) 表示创建两列，每列的宽度都是 1fr（fractional unit），即网格容器可用空间的一份。fr 单位允许列具有灵活性，可以根据网格容器的大小动态调整宽度。这里使用 repeat 函数是为了简化语法，表示重复创建相同大小的列。

minmax: 定义一个长宽范围的闭区间, 左边最小值，右边最大值；

min-content: CSS 的尺寸关键字，表示的是内容的最小宽度。对于文本内容而言，这意味着内容会利用所有软换行的机会，变得尽可能的小，大小不会超过最长单词的宽度。

fr是在 CSS Grid 网格布局中，引入了一种新的长度单位 fr(fraction)。它表示 Grid 布局中中剩余空间(leftover space)的一部分(fraction)。
一般来说 1fr 的意思是“100%的剩余空间”, .25fr 意味着“25%的剩余空间”。当时当 fr 大于 1 的时候，则会重新计算比例来分配。

CSS 动画

transform-origin 属性用于设置应用 CSS 变换的点。例如，当执行旋转时，变换点确定元素围绕哪个点旋转。

1 2	/* 将其设置元素的中心点 */ transform-origin: 50% 50%;

@keyframes 规则用于定义 CSS 动画的流程，在@keyframes规则中，可以为动画序列中的特定点（例如 0% 或 25%）创建选择器，或者使用 from 和 to 来定义序列的开始和结束。

keyframes 需要为其分配一个名称，在使用的时候引用该名称即可，例如：

@keyframes wheel {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
}

.wheel {
  border: 2px solid black;
  border-radius: 50%;
  margin-left: 50px;
  position: absolute;
  height: 55vw;
  width: 55vw;
  max-width: 500px;
  max-height: 500px;
  /* 简写： animation: wheel 10s linear infinite; */
  animation-name: wheel;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}