前端面试-HTML5与CSS3

HTML5/CSS3

1. HTML5语义化标签的作用是什么？请举例说明5个常用语义化标签及其适用场景

解答：

语义化标签通过标签名称直观表达内容结构，有利于：

• 提升可访问性（屏幕阅读器识别）
• 改善SEO（搜索引擎内容解析）
• 增强代码可维护性
  常用标签示例：

<header> 页面/区块头部内容
<nav> 导航链接区域
<article> 独立内容区块（如博客文章）
<section> 文档主题内容分组
<aside> 侧边栏/附属信息

2. Flex布局中flex: 1的具体含义是什么？

解答：
flex: 1是flex-grow/flex-shrink/flex-basis的简写：

• flex-grow: 1：元素按比例分配剩余空间
• flex-shrink: 1：空间不足时允许收缩
• flex-basis: 0%：初始尺寸为0，完全由伸缩决定
  相当于flex: 1 1 0%

3. Grid布局如何实现经典的12列栅格系统？

解答：

.container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}
/* 元素使用示例 */
.col-4 {
  grid-column: span 4; /* 占4列 */
}

4. 如何通过媒体查询实现移动优先的响应式布局？

解答：

移动优先原则（min-width递增）：

/* 默认移动端样式 */
.container { padding: 10px; }

/* 平板适配 */
@media (min-width: 768px) {
  .container { padding: 20px; }
}

/* 桌面适配 */
@media (min-width: 1024px) {
  .container { padding: 30px; }
}

5. Flex与Grid布局的核心区别是什么？

解答：

维度	Flex	Grid
维度	一维布局	二维布局
对齐方式	基于轴线对齐	基于网格线对齐
内容控制	内容流驱动布局	显式定义行列结构
适用场景	线性排列、简单对齐	复杂网格布局

6. 如何实现一个自适应的圣杯布局（三栏布局）？

解答：

Grid实现方案：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  min-height: 100vh;
}
/* 媒体查询适配移动端 */
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

7. CSS3中哪些新特性可以提升响应式开发效率？

解答：

• 视口单位：vw/vh/vmin/vmax
• 媒体查询（Media Queries Level4）：(hover: hover)等新特性
• 计算函数：calc()
• Flex/Grid布局系统
• 多列布局：column-count
• 自定义属性（CSS变量）

8. 如何处理Flex/Grid布局的浏览器兼容性问题？

解答：

渐进增强策略：

1. 使用@supports特性检测：

@supports (display: grid) {
  /* 现代浏览器样式 */
}

2. 添加浏览器前缀：

.container {
  display: -webkit-flex;
  display: flex;
}

3. 提供fallback布局（如float布局）
4. 使用autoprefixer工具自动处理前缀

9. 如何用Grid实现瀑布流布局？

解答：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows: masonry; /* 实验性特性 */
  gap: 15px;
}
/* 降级方案 */
@supports not (grid-auto-rows: masonry) {
  .item {
    break-inside: avoid;
  }
}

10. 使用Flex布局时，如何实现等高等宽的卡片列表？

解答：

.card-container {
  display: flex;
  gap: 20px;
}

.card {
  flex: 1;  /* 等宽 */
  display: flex;
  flex-direction: column;
}

.card-content {
  flex-grow: 1; /* 等高 */
}

原理说明：

外层flex容器使卡片等宽，内层flex容器通过flex-grow拉伸内容区域实现等高效果。