打造极致网页体验：HTML与CSS高级实战秘籍

CSS Grid布局高级技巧

1. 隐式与显式轨道

显式轨道是你明确定义的轨道，而隐式轨道是在显式轨道之外自动创建的轨道。

.container {
  display: grid;
  grid-template-columns: 100px 100px; /* 显式轨道 */
  grid-auto-columns: 50px; /* 隐式轨道的宽度 */
  grid-template-rows: 100px 100px; /* 显式轨道 */
  grid-auto-rows: 50px; /* 隐式轨道的高度 */
}

2. 自动填充与重复

使用 repeat() 函数可以方便地创建多个相同的轨道。auto-fill 和 auto-fit 关键字可以帮助自动填充剩余空间。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* 自动填充 */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自动适应 */
}

3. 命名区域

使用命名区域可以让布局更加直观和易于管理。

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "main sidebar"
    "footer footer";
  grid-template-columns: 1fr 200px;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

CSS Flexbox高级技巧

1. 多行布局

使用 flex-wrap: wrap 可以让项目在多行中排列。

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 行和列之间的间距 */
}

2. 对齐方式

align-items 和 justify-content 控制主轴和交叉轴上的对齐方式，align-self 可以单独控制某个项目的对齐方式。

.container {
  display: flex;
  align-items: center; /* 交叉轴对齐方式 */
  justify-content: space-between; /* 主轴对齐方式 */
}

.item {
  align-self: flex-start; /* 单个项目的对齐方式 */
}

3. 基线对齐

使用 align-items: baseline 可以让项目按照基线对齐，适用于文本内容。

.container {
  display: flex;
  align-items: baseline;
}

CSS变量（自定义属性）

1. 动态变化

结合JavaScript，可以根据用户交互动态更改CSS变量。

<button onclick="document.documentElement.style.setProperty('--color', 'blue')">Change Color</button>

:root {
  --color: red;
}

.text {
  color: var(--color);
}

2. 继承与覆盖

CSS变量可以继承和覆盖，使得样式管理更加灵活。

.parent {
  --color: red;
}

.child {
  --color: blue;
}

.text {
  color: var(--color);
}

高级媒体查询

1. 多条件查询

使用 and、or 和 not 关键字组合多个条件。

@media (min-width: 600px) and (max-width: 1200px) {
  /* 样式 */
}

@media (min-width: 600px), (max-height: 800px) {
  /* 样式 */
}

@media not all and (min-width: 600px) {
  /* 样式 */
}

2. 特性查询

根据设备特性（如分辨率、色彩能力等）调整样式。

@media (resolution: 300dpi) {
  /* 高分辨率样式 */
}

@media (color-gamut: p3) {
  /* 广色域样式 */
}

高性能与最佳实践

1. CSS代码分割

使用模块化CSS（如CSS Modules）或动态导入来按需加载CSS文件。

import styles from './styles.module.css';

const element = document.createElement('div');
element.className = styles.button;

2. 懒加载图像

使用 loading="lazy" 属性延迟加载不在视窗内的图片。

<img src="image.jpg" loading="lazy" alt="Description">

3. CSS优化

使用工具（如PostCSS）进行CSS优化，减少冗余代码。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-preset-env': {},
    'cssnano': {}
  }
};

可访问性

1. ARIA属性

使用ARIA属性增强非标准HTML元素的可访问性。

<button aria-label="Close" aria-hidden="true"></button>

2. 键盘导航

确保所有交互元素都可以通过键盘访问。

<a href="#" tabindex="0">Link</a>

3. 颜色对比度

使用工具（如WebAIM Color Contrast Checker）检查颜色对比度，确保符合WCAG标准。

.text {
  color: #000; /* 黑色 */
  background-color: #fff; /* 白色 */
}

实战案例：响应式导航栏

HTML 结构

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <button class="toggle-menu" aria-label="Toggle Menu">&#9776;</button>
</nav>

CSS 样式

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #333;
  color: #fff;
}

.logo {
  font-size: 1.5em;
}

.menu {
  list-style: none;
  display: flex;
  gap: 20px;
}

.menu li a {
  text-decoration: none;
  color: inherit;
}

.toggle-menu {
  display: none;
  background: none;
  border: none;
  font-size: 1.5em;
  cursor: pointer;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .menu.active {
    display: flex;
  }

  .toggle-menu {
    display: block;
  }
}

JavaScript 交互

document.querySelector('.toggle-menu').addEventListener('click', function() {
  document.querySelector('.menu').classList.toggle('active');
});

通过这些详细的技巧和实战案例，你应该能够更好地理解和应用高级的HTML和CSS技术。如果有任何具体的问题或需要进一步的指导，请随时提问！