CSS精灵风云：细数CSS面试中的伪类、BFC、伪元素、vh

前端

2022-12-23 08:53:26

CSS精妙绝伦：巧用伪类、BFC、伪元素和vh征服面试

在CSS的世界里，伪类、BFC、伪元素和vh这四位成员占据着至高无上的地位，它们就像武林中的盖世高手，在面试场上大展拳脚，轻而易举地征服面试官。如果你也想要在面试中脱颖而出，那么请牢牢掌握这些绝世武功，并灵活运用，方能天下无敌。

伪类：元素状态下的变色龙

什么是伪类？

想象一下，当你悬停鼠标在某个元素上方，它突然换上了靓丽的新装，这便是伪类的魔法。伪类就像变色龙，随着元素状态的变化而改变自身的外貌。它们可以让你针对元素的不同状态进行不同的样式设定。

常见的伪类：

:hover ：鼠标悬停时
:active ：元素被选中时
:focus ：元素获得焦点时
:visited ：元素被访问过时
:disabled ：元素被禁用时

BFC：元素的独立王国

什么是BFC？

BFC（Block Format Context），即块级格式化上下文，就像一个独立的王国，里面的元素互不干扰。你可以通过设置元素的 display 属性为 block、inline-block 或 table-cell 来创建BFC。

BFC的妙用：

解决浮动元素造成的重叠问题
控制元素在页面中的布局和行为

伪元素：元素外的新天地

什么是伪元素？

伪元素就像在元素外开辟了一个新天地，你可以在这里自由发挥，创建出各种神奇的效果。使用 ::before 伪元素，你可以在元素之前插入一个新元素；使用 ::after 伪元素，你可以在元素之后插入一个新元素。

常见的伪元素：

::before ：在元素之前插入一个新元素
::after ：在元素之后插入一个新元素
::first-letter ：第一个字母的样式
::first-line ：第一行的样式

vh：灵活的长度单位

什么是vh？

vh是一个灵活的长度单位，它相对于视口高度，随着视口高度的变化而自动调整。这使得它非常适合用于响应式布局。

vh的计算公式：

vh = 1% * 视口高度

面试中的杀手锏

在CSS面试中，伪类、BFC、伪元素和vh都是经常被问到的问题。如果你能够熟练掌握这些知识，并在面试中灵活运用，那么你一定能够脱颖而出，赢得面试官的青睐。

常见问题解答：

伪类与伪元素的区别是什么？
伪类修改的是现有元素的样式，而伪元素创建的是新的元素。

/* 伪类 */
p:hover {
  color: red;
}

/* 伪元素 */
p::before {
  content: "New Element";
}

如何使用BFC解决浮动元素重叠问题？
为浮动元素的父元素设置 display 属性为 block、inline-block 或 table-cell，即可创建一个BFC。

.parent {
  display: flex; /* 创建一个BFC */
}

.child {
  float: left;
}

vh单位在响应式布局中有什么优势？
vh单位相对于视口高度，可以在不同尺寸的设备上保持元素的相对大小。

.element {
  height: 50vh;
}

如何使用伪元素创建边框阴影？
可以使用 ::before 和 ::after 伪元素，并设置 box-shadow 属性。

.element {
  position: relative;

  ::before,
  ::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }

  ::after {
    transform: rotate(45deg);
  }
}