页眉和页脚通过统一背景、文字颜色及布局样式实现视觉一致性，使用flex布局、固定高度和CSS变量提升可维护性与复用性。
在CSS初级项目中，实现页眉和页脚的统一样式是构建网页结构的基础部分。统一的样式有助于提升整体视觉一致性，增强用户体验。
页眉（Header）样式设置
页眉通常包含网站标题、导航菜单或Logo。为了确保在多个页面中保持一致：
- 使用固定高度，如 height: 60px;，便于控制布局
- 设置背景颜色和文字颜色，例如：background: #333; color: white;
- 通过 display: flex; 实现内部元素（如Logo和导航）的水平排列与垂直居中
- 添加内边距（padding）来优化内容间距
- 使用 position: fixed; 可让页眉始终显示在页面顶部（可选）
页脚（Footer）样式设置
页脚常用于放置版权信息、联系方式或友情链接，其样式也应与页眉协调：
- 设置与页眉相似的背景色，保持视觉连贯，如 background: #333; color: #ccc;
- 使用相同字体和文字大小，比如 font-family: Arial, sans-serif; font-size: 14px;
- 通过 text-align: center; 或 Flex 布局居中内容
- 为避免内容重叠，给页脚添加足够的上边距（margin-top）或使用 position: absolute; / position: fixed;
- 设置固定高度，如 height: 50px;，便于与其他页面对齐
全局样式复用技巧
为了减少重复代码，提高维护效率，可以定义通用类或使用CSS变量：
立即学习“前端免费学习笔记（深入）”；
- 创建公共类如 .header-footer，包含共享样式（背景、文字颜色等）
- 利用CSS自定义属性（变量）管理颜色和尺寸，例如： :root { –primary-bg: #333; –text-color: white; }，然后在页眉页脚中引用
- 将这些样式写入单独的CSS文件（如 layout.css），在每个页面中引入
基本上就这些。通过合理组织CSS规则，页眉和页脚不仅样式统一，还能适应不同页面结构，为后续开发打下良好基础。
以上就是css go flex布局 排列 垂直居中 css 变量提升 内边距 display position margin padding background flex