前端样式篇：CSS 知识梳理与总结

“

本篇文章将对前端 CSS 知识体系进行一次简单的梳理，帮助大家快速了解与回顾 CSS 的相关概念。

基础概念

• 定义：Cascading Style Sheets 的缩写，为 HTML 文档增加外观样式与布局。
• 核心思想：内容（HTML）与表现（CSS）分离。但是随着前端组件化、原子化框架的兴起，这一思想逐渐被打破。
• 重要特性：
  1. 优先级：每一条样式规则都有一个权重，我们通过权重来控制优先级；
  2. 覆盖：相同权重下，后面的样式会覆盖前面的样式；
  3. 继承：部分属性会自动被子元素继承，比如：color、font-size等。

选择器

选择器决定了这条样式应用在 HTML 文档的哪个地方。

1. 基本选择器

• 元素：div、p
• 类：.main、.title
• ID：#root、#subtmit-btn
• 属性：[class~=error]、[type="text"]
• 通配符：*，对所有元素节点生效

2. 组合选择器

• 后代：div span、.header .title
• 直接子代：ul > li
• 兄弟：h2 ~ p，选择与 h2 同级且后方所有的 p
• 相邻：.card + .card，选择与.card同级且后方相邻的一个.card元素

3. 其他选择器

• 伪类：:hover、:first-child
• 伪元素：::before、::after、::first-letter

为了避免优先级混乱，通常都会优先使用类名选择器，后代选择器不要大于 3 层。

盒模型

1. HTML 的节点就像盒子一样，有content + padding + border + margin属性；
2. 默认宽度是指content的宽度，通过box-sizing：content-box决定；
3. 通常做法是设置box-sizing：border-box，此时的宽度包括content + padding + border；
4. overflow可以设置内容滚动、超出裁剪等行为。

布局

CSS 样式主要包括布局+视觉两个部分，布局决定了页面的结构、层次的总体框架。

1. 经典布局

• 默认：根据元素的block、inline、table等自身特性进行布局，即默认文档流。
• float：浮动布局，现在基本不用了。
• position：全局定位 fixed、相对定位 relative、绝对定位 absolute，可脱离默认文档流。
• transform：可以缩放、改变位置、形状，不会影响文档结构。

2. 现代布局

对其子元素进行布局，可以灵活定义它们的排列方式、尺寸大小、间距等各种样式。

• 弹性布局：通过display: flex进行一维布局。
• 网格布局：通过display: grid进行二维布局。

3. 布局方案

• 响应式布局：通过媒体查询@media (max-width: 768px)可以针对不同的屏幕尺寸实现不同的样式效果。
• 移动端布局：为了保证不同尺寸手机端的视觉一致性，通常会采用百分比、rem、vw等相对单位。

视觉样式

• 字体：font-family、font-size、line-height、font-weight
• 颜色：color、background-color
• 边框：border、border-radius、outline
• 阴影：box-shadow、text-shadow
• 透明度：opacity

动画

• 关键帧动画：@keyframes + animation 实现

@keyframes move {
  from { left: 0; }
  to { left: 100px; }
}
div { animation: move 2s infinite; }

• 过渡动画：transition实现

.box {
  transition: all 0.3s ease;
}
.box:hover {
  transform: scale(1.2);
}

变量与函数

1. CSS 变量

CSS 变量提高了 CSS 语法的灵活性，在主题切换场景十分常见。

:root {
  --primary-color: red;
}

.title {
  color: var(--primary-color);
}

2. 函数

CSS 也内置了一些函数，比如常用的：calc()、rgb()。

优先级

• 权重级别：

  1. 行内：1000，即(1, 0, 0, 0)
  2. ID：100，即(0, 1, 0, 0)
  3. 类/伪类/属性：10，即(0, 0, 1, 0)
  4. 元素/伪元素：1，即(0, 0, 0, 1)
  5. 继承/通配符：0
  6. !important最高权重

• 计算规则：同级比较、同级累加，权重越大优先级越高。比如：任意数量的类选择器也没有一个 ID 选择器权重大

工具链

它们虽然不是原生 CSS 必需品，但是现在前端开发基本都离不开它们。这些工具极大的提升了前端的编码体验，让 CSS 在应用中得以更好的发挥。

1. 预处理器

由于 CSS 本身的一些局限性，很多灵活的、高级的写法无法支持，于是就诞生了以Sass / Less / Stylus为代表的预处理器。

预处理器编译后输出的代码就是 CSS。

2. 后处理器

后处理器主要就是指PostCSS，它是对原生 CSS 进行加工处理（比如：补全浏览器兼容性样式、压缩代码等），为了输出更符合我们预期的 CSS 代码。

3. 其他工具

• CSS 模块化：BEM 命名法、CSS Modules
• CSS-in-JS：Styled Components、Emotion
• 原子化 CSS：Tailwind CSS、UnoCSS

感谢阅读

点个“关注”再走呗~

👇️👇️👇️