一、什么是高度塌陷？

在 CSS 布局中，父元素未设置固定高度，且子元素使用了浮动（float）属性时，父元素会失去对浮动子元素的高度支撑，导致父元素高度为 0、无法包裹子元素的现象，称为「高度塌陷」。

二、解决高度塌陷的5种常用办法

1. 给父元素设置 overflow: hidden（最简单）

利用 CSS 的 BFC（块级格式化上下文）特性，让父元素自动包裹浮动子元素

.parent { overflow: hidden; /* 或 auto */ }

优点：代码简洁；缺点：可能会隐藏溢出的内容（如子元素的下拉菜单）。

2. 给父元素添加「清除浮动」的伪元素（推荐）

通过父元素的 ::after 伪元素清除浮动，是工程中最常用的方案：

.parent::after {
  content: "";       /* 伪元素必须有内容 */
  display: block;    /* 转为块级元素 */
  clear: both;       /* 清除左右两侧浮动 */
}
.parent { zoom: 1; } /* 兼容 IE6/7 */

优点：不影响其他布局，兼容性好；缺点：需额外写 CSS 代码。

3. 给父元素设置固定高度（不推荐）

直接给父元素指定高度

.parent { height: 100px; }

优点：简单直接；缺点：子元素高度变化时需要手动修改父元素高度，灵活性差。

4. 在浮动子元素后添加空标签并清除浮动（不推荐）

在最后一个浮动子元素后加一个空的块级元素，通过它清除浮动：

<div class="parent">
  <div class="child">我是浮动元素</div>
  <div class="clear"></div> <!-- 空标签 -->
</div>

.clear { clear: both; }

优点：简单；缺点：增加无意义的空标签，违反语义化原则。

5. 父元素也设置浮动（不推荐）

让父元素也浮动，使其自动包裹子元素：

.parent { float: left; width: 100%; }

优点：无需额外代码；缺点：父元素浮动后会脱离文档流，可能影响后续元素的布局。

三、CSS 定位有哪几种类型？各自的核心特点是什么？如果给 static 元素设置 top: 10px 会生效吗？relative 定位的元素，偏移的参考点是什么？

1. 定位分 5 类：static（默认、无偏移）、relative（相对自身、不脱流）、absolute（相对已定位祖先、脱流）、fixed（相对视口 / 特殊祖先、脱流）、sticky（滚动切换相对 / 固定）；
2. static 设 top 无效，因偏移属性仅对非 static 元素生效；
3. relative 偏移参考自身原始文档流位置

四、CSS 过渡（transition）的核心作用是什么？它和 animation 有什么核心区别？

• 标准答案：

  ① 过渡（transition）的核心作用：监听元素 CSS 属性的状态变化，让属性值在指定时间内平滑过渡，实现轻量的状态切换动画，需依赖「状态触发」（如 hover、类名切换）。

  ② 与 animation 的核心区别：

  • 触发方式：transition 需外部触发（状态变化），animation 可自动执行（无需触发）；
  • 复杂度：transition 仅支持「单段过渡」（A→B），animation 支持多关键帧（A→B→C）、循环、反向播放等复杂逻辑；
  • 控制能力：animation 可通过 animation-play-state 暂停 / 播放，transition 无直接暂停方法。

五、讲解一下transition,transform,translate的区别

六、背景图片的各个处理

七、cover与contain的区别

八、object-fit与background-size的区别

九、什么是语义化标签？语义化标签有哪些？

语义化标签（Semantic HTML Tags）是指具有明确含义的HTML元素，能够清晰描述其包含内容的结构和功能。

核心价值可概括为 3 点：

1. 人友好：代码可读性高，开发者能快速理解页面结构（如 <nav> 一眼知是导航，而非一堆 <div>）；

2. 机器友好：搜索引擎（SEO）能识别内容权重（如 <h1> 比 <div> 更能体现页面核心标题），屏幕阅读器（无障碍）能正确解读内容（帮助视障用户浏览）；

3. 维护友好：语义化标签让页面结构更清晰，后期迭代、多人协作成本更低。

   
   

十、讲解一下box-sizing

box-sizing 是 CSS 控制元素盒模型尺寸计算规则的核心属性

十一、讲解一下flex:1

十二、align-items和align-content的区别

十三、元素按布局行为分为哪几种

十四、行内元素有哪些

十五、块元素有哪些

十四、两种盒子模型分为标准盒子模型和怪异盒子模型

box-sizing: border-box

十五、讲解一下overflow这个属性

十六、行内元素水平和垂直方向居中方式

行内：

text-align:center

vertical-align:center

height=line-height

flex布局

块：

margin

flex

绝对定位+transform

十七：为元素和伪类的区别

十八、选择器