前端工程师面试秘籍：CSS篇

如果你正在准备前端工程师面试，那么掌握CSS基础知识至关重要。CSS是层叠样式表，用于控制网页的视觉表现，它可以让你自定义网页的布局、字体、颜色、背景等元素。

CSS居中方式有多少种？

1. 使用text-align: center属性：这是一种最简单的方法，适用于文本元素的居中。
2. 使用margin: 0 auto;属性：这种方法适用于块级元素的水平居中。
3. 使用flexbox布局：使用display: flex;和justify-content: center;属性可以实现元素的水平居中。
4. 使用grid布局：使用display: grid;和justify-content: center;属性可以实现元素的水平居中。
5. 使用绝对定位：使用position: absolute;和left: 50%;、transform: translate(-50%, -50%);属性可以实现元素的居中。

CSS有哪些选择器？

1. 通用选择器（*）: 用于选择所有元素。
2. 类型选择器（标签名）: 用于选择特定类型的元素，如<div>、<p>、<ul>等。
3. 类选择器（.类名）: 用于选择具有特定类名的元素。
4. ID选择器（#ID）: 用于选择具有特定ID的元素。
5. 后代选择器（父级选择器 > 子级选择器）: 用于选择父级选择器中的子级选择器。
6. 子代选择器（父级选择器 ~ 子级选择器）: 用于选择父级选择器之后的相邻子级选择器。
7. 相邻选择器（父级选择器 + 子级选择器）: 用于选择父级选择器之后的第一个相邻子级选择器。
8. 属性选择器（[属性名="属性值"]）: 用于选择具有特定属性和属性值的元素。
9. 伪类选择器（:伪类名）: 用于选择满足特定条件的元素，如:hover、:active、:focus等。
10. 伪元素选择器（::伪元素名）: 用于选择元素的特定部分，如::before、::after等。

CSS盒模型有哪些组成部分？

1. 内容（content）: 元素的内容，包括文本、图像、视频等。
2. 内边距（padding）: 内容与边框之间的空间。
3. 边框（border）: 元素的边框。
4. 外边距（margin）: 边框与其他元素之间的空间。

CSS动画有哪些类型？

1. 过渡（transition）: 平滑地改变元素的属性值，如颜色、位置、大小等。
2. 动画（animation）: 沿着预定义的路径移动元素，或改变元素的外观。
3. 关键帧动画（keyframes animation）: 创建复杂的动画效果，如旋转、缩放、淡入淡出等。

CSS响应式设计有哪些常用技术？

1. 媒体查询（media queries）: 根据设备的屏幕尺寸、方向、分辨率等条件来调整网页的布局和样式。
2. 弹性布局（flexbox）: 允许元素在容器中灵活布局，并自动调整大小。
3. 网格布局（grid）: 允许元素在容器中以网格状布局，并轻松控制元素的位置和大小。
4. 自适应图像（responsive images）: 根据设备的屏幕尺寸和分辨率来调整图像的大小和格式。