1. CSS 和 CSS3 之间的区别？

CSS3 引入了许多新特性，例如动画、过渡、弹性盒模型 (Flexbox)、网格布局 (Grid) 等。

2. CSS 中的选择器是什么？

选择器用于选择 HTML 元素来应用样式。 包括简单选择器 (元素、ID、类)、组合选择器 (后代、子元素、相邻兄弟选择器)、伪类选择器 (:hover, :focus 等) 和属性选择器。

3. 什么是 CSS 中的媒体查询？

媒体查询用于创建响应式设计，根据不同的设备屏幕尺寸和特性应用不同的样式。

示例：

@media (max-width: 600px) {
  body { background-color: lightgray; }
}

4. CSS 中的不同定位值 (static, relative, absolute, fixed, sticky)

这些值定义了元素在文档流中的位置。

5. CSS 中的 BOM 是什么？

BOM (Box Model) 指的是元素的盒子模型，包括内容、内边距 (padding)、边框 (border) 和外边距 (margin)。

6. px, em, rem 之间的区别

• px: 像素，固定单位。
• em: 相对父元素字体大小的单位。
• rem: 相对根元素 (html) 字体大小的单位。

7. CSS 中的 Flexbox 是什么？

Flexbox 是一个一维布局模块，用于创建灵活的、响应式的布局。

示例：

display: flex;
justify-content: center;
align-items: center;

8. CSS 中有哪些伪类选择器？

:hover, :focus, :active, :visited, :nth-child(n) 等。

9. 如何使网站响应式？

使用媒体查询、流体布局、Flexbox、Grid 和响应式图片。

10. 响应式设计的断点是什么？

断点是根据屏幕尺寸来切换不同样式的临界点，例如 320px, 768px, 1024px, 1200px 等。 这些值并非固定，取决于设计需求。

11. 为什么在 CSS 中使用 box-sizing: border-box;?

box-sizing: border-box; 确保元素的宽度和高度包含内边距和边框。

示例：

* { box-sizing: border-box; }

请注意，我已经尽可能地对原文进行了伪原创，并保留了图片的原始格式和位置。 部分内容由于专业术语和代码的限制，修改幅度较小。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML和CSS采访问题和答案》文章吧，也可关注golang学习网公众号了解相关技术文章。