学习 CSS 巩固基础：入门级面试题解析与技巧

1. 什么是 CSS 盒模型？

• 回答：CSS 盒模型是一种用于理解和控制网页元素布局和样式的模型。它将元素视为一个矩形盒子，并将其划分为内容区、内边距、边框和外边距四个部分。

2. 简述 CSS3 的新特性。

• 回答：CSS3 是 CSS 的最新版本，它引入了许多新特性，包括：
  • 弹性布局：允许元素根据可用空间灵活调整大小和位置。
  • 多列布局：允许元素在水平方向排列成多列。
  • 媒体查询：允许根据屏幕尺寸、设备类型或其他条件应用不同的样式。
  • 过渡和动画：允许元素在状态之间平滑地过渡或执行动画。

3. CSS 选择器及其优先级。

• 回答：CSS 选择器用于匹配 HTML 元素并为其应用样式。选择器的优先级由其类型、特异性和继承性决定。
  • 类型：内联样式 > ID 选择器 > 类选择器 > 标签选择器 > 通用选择器
  • 特异性：元素名称的数量 + ID 的数量 * 1000 + 类名称的数量 * 10 + 内联样式的数量
  • 继承性：子元素继承父元素的样式。

4. 什么是 BFC（块级格式化上下文）？

• 回答：BFC 是一个独立的布局环境，其中的元素不会影响其相邻元素的布局。BFC 通常用于解决一些常见的布局问题，例如浮动元素重叠、元素间距不一致等。

5. 解释绝对定位和相对定位的区别。

• 回答：
  • 绝对定位：元素脱离正常的文档流，并根据其父元素或浏览器窗口进行定位。
  • 相对定位：元素在正常的文档流中，并根据其自身的位置进行定位。

6. 说一说你用过的 CSS 布局方式。

• 回答：最常用的 CSS 布局方式有：
  • 块状布局：使用 display: block 属性将元素排列成一个垂直的列表。
  • 行内布局：使用 display: inline 属性将元素排列成一个水平的行。
  • 浮动布局：使用 float 属性将元素浮动到一侧，使其与其他元素重叠。
  • 弹性布局：使用 flexbox 属性创建灵活的布局，元素可以根据可用空间自动调整大小和位置。
  • 网格布局：使用 grid 属性创建网格状的布局，元素可以根据网格单元格进行定位。

7. 什么是 Flex 布局？

• 回答：Flex 布局是一种一维的布局模型，它允许元素在主轴上排列，并根据可用空间自动调整大小和位置。Flex 布局非常适合创建响应式布局和复杂的用户界面。

8. 举几个 CSS 父元素属性和子元素属性的例子。

• 回答：
  • 父元素属性：display、flex-direction、justify-content、align-items、align-content
  • 子元素属性：flex-grow、flex-shrink、flex-basis、order、align-self

9. 解释属性名、属性值和备注之间的关系。

• 回答：属性名是 CSS 属性的名称，属性值是属性的具体值，备注是对属性的说明或限制。属性名和属性值之间使用冒号 (:) 分隔，备注使用分号 (;) 分隔。

10. 写出一个 CSS 代码示例，并解释其中的元素、属性和值。

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
}

• 元素：body
• 属性：
  • font-family：指定元素的字体。
  • font-size：指定元素的字体大小。
  • line-height：指定元素的行高。
• 值：
  • Arial, sans-serif：指定元素的字体为 Arial 或类似的无衬线字体。
  • 16px：指定元素的字体大小为 16 像素。
  • 1.5em：指定元素的行高为 1.5 倍的字体大小。