# CSS盒模型的几种模式
[引用:面试官:谈谈你对 CSS 盒模型的认识?(你确定会?)](https://segmentfault.com/a/1190000015235886)
[引用2:CSS盒模型详解](https://juejin.cn/post/6844903505983963143)
1. ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制
1. content-box(标准盒模型),默认值
2. border-box(IE盒模型)
1. 根据盒模型解释边距重叠
1. BFC(边距重叠解决方案)
### content-box(标准盒模型),默认值
>属性width,height只包含内容content,不包含border和padding。
<img src=”./images/content-box.png” alt=”标准模型示例图”>
### border-box(IE盒模型),默认值
>属性width,height包含border和padding,指的是content+padding+border。
<img src=”./images/border-box.png” alt=”IE模型示例图”>
### 边距重叠现象
>有两个元素其中子元素高度为100px,子元素与父元素的上边距为 10px,求父元素的实际高度?
### BFC(边距重叠解决方案)
– 基本概念,Block Formatting Context, 块级格式化上下文,一个独立的块级渲染区域,该区域拥有一套渲染规格来约束块级盒子的布局,且与区域外部无关。
– BFC 的原理
1. BFC 这个元素的垂直的边距会发生重叠
2. BFC 的区域不会与浮动元素的 float 重叠
3. 独立的容器,内外元素互不影响
4. 计算 BFC 高度,浮动元素也参与计算
– 如何创建 BFC
1. float 不为none的时候
2. position 不为 static 或者 relative 的时候
3. display 与 table 相关的时候
4. overflow 为auto, hidden 的时候
– 说的很复杂,其实就是边距重叠,一般外边距不重叠以最大为准,内边距重叠以最大为准,内外边距同时存在时可能重叠,效果根据模型不同会产生变化,具体可以写代码看看效果