前端面试题解析：CSS篇

在前端开发的面试中，CSS是一个重要的考察点。以下是一些常见的CSS面试题及其解析：

1. 介绍一下CSS盒模型。

答：CSS盒模型定义了HTML元素的布局方式。它包括内容区、内边距、边框和外边距四个部分。

• 内容区（Content）：这是盒子中用来显示实际内容的部分，比如文本、图片等。

• 内边距（Padding）：内容区与边框之间的空白区域，可以用来控制内容与边框之间的距离。

• 边框（Border）：紧接在内边距之外，用来围绕内容和内边距的线条或者空白。

• 外边距（Margin）：边框与相邻元素之间的空白区域，控制元素与相邻元素之间的距离。

  

2. 什么是标准盒模型？什么是怪异盒模型？

1. 标准盒模型（W3C盒模型）

在标准盒模型中，元素的宽度和高度只包括内容区，不包括内边距、边框和外边距。因此，元素的总宽度和高度应该使用以下公式进行计算：

元素的总宽度 = 内容区的宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度 = 内容区的高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距

如果需要使用标准盒模型，可以使用CSS的box-sizing属性进行设置：

 box-sizing: content-box;

2. 怪异盒模型（IE盒模型）

在怪异盒模型中，元素的宽度和高度包含了内容区、内边距和边框，但不包括外边距。因此，元素的总宽度和高度应该使用以下公式进行计算：

元素的总宽度 = 内容区的宽度 + 左内边距 + 右内边距 + 左边框 + 右边框
元素的总高度 = 内容区的高度 + 上内边距 + 下内边距 + 上边框 + 下边框

如果需要使用怪异盒模型，可以使用CSS的box-sizing属性进行设置：

box-sizing: border-box;

下面直观感受两者的区别：

3. 解释一下CSS选择器的优先级。

在CSS中，选择器用于选择要应用样式的HTML元素。以下是一些常见的CSS选择器及其优先级：

1. ID选择器（#id）

   • 通过元素的ID属性来选择元素，如#myElement。
   • ID选择器具有最高的优先级。

2. 类名选择器（.class）

   • 通过元素的类名属性来选择元素，如.myClass。
   • 类名选择器的优先级比标签选择器高，但比ID选择器低。

3. 标签选择器

   • 通过HTML标签名称来选择元素，如div、p等。
   • 标签选择器的优先级最低。

4. 后代选择器

   • 用空格分隔的两个选择器，选择指定元素内部的后代元素，如div p会选择所有在<div>元素内部的<p>元素。
   • 优先级取决于后代选择器中各个部分的优先级。

5. 子级选择器

   • 使用>符号选择作为某元素子元素的元素，例如div > p会选择所有直接作为<div>子元素的<p>元素。
   • 优先级和后代选择器相似。

6. 相邻兄弟选择器

   • 使用+选择紧接在另一元素后的元素，如h2 + p会选择紧接在<h2>元素后的<p>元素。
   • 优先级和后代选择器相似。

7. 群组选择器

   • 将多个选择器组合在一起，使用逗号分隔，如h1, h2, h3。
   • 优先级取决于群组中最具体的选择器。

8. 属性选择器

   • 通过元素的属性和属性值来选择元素，如[type="text"]。
   • 优先级与类名选择器相似。

9. 伪类选择器

   • 通过元素的特殊状态或位置来选择元素，如:hover、:first-child。
   • 优先级与类名选择器相似。

10. 伪元素选择器

• 用于选择元素的特定部分，如::before、::after。
• 优先级与类名选择器相似。

一般来说，!important > 内联样式 > id选择器 > 类名选择器 > 标签选择器。如果两个规则具有相同的优先级，则后面的规则将覆盖前面的规则。

4. CSS中有哪些常见的单位？

1. px

   • 像素（pixel）的缩写，它是一个固定的长度单位，表示设备或图片的最小点。
   • 例如，设置一个元素的宽度为200px，表示元素的宽度为200个像素点。
   • 缺点是没有弹性，当屏幕大小改变时，页面可能不适配。

2. em

   • 相对于父元素的字体大小（font-size），具有继承特性。
   • 如果自身定义了字体大小（默认16px），1em并不是固定值。
   • 例如，如果一个div元素的字体大小为16px，那么1em将等于16px
   • 另外，如果一个元素设置了一个特定的字体大小，那么在该元素内部使用em将相对于该元素自身的字体大小来计算。

3. rem

   • rem是一个相对单位，相对于根元素html的字体大小。
   • 例如，如果html字体大小设置为16px，那么1rem将等于16px。
   • 整个页面上的元素都可以以相同比例进行调整，而无需单独调整每个元素的大小

4. %

   • 相对于父元素的百分比，相对单位
   • 对于不同类型的定位元素，百分比相对于不同的参考对象计算。
   • 例如，如果一个div元素的宽度为50%，那么它将占据其父元素宽度的一半。

5. vw

   • 可视窗口宽度的单位，CSS3新增。
   • 例如，浏览器宽度为1200px，100vw等于1200px，10vw等于120px。

6. vh

   • 可视窗口高度的单位，CSS3新增。
   • 例如，浏览器高度为900px，100vh等于900px，10vh等于90px。

7. rpx

   • 微信小程序中用于自适应屏幕尺寸的单位。
   • 相对于屏幕宽度进行自适应，微信规定屏幕宽度为750rpx。
   • 例如，将屏幕宽度分为750份，每份为1rpx。。

这些单位在网页设计和开发中起着重要作用，根据需要选择合适的单位来实现灵活的布局和设计。例如，rem和em可以用于字体和间距的调整，vw/vh可以用于响应式设计中的元素大小和位置的自适应调整，%可以用于相对于父元素的大小和位置的调整。

假如您也和我一样，在准备春招。
欢迎加我微信shunwuyu，
这里有几十位一心去大厂的友友可以相互鼓励，
分享信息，模拟面试，共读源码，齐刷算法，手撕面经。来吧，友友们！

原文链接：https://juejin.cn/post/7337892215226548261 作者：好好吃饭e