推荐|前端面试中常见的 CSS 相关问题

1. CSS3新增了哪些特性？

CSS3新增了圆角、阴影、渐变、动画、变形、多列布局、弹性盒模型、媒体查询等特性。

一、选择器增强

属性选择器


css
 代码解读
复制代码
/* 匹配属性值 */
input[type="text"] { ... }  
a[href^="https"] { ... }      /* 以 https 开头的链接 */
a[href$=".pdf"] { ... }       /* 以 .pdf 结尾的链接 */

伪类选择器


javascript
 代码解读
复制代码
:nth-child(n) { ... }        /* 第 n 个子元素 */
:not(.class) { ... }         /* 排除某类元素 */
:checked { ... }             /* 选中状态的表单元素 */

伪元素


css
 代码解读
复制代码
::selection { ... }          /* 用户选中的文本样式 */
::placeholder { ... }        /* 输入框占位符样式 */

二、视觉效果

圆角边框


css
 代码解读
复制代码
border-radius: 10px;         /* 统一圆角 */
border-radius: 5px 10px;     /* 水平/垂直不同圆角 */

阴影效果


css
 代码解读
复制代码
box-shadow: 2px 2px 5px rgba(0,0,0,0.3);  /* 盒子阴影 */
text-shadow: 1px 1px 2px #000;            /* 文字阴影 */

渐变背景


css
 代码解读
复制代码
background: linear-gradient(to right, red, blue);
background: radial-gradient(circle, red, yellow);

边框图片


css
 代码解读
复制代码
border-image: url(border.png) 30 round;

三、动画与过渡

过渡效果


css
 代码解读
复制代码
transition: all 0.3s ease-in-out;  /* 属性变化平滑过渡 */

关键帧动画


css
 代码解读
复制代码
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
animation: fadeIn 1s forwards;

四、布局革命

Flex 弹性布局


css
 代码解读
复制代码
.container {
  display: flex;
  justify-content: center;  /* 主轴对齐 */
  align-items: center;      /* 交叉轴对齐 */
}

Grid 网格布局


css
 代码解读
复制代码
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;  /* 列宽比例 */
  gap: 10px;                       /* 间距 */
}

多列布局


css
 代码解读
复制代码
.text-columns {
  column-count: 3;          /* 分 3 列 */
  column-gap: 20px;         /* 列间距 */
}

五、响应式设计

媒体查询（Media Queries）


scss
 代码解读
复制代码
@media (max-width: 768px) { 
  /* 移动端样式 */ 
}

六、其他重要特性

盒模型控制


css
 代码解读
复制代码
box-sizing: border-box;  /* 元素宽高包含 padding 和 border */

2D/3D 变换


css
 代码解读
复制代码
transform: rotate(45deg) translateX(20px);
transform: perspective(500px) rotateY(30deg);

自定义字体


css
 代码解读
复制代码
@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
}

2. 水平垂直居中的方法

Flexbox 方案：


css
 代码解读
复制代码
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

绝对定位 + Transform：


css
 代码解读
复制代码
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Grid 方案：


css
 代码解读
复制代码
.parent {
  display: grid;
  place-items: center;
}

3. 盒模型（Box Model）

标准盒模型：width/height = 内容区域（content）。
IE 盒模型：width/height = 内容 + padding + border。
切换盒模型：box-sizing: border-box（IE模型）或 content-box（默认标准模型）。

4. BFC（块级格式化上下文）

作用：隔离内部元素，避免外边距合并，阻止浮动元素覆盖。
触发条件：
- float 非 none；
- overflow 非 visible；
- display: inline-block/table-cell/flex；
- position: absolute/fixed。

5. 清除浮动的方法

设置父元素的高度：在已知子元素高度的情况下，可以在CSS中手动设置父元素的高度
空 div 清除法（传统方案）：在浮动元素末尾插入一个空 div，通过 CSS 的 clear:both 属性清除浮动影响。
伪元素 ::after 清除（Clearfix Hack）：利用伪元素 ::after 创建一个匿名元素，然后将其 clear 属性设置为 both，可以达到清除浮动的目的。这是一种更为优雅的方式，不需要额外的HTML标记。
```
css
 代码解读
复制代码
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
```
父元素触发 BFC：父元素设置 overflow: auto。

6. CSS 选择器优先级

优先级从高到低：

!important
内联样式（如 style="..."）
ID 选择器（#id）
类/伪类/属性选择器（.class, :hover, [type="text"]）
元素/伪元素选择器（div, ::before）
通配符（*）

7. Flexbox 常见概念

主轴（main axis）与交叉轴（cross axis） ：由 flex-direction 决定方向。
常用属性：
- 容器：flex-direction, justify-content, align-items, flex-wrap。
- 子项：flex-grow, flex-shrink, flex-basis。

8. CSS Grid 布局

二维布局：适合复杂网格结构。

基础用法：


css
 代码解读
复制代码
.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}

9. 响应式设计

媒体查询（Media Queries） ：


scss
 代码解读
复制代码
@media (max-width: 768px) {
  /* 移动端样式 */
}

移动端适配：


ini
 代码解读
复制代码
name="viewport" content="width=device-width, initial-scale=1.0">

运行 HTML

单位选择：rem（基于根字体）、vw/vh（视口比例）。

10. CSS 动画

过渡（Transition） ：平滑状态变化。


css
 代码解读
复制代码
.box {
  transition: all 0.3s ease-in;
}

关键帧动画（Keyframes） ：


css
 代码解读
复制代码
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

11. 伪类与伪元素

伪类（Pseudo-class） ：定义元素状态，如 :hover, :nth-child(n)。
伪元素（Pseudo-element） ：创建虚拟元素，如 ::before, ::after。

12. CSS 优化策略

减少选择器复杂度（如避免嵌套过深）。
使用 transform 和 opacity 实现动画（触发 GPU 加速）。
压缩 CSS 文件（如 Webpack 插件、PostCSS）。

13. 常见布局方案对比

圣杯布局/双飞翼布局：传统三栏布局，中间优先渲染。
Flex vs Grid：
- Flex：一维布局，按行或列排列。
- Grid：二维布局，适合复杂网格。

14. CSS 预处理器（Sass/Less）

优势：变量、嵌套、Mixin、函数等。

示例：


css
 代码解读
复制代码
$primary-color: #333;
.button {
  background: $primary-color;
  &:hover { background: darken($primary-color, 10%); }
}

15.高频进阶问题

z-index 工作原理：依赖定位元素和层叠上下文。
CSS 变量（Custom Properties） ：--var-name: value;，通过 var(--var-name) 使用。
移动端 1px 边框问题：使用 transform: scale(0.5) 或媒体查询 + viewport 缩放。