前端经典面试题合集, CSS3 新增了哪些特性?
前端经典面试题合集, CSS3 新增了哪些特性?
QA
Step 1
Q:: CSS3 新增了哪些特性？
A:: CSS3 引入了许多新特性，包括但不限于：
1. 选择器（如 :nth-child, :nth-of-type）
2. 媒体查询，用于响应式设计
3. 边框与背景（如 border-radius, box-shadow, background-size）
4. 文本效果（如 text-shadow, word-wrap）
5. 颜色（RGBA, HSLA, 透明度）
6. 转换（transforms）
7. 动画（animations）
8. 网格布局（grid layout）
9. 弹性布局（flexbox）
Step 2
Q:: 什么是 Flexbox？
A:: Flexbox 是 CSS3 中引入的一种布局模式，用于一维布局。它提供了更高效的对齐和分布空间的方法，尤其在设计复杂布局时非常有用。主要属性包括 display: flex, flex-direction, justify-content, align-items 等。
Step 3
Q:: 媒体查询的作用是什么？
A:: 媒体查询用于根据不同的设备特性（如屏幕宽度、高度、分辨率等）应用不同的 CSS 样式。它是响应式设计的核心工具，能够使网页在不同设备上都有良好的显示效果。
Step 4
Q:: CSS Grid 和 Flexbox 的区别是什么？
A:: Flexbox 主要用于一维布局（行或列），而 Grid 则用于二维布局（行和列）。Grid 提供了更复杂和灵活的布局方式，适合处理需要精确控制的网格布局。
Step 5
Q:: 什么是 CSS 变量？
A:: CSS 变量（Custom Properties）允许开发者在 CSS 中定义重复使用的值。通过 --var-name 形式定义变量，并使用 var(--var-name) 调用，可以使样式更加灵活和易于维护。
Step 6
Q:: CSS3 中的新颜色格式有哪些？
A:: CSS3 中新增了 RGBA 和 HSLA 颜色格式。RGBA 在 RGB 的基础上增加了 Alpha 透明度值，HSLA 则是在 HSL（色相、饱和度、亮度）基础上增加了 Alpha 透明度值。
Step 7
Q:: 什么是 CSS 动画？
A:: CSS 动画允许在 HTML 元素属性在一段时间内的变化过程。通过 @keyframes 定义动画关键帧，并使用 animation 属性应用动画，可以创建复杂的动画效果。