CSS盒模型的几种模式

# 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 的时候

– 说的很复杂,其实就是边距重叠,一般外边距不重叠以最大为准,内边距重叠以最大为准,内外边距同时存在时可能重叠,效果根据模型不同会产生变化,具体可以写代码看看效果