前端面试中CSS 的考察重点已经从早期的“死记硬背属性”转向了**“原理理解 布局方案 性能优化”** 。以下是整理的 CSS 高频面试题分为五大核心板块并对最核心的题目给出了精彩回答模板。一、 盒子模型与基础理论 (Fundamentals)标准的盒子模型与 IE 盒子模型有什么区别CSS 选择器的优先级权重如何计算display: none、visibility: hidden、opacity: 0的区别(在上一个回答中已涉及)什么是 CSS 实体CSS Sprites / 雪碧图伪类和伪元素的区别二、 核心布局与 BFC (Layout BFC)如何实现水平垂直居中(几乎必考)什么是 BFC块级格式化上下文它能解决什么问题(重难点)三栏布局的实现方案圣杯布局、双飞翼布局、Flex 布局如何清除浮动为什么需要清除浮动什么是外边距重叠Margin Collapsing三、 Flex 与 Grid 布局 (Modern Layout)Flex 布局中flex: 1到底代表什么(高频考察对子属性的理解)justify-content和align-items的区别Flex 布局如何实现两端对齐Grid 布局的应用场景四、 响应式与单位 (Responsive Units)px、em、rem、vw/vh的区别如何实现 1px 物理像素边框(针对视网膜屏幕)响应式设计的核心原理是什么(媒体查询media)如何适配不同分辨率的移动端页面五、 性能优化与进阶 (Performance Advanced)如何实现一个 CSS 三角形(考察绘图技巧)什么是 CSS 变量CSS VariablesCSS 后处理器和预处理器的区别Sass/Less vs. PostCSS 重点题目深度解析带回答模板问题 1什么是 BFC它能解决什么问题高分模板展现原理深度BFC 全称块级格式化上下文Block Formatting Context它是页面中一个独立的渲染区域内部的子元素布局不会影响到外部外部也不会影响内部。触发 BFC 的常见方式有设置overflow为除 visible 以外的值、display设置为 inline-block 或 flex、或者是position: absolute/fixed。它主要解决三个工程问题防止外边距重叠在同一个 BFC 下相邻两个块级元素的上下 margin 会发生重叠。如果想避免可以把其中一个元素放在新的 BFC 中。清除浮动影响BFC 区域在计算高度时浮动子元素也会参与计算。这就是为什么给父级设置overflow: hidden能解决高度塌陷的原因。防止元素被浮动元素覆盖BFC 区域不会与浮动盒子重叠。我们可以利用这一点实现自适应的两栏布局让右侧内容区域触发 BFC从而不被左侧的浮动元素覆盖。简答模板BFC 是一个特殊的独立渲染容器。常用overflow: hidden来触发。它可以解决1. 边距重叠问题2. 浮动引起的高度塌陷清除浮动3. 实现两栏自适应布局防止内容被浮动元素覆盖。问题 2Flex 布局中flex: 1到底代表什么高分模板展现细节掌控力flex: 1实际上是三个属性的缩写flex-grow: 1、flex-shrink: 1和flex-basis: 0%。flex-grow: 1表示如果有多余空间该空间如何分配。1 代表该项目将占据剩余空间的全部如果有多个 flex:1则平分。flex-shrink: 1表示如果空间不足该项目如何缩小。1 代表在空间不足时它会随着其他项目等比例缩小。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 设置较大的宽度你会看到四个三角形拼成的正方形。步骤如下设置元素的宽、高为 0。设置border宽度比如 50px。将不需要显示的三个边框颜色设为transparent透明。将需要显示的那个方向的边框设置具体的颜色。进阶优化如果是为了性能好或高保真现代开发中也可以考虑使用clip-path裁剪路径或者使用svg。但 border 方法兼容性最好是处理简单图标的首选。简答模板原理是利用 border。把元素的宽高设为 0然后给四个边框设置宽度并将其中三个边的颜色设为透明transparent只保留一个边的颜色就能得出一个三角形。这种方法兼容性最好。问题 4px、em、rem、vw/vh 的区别简答模板对比表格单位描述参考基准适用场景px物理像素绝对长度固定尺寸、边框em相对单位当前元素的font-size按钮内边距、行高rem相对单位根元素 (html)的font-size移动端响应式布局vw/vh视口单位屏幕视口宽度的 1% / 高度 1%全屏布局、自适应缩放