企业官网建设流程全解析

前端面试中，CSS 的考察重点已经从早期的“死记硬背属性”转向了**“原理理解 + 布局方案 + 性能优化”** 。

以下是整理的 CSS 高频面试题，分为五大核心板块，并对最核心的题目给出了精彩回答模板。

一、 盒子模型与基础理论 (Fundamentals)

1. 标准的盒子模型与 IE 盒子模型有什么区别？
2. CSS 选择器的优先级（权重）如何计算？
3. display: none、visibility: hidden、opacity: 0的区别？(在上一个回答中已涉及)
4. 什么是 CSS 实体（CSS Sprites / 雪碧图）？
5. 伪类和伪元素的区别？

二、 核心布局与 BFC (Layout & BFC)

1. 如何实现水平垂直居中？(几乎必考)
2. 什么是 BFC（块级格式化上下文）？它能解决什么问题？(重难点)
3. 三栏布局的实现方案（圣杯布局、双飞翼布局、Flex 布局）？
4. 如何清除浮动？为什么需要清除浮动？
5. 什么是外边距重叠（Margin Collapsing）？

三、 Flex 与 Grid 布局 (Modern Layout)

1. Flex 布局中flex: 1到底代表什么？(高频，考察对子属性的理解)
2. justify-content和align-items的区别？
3. Flex 布局如何实现两端对齐？
4. Grid 布局的应用场景？

四、 响应式与单位 (Responsive & Units)

1. px、em、rem、vw/vh的区别？
2. 如何实现 1px 物理像素边框？(针对视网膜屏幕)
3. 响应式设计的核心原理是什么？(媒体查询@media)
4. 如何适配不同分辨率的移动端页面？

五、 性能优化与进阶 (Performance & Advanced)

1. 如何实现一个 CSS 三角形？(考察绘图技巧)
2. 什么是 CSS 变量（CSS Variables）？
3. CSS 后处理器和预处理器的区别（Sass/Less vs. PostCSS）？

🏆 重点题目深度解析（带回答模板）

问题 1：什么是 BFC？它能解决什么问题？

高分模板（展现原理深度）：

"BFC 全称块级格式化上下文（Block Formatting Context），它是页面中一个独立的渲染区域，内部的子元素布局不会影响到外部，外部也不会影响内部。

触发 BFC 的常见方式有：设置overflow为除 visible 以外的值、display设置为 inline-block 或 flex、或者是position: absolute/fixed。

它主要解决三个工程问题：

1. 防止外边距重叠：在同一个 BFC 下，相邻两个块级元素的上下 margin 会发生重叠。如果想避免，可以把其中一个元素放在新的 BFC 中。
2. 清除浮动影响：BFC 区域在计算高度时，浮动子元素也会参与计算。这就是为什么给父级设置overflow: hidden能解决高度塌陷的原因。
3. 防止元素被浮动元素覆盖：BFC 区域不会与浮动盒子重叠。我们可以利用这一点实现自适应的两栏布局，让右侧内容区域触发 BFC，从而不被左侧的浮动元素覆盖。"

简答模板：

"BFC 是一个特殊的独立渲染容器。常用overflow: hidden来触发。它可以解决：1. 边距重叠问题；2. 浮动引起的高度塌陷（清除浮动）；3. 实现两栏自适应布局，防止内容被浮动元素覆盖。"

问题 2：Flex 布局中flex: 1到底代表什么？

高分模板（展现细节掌控力）：

"flex: 1实际上是三个属性的缩写：flex-grow: 1、flex-shrink: 1和flex-basis: 0%。

1. flex-grow: 1表示如果有多余空间，该空间如何分配。1 代表该项目将占据剩余空间的全部（如果有多个 flex:1，则平分）。
2. flex-shrink: 1表示如果空间不足，该项目如何缩小。1 代表在空间不足时，它会随着其他项目等比例缩小。
3. flex-basis: 0%定义了在分配多余空间之前，项目的默认大小。设置为 0% 意味着它完全不占位，所有空间都作为‘剩余空间’按逻辑分配。

需要注意的是，flex: auto的含义是1 1 auto，而flex: none是0 0 auto。面试中明确这三个子属性的默认值和计算逻辑，能够体现对 Flex 规范的深度掌握。"

简答模板：

"flex: 1是缩写，等同于flex-grow: 1; flex-shrink: 1; flex-basis: 0%。它的作用是让子元素自动填满父容器的剩余空间，并且在空间不足时自动缩小，保证布局的自适应能力。"

问题 3：如何画一个三角形？原理是什么？

高分模板（展现逻辑完整性）：

"实现三角形的本质是利用 CSS 边框（border）的交界特性。当一个元素的width和height都为 0 时，给四个边的 border 设置较大的宽度，你会看到四个三角形拼成的正方形。

步骤如下：

1. 设置元素的宽、高为 0。
2. 设置border宽度（比如 50px）。
3. 将不需要显示的三个边框颜色设为transparent（透明）。
4. 将需要显示的那个方向的边框设置具体的颜色。

进阶优化：
如果是为了性能好或高保真，现代开发中也可以考虑使用clip-path裁剪路径，或者使用svg。但 border 方法兼容性最好，是处理简单图标的首选。"

简答模板：

"原理是利用 border。把元素的宽高设为 0，然后给四个边框设置宽度，并将其中三个边的颜色设为透明transparent，只保留一个边的颜色，就能得出一个三角形。这种方法兼容性最好。"

问题 4：px、em、rem、vw/vh 的区别？

简答模板（对比表格）：