面试题：前端

前端工程师岗位相关的基础、框架、浏览器、性能和工程化面试准备。

CSS 盒模型是什么，content-box 和 border-box 有什么区别？

盒模型描述元素尺寸由 content、padding、border 和 margin 组成；content-box 与 border-box 的核心区别是 width 是否包含 padding 和 border。

三者都能让元素不可见，但它们对布局占位、渲染、事件命中和可访问性的影响不同。

position 决定元素是否脱离文档流、偏移相对谁计算，以及是否参与 sticky 或 fixed 这类特殊定位行为。

居中方案要根据元素尺寸是否已知、是否需要兼容旧浏览器、是一维还是二维布局来选择。

transition 适合状态变化之间的过渡，animation 适合基于 keyframes 的自主动画和多阶段动画。

伪类描述元素状态或结构位置，伪元素表示元素的一部分或生成内容；::before 和 ::after 常用于装饰、标记和辅助布局。

浮动元素脱离普通文档流会导致父元素高度塌陷，清除浮动的本质是让父元素重新包住浮动内容。

CSS 最终生效规则由来源、重要性、层叠层、选择器优先级和书写顺序共同决定，不能只看选择器写得长不长。

BFC 是块级格式化上下文，它让元素内部形成独立布局环境，常用于包含浮动、阻止 margin 塌陷和避免被浮动元素覆盖。

margin 塌陷是普通块级流中垂直外边距合并的现象，常发生在相邻块、父子块和空块之间。