前端面试题整理之CSS篇（不定期更新）

一、BFC

1、什么是BFC

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。容器内的内容不受外部布局影响，同样也不会影响到外部的布局

2、BFC的特性

1. 内部的box会在垂直方向，一个接一个的放置；
2. box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠；
3. bfc的区域不会与浮动区域的box重叠；
4. bfc是一个页面上的独立的容器，外面的元素不会影响bfc里的元素，里面的也不会影响外面的；
5. 计算bfc高度的时候，浮动元素也会参与计算。

3、如何形成BFC

1. float: left|right;（脱离文档流）；
2. position: absolute｜fixed;（脱离文档流）；
3. display:inline-block｜table-cell｜flex;
4. overflow:hidden｜auto｜scroll

4、BFC的应用场景，解决什么问题

防止垂直外边距重叠 同一个 BFC 的两个相邻 Box 的 margin 会发生重叠，将其中一个Box变成BFC即可解决问题 清除浮动 容器内部有浮动元素时，容器高度无法撑开，将容器变成BFC，即可撑开高度

二、盒模型

1、两种盒模型

标准盒子模型：width = 内容宽度（content）

IE盒子模型： width = 内容宽度（content + border + padding

2、盒模型设置

box-sizing:content-box(标准盒模型) ｜border-box(IE盒模型); 默认值content-box;