前端面试题整理之CSS篇

发表于 更新于 分类于 Disqus： 本文字数： 803 阅读时长 ≈ 1 分钟

整理关于前端面试中CSS相关的面试题

清除浮动
来源

一般老项目比较多应用 float 属性来布局，应用了此属性之后，这个元素就脱离文档流了，而周围的元素会重新排列，所有就会出现浮动元素盖住了后面的元素的情况，这时候造成的布局一般不是我们想要的，所以往往要清除浮动.

清除方法
  • 通过给末尾元素应用clear: both 来清除浮动
  • 通过给父元素应用overflow: auto 来清除浮动(不建议使用)
  • 通过给父元素 :after 伪元素应用clear: both 来清除浮动(推荐)

其中，1 和 3 是一样的原理，通过新增一个块级元素让他紧跟上一个浮动元素(应用clear)达到清除的目的

BFC

BFC(Block Formatting Context),即块级格式化上下文；
相似的定义还有

  • IFC (Inline Formatting Context) 行内格式化上下文
  • FFC (Flex Formatting Context) 弹性格式化上下文
  • GFC (Grid Formatting Context) 格栅格式化上下文

简单来说就是划分了一个块级区域，垂直方向挨个排列，盒子内与盒子外不干预。

如何创建 BFC
  • 一些块级元素，如 html, p, div 等
  • 设置浮动
  • 设置定位 absolute 或者 fixed
  • 设置成块级的非块级元素 display: inline-block|table-cell|table-caption|flex|inline-flex|grid|inline-grid
文档重绘

这个和浏览器的工作机制相关。

将 DOM 与 CSSOM 合并以形成渲染树

上图来自渲染树构建、布局及绘制

参考这片文章

offsetWidth，clientWidth，scrollWidth

Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

参考示例 Jsfiddle