CSS制作理论

CSS制作的核心理论

CSS（层叠样式表）的核心在于通过选择器定位HTML元素，并为其定义样式规则。关键在于理解选择器优先级、盒模型、布局系统以及响应式设计原则。

选择器优先级遵循特定性规则：内联样式 > ID选择器 > 类/伪类选择器 > 元素选择器。当冲突发生时，浏览器会根据这个层级决定最终应用的样式。

盒模型与布局

每个HTML元素都被视为一个矩形盒子，包含内容区、内边距（padding）、边框（border）和外边距（margin）。标准盒模型可通过box-sizing: border-box调整，使得元素宽度包含padding和border。

现代布局主要依赖Flexbox和Grid系统：

• Flexbox适合一维布局，通过display: flex启用，配合justify-content和align-items控制对齐
• Grid适合二维布局，使用display: grid定义行列模板，例如：

  .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
  }

响应式设计方法

通过媒体查询（@media）实现不同屏幕尺寸的适配，常见断点包括：

@media (max-width: 768px) {
  /* 移动端样式 */
}

结合相对单位（vw、vh、%）和弹性布局，确保元素能自适应视口变化。REM单位基于根字体大小，适合实现等比缩放。

性能优化要点

• 减少选择器复杂度，避免深层嵌套
• 使用CSS变量（--main-color）提高可维护性
• 对动画属性使用transform和opacity以触发GPU加速
• 采用BEM等命名规范保持代码结构化

现代CSS特性

CSS自定义属性支持动态主题切换：

:root {
  --primary: #06c;
}
button {
  background: var(--primary);
}

CSS Grid的Masonry布局、:is()和:where()等新选择器，以及容器查询（@container）进一步增强了布局能力。