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）进一步增强了布局能力。
