CSS Grid布局高级技巧

1. 隐式与显式轨道

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

css">.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 关键字可以帮助自动填充剩余空间。

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

3. 命名区域

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

css">.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 可以让项目在多行中排列。

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

2. 对齐方式

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

css">.container {display: flex;align-items: center; /* 交叉轴对齐方式 */justify-content: space-between; /* 主轴对齐方式 */
}.item {align-self: flex-start; /* 单个项目的对齐方式 */
}

3. 基线对齐

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

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

CSS变量（自定义属性）

1. 动态变化

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

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

css">:root {--color: red;
}.text {color: var(--color);
}

2. 继承与覆盖

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

css">.parent {--color: red;
}.child {--color: blue;
}.text {color: var(--color);
}

高级媒体查询

1. 多条件查询

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

css">@media (min-width: 600px) and (max-width: 1200px) {/* 样式 */
}@media (min-width: 600px), (max-height: 800px) {/* 样式 */
}@media not all and (min-width: 600px) {/* 样式 */
}

2. 特性查询

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

css">@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" 属性延迟加载不在视窗内的图片。

html"><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元素的可访问性。

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

2. 键盘导航

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

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

3. 颜色对比度

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

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

实战案例：响应式导航栏

HTML 结构

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 样式

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技术。如果有任何具体的问题或需要进一步的指导，请随时提问！