前端盒模型知识要点

作为前端开发最重要的一部分，CSS盒模型知识内容是必须掌握的熟知的。一般的对于这个知识点，我们需要掌握如下内容：

• 基本概念：标准模型+IE模型
• 两种模型的区别
• 如何设置启用两种模型
• JS如何获取对应盒模型的宽/高
• 什么是边距重叠
• 边距重叠解决方法(BFC、IFC)

基本概念及区别讲解

由于浏览器内核的不同及早期规则的差异，CSS中出现了两个盒模型( W3C标准模型、IE模型 )，现在主流的新版浏览器统一采用W3C标准模型

W3C 盒子模型的范围包括 margin、border、padding、content，但是盒模型的宽高值为content部分的宽高，不包含其他部分。

而IE模型则与标准模型有着明显的区别，IE模型将盒模型的padding和border统一归化为宽高的一部分：

两种模型设置方法

标准模型：box-sizing: content-box( 默认 )
IE模型：box-sizing: border-box

EG: 对于作者而言，比较顺手的是IE模型，将padding和border纳入宽高额外的考虑范围在有些时候会增加布局难度。

JS获取盒模型宽高的多种方法及比较

• 只能取得盒模型的内联宽/高样式

	dom.style.width/height  //只能取得盒模型的内联宽/高样式

• 取得盒模型渲染之后呈献的宽高(只有IE浏览器支持)

	dom.currentStyle.width/height  //取得盒模型渲染之后呈献的宽高(只有IE浏览器支持)

• 兼容性、通用性强兼容性、通用性强

	window.getComputedStyle(dom).width/height  //兼容性、通用性强

• 获取盒模型的距视窗左定点的绝对位置

	dom.getBoundingClientRect().width/height  //中间的API用于获取盒模型的距视窗左定点的绝对位置，单纯调用获取盒模型的top、left、width、height

相对于盒模型获得元素宽高的方法，还有一些常用的页面宽高获取操作，诸如以下列出的内容：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

边距重叠介绍讲解

Collapsing margins,即外边距重叠,指的是毗邻的两个或多个普通流中的块元素垂直方向山的外边距会合并为一个外边距.

其中所说的margin毗邻可以归结为以下两点:

• 这两个或多个边距没有被非空内容,padding,border或clear分隔开
• 这些margin都处于普通文档流中

• **EG: 在没有被分割开的情况下,一个元素的margin-top会和它普通流第一个元素的margin-top相邻,只有在一个元素的height是'auto'的情况下,他的margin-bottom才会和它普通流中的最后一个元素(非浮动元素等)的margin-bottom相邻.**( 引用自：https://segmentfault.com/a/1190000010986850 )
  

通俗的说，就是两个或多个块级盒子的垂直相邻边界会重合。结果显示的边界高度是相邻边界高度中最大的值。如果出现负值边界，则在最大的正边界中减去绝对值最大的负边界。如果没有正边界，则从零中减去绝对值最大的负边界。

注意：相邻的盒子可能并非是由父子关系或同胞关系的元素生成。


但是边界的重叠也有例外的一些情况：

• 水平边距永远不会重合。
• 在规范文档中，2个或以上的块级盒模型相邻的垂直margin会重叠。最终的margin值计算方法如下：

a、全部都为正值，取最大者
b、不全是正值，则都取绝对值，然后用正值减去最大值
c、没有正值，则都取绝对值，然后用0减去最大值。
注意：相邻的盒模型可能由DOM元素动态产生并没有相邻或继承关系。

• 相邻的盒模型中，如果其中的一个是浮动的（float），垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也是这样。
• 设置了overflow属性的元素和它的子元素之间的margin不被重叠（overflow取值为visible除外）。
• 设置了绝对定位（position:absolute）的盒模型，垂直margin不会被重叠，并且和他们的子元素之间也是一样。
• 设置了display:inline-block的元素，垂直margin不会重叠，甚至和他们的子元素之间也是一样。
• 如果一个盒模型的上下margin相邻，这时它的margin可能重叠覆盖（collapse through）。在这种情况下，元素的位置（position）取决于它的相邻元素的margin是否重叠。

a、如果元素的margin和它的父元素的margin-top重叠在一起，盒模型border-top的边界定义和它的父元素相同。
b、另外，任意元素的父元素不参与margin的重叠，或者说只有父元素的margin-bottom是参与计算的。如果元素的border-top非零，那么元素的border-top边界位置和原来一样。


一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠。


注意，那些已经被重叠覆盖的元素的位置对其他已经重叠的元素的位置没有任何影响；只有在对这些元素的子元素定位时，border-top边界位置才是必需的。

• 根元素的垂直margin不会被重叠。
  
  

BFC介绍及使用方法

BFC (Block formatting context) “块级格式化上下文”

BFC的主要用途就是解决边距重叠现象带来的影响，从上面的边距重叠介绍中我们能够分析出来，BFC的触发方式如下：

【1】根元素，即HTML元素 　　
【2】float的值不为none 　　
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed

具体的边距重叠案例展示推荐阅读 https://blog.csdn.net/TWFKXP/article/details/80574987

至于IFC，作者这里就省略不多家描述，想要了解的话可以自行百度…

以上内容部分参考自网络，如有错误的地方，欢迎指出。