前端CSS高频面试题详解

高考这三天，前端题不能停。

1. `display:none` 和 `visibility:hidden` 的区别

display:none ：彻底隐藏元素，不占据任何空间，就像它不存在一样，周围的元素会重新排列填充它的位置。
visibility:hidden ：隐藏元素，但仍然占据原来的空间，只是看不见而已，不影响页面布局。

适用场景：

如果想完全移除元素（如动态切换显示），用 display:none。
如果只是想让元素不可见但仍占位（如占位加载），用 visibility:hidden。

2. `link` 和 `@import` 的区别

对比项	`<link>`	`@import`
语法	HTML标签	CSS语法
加载时机	并行加载，不阻塞页面渲染	等页面加载完才加载
兼容性	所有浏览器支持	仅IE5+支持
权重	更高	较低

最佳实践：

推荐 <link>，因为加载更快，兼容性更好。
避免 @import，可能导致渲染延迟。

3. `position: absolute` 和 `position: fixed` 的异同

共同点：

让元素脱离文档流，不占据空间。
默认会覆盖非定位元素。
它们的 margin 不会和其他元素的 margin 重叠（因为创建了新的 BFC）。

不同点：

`absolute`	`fixed`
相对于最近的非 `static` 祖先元素定位	相对于浏览器窗口（viewport）定位
滚动页面时，元素会跟随滚动	滚动页面时，元素固定不动

适用场景：

absolute：适合相对某个父容器定位（如弹窗）。
fixed：适合固定导航栏、悬浮按钮等。

4. CSS 盒子模型

两种盒子模型：

标准盒模型（W3C）：
- width 和 height 仅指 内容区（content）。
- padding 和 border 会额外增加盒子大小。
- 计算方式：总宽度 = width + padding + border + margin
IE盒模型（怪异模式）：
- width 和 height 包含 content + padding + border。
- 计算方式：总宽度 = width + margin

如何切换？

css 复制代码

box-sizing: content-box;  /* 标准盒模型（默认） */
box-sizing: border-box;   /* IE盒模型（推荐） */

5. CSS 选择器、继承性、优先级

常见选择器：

#id、.class、div（标签）、*（通配符）
ul > li（子选择器）、li a（后代选择器）
a:hover（伪类）、input[type="text"]（属性选择器）

可继承的属性：

font、color、text-align、line-height
不可继承的 ：margin、padding、border、width、height

优先级计算：

!important > 行内样式 > #id > .class > 标签 > 通配符

示例：

css 复制代码

#header div { ... }  /* 权重：100 + 1 = 101 */
.content div { ... } /* 权重：10 + 1 = 11 */

6. CSS3 新特性

圆角：border-radius: 5px;
阴影：box-shadow: 2px 2px 5px #000;
渐变：background: linear-gradient(red, blue);
动画：@keyframes + animation
变形：transform: rotate(45deg) scale(1.2);
Flex / Grid 布局
媒体查询 ：@media (max-width: 768px) { ... }

7. 为什么要初始化 CSS 样式？

不同浏览器对默认样式的解析不同（如 margin、padding），可能导致页面显示不一致。

解决方案：

简单粗暴（不推荐） ：
css 复制代码
```
* { margin: 0; padding: 0; }
```
推荐方案 ：
- Normalize.css（保留有用的默认样式，修复浏览器差异）
- Reset.css（彻底清除默认样式）

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

什么是 BFC？

BFC 是一个独立的渲染区域，内部元素不会影响外部布局。

如何触发 BFC？

float: left/right
position: absolute/fixed
display: inline-block/table-cell/flex
overflow: hidden/auto/scroll

BFC 的作用：

防止 margin 重叠 （垂直方向相邻元素的 margin 会合并）。
清除浮动（避免父元素高度塌陷）。
阻止元素被浮动覆盖。

9. CSS Sprites（雪碧图）

是什么？

将多个小图标合并成一张大图，用 background-position 定位显示。

优点：

减少 HTTP 请求（提升加载速度）。
节省带宽（合并后图片更小）。

缺点：

维护麻烦（新增/修改图标需重新拼图）。
不适合高清屏（可能模糊）。

替代方案：

SVG 图标（矢量图，高清无损）。
Icon Font（如 Font Awesome）。
HTTP/2（多路复用，减少请求开销）。

总结

本文涵盖了 CSS 核心概念，包括盒模型、选择器、定位、BFC、CSS3 新特性等，适用于面试复习和日常开发参考。建议结合代码实践加深理解！ 🚀