前端经典面试题合集, CSS3 新增了哪些特性?
前端经典面试题合集, CSS3 新增了哪些特性?
QA
Step 1
Q:: CSS3 新增了哪些特性？
A:: CSS3 带来了许多新特性，使得前端开发更加灵活和强大。主要新增特性包括：
1. **边框和阴影（Border & Shadow）**：CSS3 引入了 border-radius 可以实现圆角效果，box-shadow 和 text-shadow 用于添加阴影。
2. **渐变（Gradients）**：CSS3 增加了线性渐变（linear-gradient）和径向渐变（radial-gradient），无需使用图像就可以创建复杂的背景效果。
3. **Flexbox 和 Grid 布局**：CSS3 提供了 flexbox 和 grid 布局模型，使得页面布局更容易和直观。
4. 媒体查询（Media Queries）：通过媒体查询可以实现响应式设计，根据设备的特性（如屏幕宽度）应用不同的样式。
5. **动画（Animations）和过渡（Transitions）**：CSS3 支持通过 @keyframes 定义复杂的动画，transition 可以实现元素样式的平滑过渡。
6. 自定义字体（Web Fonts）：通过 @font-face 可以引入自定义字体，不再依赖于系统字体。
7. 背景增强（Background Enhancements）：包括多背景图片支持和背景图片大小调整（background-size）。
8. 新选择器：如 :nth-child()、:not() 等，更灵活的选择 HTML 元素。
Step 2
Q:: 如何使用 Flexbox 实现水平垂直居中？
A:: 要使用 Flexbox 实现水平垂直居中，可以将父元素的 display 属性设置为 flex，并使用 justify-content 和 align-items 属性。具体代码如下：
.parent {
display: flex;
justify-content: center;
align-items: center;
}
这样，子元素将在父容器中水平和垂直居中。
Step 3
Q:: 媒体查询的工作原理是什么？如何实现响应式设计？
A:: 媒体查询允许根据设备的不同特性（如屏幕宽度、高度、分辨率）应用不同的 CSS 样式。通过 @media 规则，可以定义特定条件下的样式。例如：
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
这段代码将在屏幕宽度小于 600px 时应用 lightblue 背景色。响应式设计通常通过媒体查询结合弹性布局、百分比宽度等技术来实现。