前端面试必知：CSS盒模型、BFC与层叠上下文详解

前端面试复习篇是针对准备前端开发者求职面试的重要参考资料，该部分主要涵盖了CSS基础知识及其在实际开发中的应用。以下是一些关键知识点的详细解释： 1. **CSS盒模型**： CSS盒模型定义了网页元素在渲染时的尺寸计算方式，主要有三种模型：W3C标准盒模型（content-box），IE盒模型（border-box），以及padding-box。content-box模型下，元素的总宽度和高度由content（内容区域）决定，边框和内边距会增加到总尺寸；而在border-box模型中，元素的实际宽度和高度已经包含了边框和内边距。理解并掌握这些概念有助于处理元素大小和布局问题。 2. **BFC（块级格式化上下文）**： BFC是一个独立的渲染区域，有助于控制元素间的间距和布局。它有以下特点： - IE下通过设置`zoom:1`可触发BFC。 - 触发条件包括根元素、绝对定位、`inline-block`、`table`、浮动元素以及`overflow`不等于`visible`的元素。 - BFC的子元素margin会在垂直方向上与父BFC边界重叠，但不会与其他BFC内的元素重叠。 - BFC常用于解决布局问题，如防止外边距溢出，实现自适应两栏布局，以及确保元素不被浮动元素覆盖。 3. **层叠上下文（CSS Layout）**： 层叠上下文涉及元素在三维空间中的堆叠顺序。触发层叠上下文的方式包括： - HTML根元素 - 使用`position`属性（如`absolute`或`fixed`) - CSS3属性（如`flex`, `transform`, `opacity`, `filter`, `will-change`, 和 `-webkit-overflow-scrolling`) - 层叠等级在同层叠上下文中才有意义，`z-index`用于设置元素在堆叠顺序中的优先级。 4. **居中布局**： - 水平居中：行内元素使用`text-align:center`，块级元素则可以使用`margin:0 auto`来实现自动居中。另外，还可以利用`absolute`和`transform`配合，或者在flex布局中通过`justify-content:center`来实现。 - 垂直居中：针对不同情况，可能需要不同的技巧，例如Flexbox中的`align-items`属性，或者使用CSS Grid的`align-self`，以及特定的JavaScript方法。 在前端面试中，面试官可能会围绕这些知识点提问，考察应聘者的理论基础、实践经验以及问题解决能力。复习这些内容不仅有助于提升面试表现，也是日常开发中提高页面布局质量和性能的关键。