CSS 面试题

CSS 面试题

1. 什么是盒模型（Box Model）？它由哪些部分组成？

答案：盒模型是指在 CSS 中，每个元素都被看作是一个矩形的盒子，该盒子由四个部分组成：内容（content）、内边距（padding）、边框（border）和外边距（margin）。内容是元素实际包含的内容，内边距是内容与边框之间的空间，边框是围绕内容和内边距的线，外边距是边框与相邻元素之间的空间。

2. 请解释 CSS 中的层叠顺序（z-index）是如何工作的？

答案：层叠顺序（z-index）决定了元素在垂直堆叠顺序中的显示顺序。具有较高 z-index 值的元素将覆盖具有较低 z-index 值的元素。如果两个元素具有相同的 z-index 值，则后出现在 HTML 代码中的元素将覆盖先出现的元素。要使 z-index 生效，元素的定位必须是相对的、绝对的或固定的。

3. 请解释 CSS 中的浮动（float）是如何工作的？

答案：浮动（float）是一种 CSS 布局技术，用于将元素从正常的文档流中移动。浮动的元素会向左或向右移动，并尽可能地与其容器的左侧或右侧对齐。浮动元素之后的内容将环绕在它周围。浮动元素的父元素将会塌陷，所以通常需要使用清除浮动（clear float）的技术来修复这个问题。

4. 请解释 CSS 中的定位属性（position）的不同值及其作用。

答案：CSS 中的定位属性（position）有以下几个值：

• static：默认值，元素遵循正常的文档流布局，忽略 top、right、bottom 和 left 属性。
• relative：相对定位，根据元素在正常文档流中的位置进行定位，通过 top、right、bottom 和 left 属性进行微调。
• absolute：绝对定位，相对于最近的非 static 定位的祖先元素进行定位，如果没有祖先元素则相对于文档进行定位。
• fixed：固定定位，相对于浏览器窗口进行定位，即使页面滚动，元素的位置也不会改变。
• sticky：粘性定位，元素根据滚动的位置在文档中切换定位，可以通过 top、right、bottom 和 left 属性进行微调。

5. 请解释 CSS 中的选择器优先级是如何计算的？

答案：CSS 中的选择器优先级是根据选择器的特定性（specificity）来计算的。特定性是由选择器的组成部分（标签名、类、ID 和内联样式）确定的。通常，选择器的特定性由四个部分组成，从左到右依次是：内联样式的数量、ID 选择器的数量、类和属性选择器的数量，以及标签选择器和伪类选择器的数量。特定性值越大，优先级越高。在计算特定性时，不同的部分具有以下权重：

• 内联样式：1,000
• ID 选择器：100
• 类和属性选择器：10
• 标签选择器和伪类选择器：1

优先级计算示例：

• div p：特定性为 2（两个标签选择器）
• .container .item：特定性为 20（两个类选择器）
• #header：特定性为 100（一个 ID 选择器）
• style="color: red;"：特定性为 1,000（一个内联样式）

特定性越高的选择器将覆盖特定性较低的选择器。在特定性相同的情况下，后面出现的规则将覆盖先出现的规则。