前端面试题整理之CSS篇
整理关于前端面试中
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
文档重绘
这个和浏览器的工作机制相关。
上图来自渲染树构建、布局及绘制
参考这片文章
offsetWidth,clientWidth,scrollWidth
Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
参考示例 Jsfiddle