从零开始写 CSS

CSS 看起来简单，但真正写起来才发现里面有无穷的细节。很多人学了 HTML 和 JavaScript 之后，对 CSS 始终停留在"大概知道怎么回事"的阶段。本文试图用比较系统的方式梳理 CSS 的核心概念，帮助你建立扎实的基础。

选择器与优先级

选择器是 CSS 的基础。除了常见的元素选择器、类选择器和 ID 选择器，你还应该了解：

• 后代选择器 (div p)：选中某元素内部的所有指定后代
• 子选择器 (div > p)：只选中直接子元素
• 相邻兄弟选择器 (h2 + p)：选中紧接在另一元素后的元素
• 属性选择器 ([type="text"])：根据 HTML 属性匹配元素
• 伪类 (:hover, :nth-child())：根据元素状态或位置匹配

当多个规则同时作用于一个元素时，浏览器通过优先级来决定哪个生效。简单来说：内联样式 > ID 选择器 > 类/属性/伪类 > 元素选择器。同等优先级下，后写的规则覆盖先写的规则。

盒模型

每个 HTML 元素在页面上都占据一个矩形区域，这就是盒模型。理解盒模型是布局的前提。

一个盒子由四部分组成：内容区（content）、内边距（padding）、边框（border）和外边距（margin）。

.box {
  width: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  margin: 10px;
}

默认情况下，width 和 height 只包括内容区。如果你希望它们包含 padding 和 border，需要设置 box-sizing: border-box。这是几乎所有现代 CSS 框架的默认设置，也建议你在自己的项目中采用。

布局系统

CSS 提供了多种布局方式，每种适合不同的场景：

Flexbox

Flexbox 适合一维布局——即单行或单列的排列。它的核心概念是容器（flex container）和项目（flex item）。通过设置容器的 display: flex，其直接子元素就成为 flex item。

常用的 flex 属性包括：

• justify-content：控制主轴方向上的对齐方式
• align-items：控制交叉轴方向上的对齐方式
• flex-grow / flex-shrink：控制项目的伸缩行为
• gap：控制项目之间的间距

Grid

Grid 适合二维布局——即同时控制行和列。通过 display: grid 和 grid-template-columns / grid-template-rows，你可以精确地定义页面的网格结构。

Grid 的强大之处在于它可以创建复杂的布局，而无需嵌套多层容器。配合 grid-area 和命名区域，甚至可以用一种近乎可视化的方式来描述布局。

响应式设计

现代网页需要在各种尺寸的屏幕上正常显示。媒体查询（Media Queries）是实现响应式设计的核心工具：

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }
}

除了媒体查询，现代 CSS 还提供了许多 intrinsic sizing 的单位，如 min(), max(), clamp()，它们让响应式布局的代码变得更加简洁。

持续学习

CSS 是一个不断发展的领域。容器查询（Container Queries）、级联层（Cascade Layers）、:has() 伪类——这些新特性正在改变我们编写样式的方式。

掌握基础之后，保持对新技术的好奇心，在合适的项目中尝试新特性，是持续提升 CSS 能力的最佳途径。