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:默认值,元素遵循正常的文档流布局,忽略 toprightbottomleft 属性。
  • relative:相对定位,根据元素在正常文档流中的位置进行定位,通过 toprightbottomleft 属性进行微调。
  • absolute:绝对定位,相对于最近的非 static 定位的祖先元素进行定位,如果没有祖先元素则相对于文档进行定位。
  • fixed:固定定位,相对于浏览器窗口进行定位,即使页面滚动,元素的位置也不会改变。
  • sticky:粘性定位,元素根据滚动的位置在文档中切换定位,可以通过 toprightbottomleft 属性进行微调。

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(一个内联样式)

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

你可能感兴趣的:(css,前端)