CSS基础：一道面试题剖析伪元素、包含块和高度坍塌

重拾CSS：一道面试题剖析伪元素、包含块和高度坍塌

在求职面试中，考察应聘者对CSS基础的掌握程度，是一项常见的面试环节。本文将通过一道实际的面试题，带大家重拾CSS，深入剖析伪元素、包含块和高度坍塌等概念，帮助大家查漏补缺，提升CSS基础。

一、面试题剖析

一道常见的面试题如下：

html, body {
  width: 100%;
  height: 100%;
}

.container {
  width: 50%;
  height: 50%;
  background-color: red;
  margin: auto;
}

.content {
  width: 100%;
  height: 100%;
  background-color: blue;
}

当我们使用浏览器打开上述代码时，页面中会出现一个居中的红色正方形，内部有一个蓝色矩形，填充了整个正方形。然而，当我们调整浏览器窗口的大小时，蓝色矩形的高度不会随着正方形的高度调整而变化。

二、伪元素

为了解决蓝色矩形高度不随正方形高度变化的问题，我们需要了解CSS中的伪元素。伪元素是一种虚拟元素，它并不存在于DOM结构中，但可以通过CSS对其进行样式设置。

在上述代码中，我们可以使用:after伪元素，在蓝色矩形后面插入一个高度为100%的透明矩形，从而实现蓝色矩形的高度自适应调整。

.content:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
}

三、包含块

在CSS中，每个元素都有一个包含块，它决定了元素的布局和尺寸。包含块可以是元素的父元素，也可以是视口（html元素）。

在上述代码中，蓝色矩形的内容盒高度为100%，它的包含块是父元素.container。.container的包含块是父元素body，而body的包含块是视口。

四、高度坍塌

高度坍塌是一种CSS现象，它会使相邻的块级元素在垂直方向上合并，表现为相邻块级元素的高度相加。

在上述代码中，蓝色矩形和伪元素都是块级元素，它们相邻排列，因此会发生高度坍塌，导致蓝色矩形的高度不会随正方形的高度变化。

五、解决高度坍塌

为了解决高度坍塌的问题，我们可以使用以下方法：

• 给伪元素添加float或position属性
• 给伪元素添加clear属性
• 给伪元素设置负边距

在上述代码中，我们可以使用clear: both属性来清除高度坍塌：

.content:after {
  clear: both;
}

六、总结

通过对这道面试题的深入剖析，我们加深了对CSS中伪元素、包含块和高度坍塌等概念的理解。这些概念是CSS的基础，掌握它们有助于我们写出更健壮、更灵活的CSS代码。