盒子模型

在css中，所有元素都被一个盒子box包围着，理解这些盒子的基本原理，是我们使用css实现准确布局、处理元素排列的关键。

块级盒子block box和内联盒子inline box

块级盒子和内联盒子在页面流和元素之间的关系方面表现出不同的行为。

块级盒子表现一下行为：

盒子会在内联方向上占据父容器的所有空间，绝大多数和父容器一样的宽；
每个盒子会换行；
width和height属性可以发挥作用；
内边距，外边距和边框会将其他元素从当前盒子周围推开。

内联盒子表现一下行为：

盒子不会换行；
width和height属性将不起作用；
垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开；
水平方向的内边距、外边距以及边框会被应用且会把其他处于inline状态的盒子推开。

内部和外部显示类型

css的box模型有一个外部显示类型，来决定盒子是块级还是内联的，同样还有内部显示类型，决定了盒子内部元素是如何布局的。

但是我们可以通过类似flex的display属性来更改内部显示类型。若设置display：flex，元素的外部类型是block，但是内部显示类型是flex。

标准模型和怪异模型

盒子模型的认识

基本概念：标准模型，怪异模型
标准模型和怪异模型的区别
css如何获取这两张模型的宽和高
js如何获取盒子模型对应的宽和高
BFC（边距重叠解决方案，还有IFC）解决边距重叠

一、基本概念

什么是盒子模型：盒模型又称框模型，包含了元素内容content、内边距padding、边框border、外边距margin。

二、标准模型和IE模型的区别

标准模型和IE模型的区别在于内容区的计算方式不同。

IE模型：宽度width = content + padding + border

css-标准盒子.png

标准模型：宽度width = content

css-怪异盒子.png

三、css如何设置获取这两种模型的宽和高

通过css3新增的属性 box-sizing: content-box | border-box分别设置盒模型为标准模型和IE模型。

标准模型，width = content

IE模型，width = content + 2padding + 2border

四、JavaScript如何获取盒模型对应的宽和高

dom.style.width/height只能取到行内样式的宽和高，style标签中和link外链的样式获取不到。
dom.currentStyle.width/height取到的是最终渲染后的宽和高，只有IE支持此属性。
window.getComputedStyle(dom).width/height也是得到渲染后的宽和高，大多数浏览器支持。IE9以上支持，此外，还可以取到相对视框的上下左右距离。

五、外边距重叠

当两个BFC的垂直外边距相遇时，合并后的外边距等于其一外边距的最大值。

注意：只有普通文档流才发生外边距合并，行内、浮动或绝对定位之间的外边距不会合并。

css-外边距重叠.png

六、BFC

BFC（Block Formatting Context）:块级格式化上下文。

BFC原理（渲染规则）

BFC元素垂直方向的边距会发生重叠，属于不同BFC的外边距不会发生重叠。
BFC的区域不会与浮动元素的布局重叠。
BFC元素是个独立的容器，外面的元素不会影响里面元素，里面元素也不影响外面元素。
计算BFC高度时，浮动元素也会参与计算。

如何创建BFC

overflow不为visible；
float不为none
position的值不为static或relative
display属性为inline-blocks, table,table-cell,table-caption,flex,inline-flex

Css盒子模型