开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情
css 盒子模型专题进阶
两种盒子模型
/* 设置当前盒子为 标准盒模型（默认） */
box-sizing: content-box;
/* 设置当前盒子为 IE盒模型 */
box-sizing: border-box;
备注：盒子默认为标准盒模型。 在 标准盒子模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
IE 盒子模型中，width 和 height 指的是内容区域+border+padding 的宽度和高度。
js 获取盒子的宽和高
方式一：通过 DOM 节点的 style 样式获取
element.style.width/height;
缺点：通过这种方式，只能获取行内样式，不能获取内嵌的样式和外链的样式。 这种方式有局限性，但应该了解。
方式二（通用型）
window.getComputedStyle(element).width/height;
方式二能兼容 Chrome、火狐。是通用型方式。
方式三（IE 独有的）
element.currentStyle.width/height;
和方式二相同，但这种方式只有 IE 独有。获取到的即时运行完之后的宽高（三种 css 样式都可以获取）。
方式四
element.getBoundingClientRect().width/height;
此 api 的作用是：获取一个元素的绝对位置。绝对位置是视窗 viewport 左上角的绝对位置。 此 api 可以拿到四个属性：left、top、width、height。
margin 塌陷和重叠
标准文档流中，竖直方向的 margin 不叠加，只取较大的值作为 margin(水平方向的 margin 是可以叠加的，即水平方向没有塌陷现象)。
PS：如果不在标准流，比如盒子都浮动了，那么两个盒子之间是没有 margin 重叠的现象的。
如果要表达父子之间的距离，我们一定要善于使用父亲的 padding，而不是儿子的 margin。
BFC
BFC（Block Formatting Context）：块级格式化上下文。你可以把它理解成一个独立的区域
BFC 的原理/BFC 的布局规则【非常重要】
BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：
（1）BFC 内部的子元素，在垂直方向，边距会发生重叠。 （2）BFC 在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。（稍后看举例 1） （3）BFC 区域不与旁边的 float box 区域重叠。（可以用来清除浮动带来的影响）。（稍后看举例 2） （4）计算 BFC 的高度时，浮动的子元素也参与计算。（稍后看举例 3）
如何生成 BFC 有以下几种方法： 方法 1：overflow: 不为 visible，可以让属性是 hidden、auto。【最常用】
方法 2：浮动中：float 的属性值不为 none。意思是，只要设置了浮动，当前元素就创建了 BFC。
方法 3：定位中：只要 posiiton 的值不是 static 或者是 relative 即可，可以是 absolute 或 fixed，也就生成了一个 BFC。
方法 4：display 为 inline-block, table-cell, table-caption, flex, inline-flex
W3C 对 BFC 的定义如下: 浮动元素和绝对定位元素，非块级盒子的块级容器(例如 inline-blocks, table- cells, 和 table-captions)，以及 overflow 值不为"visiable"的块级盒子，都会为他们的内容创建新的 BFC(Block Fromatting Context， 即块级格式上下文)。
一个 HTML 元素要创建 BFC，则满足下列的任意一个或多个条件即可: 下列方式会创建块格式化上下 文: 根元素() 浮动元素(元素的 float 不是 none) 绝对定位元素(元素的 position 为 absolute 或 fixed) 行内块元素(元素的 display 为 inline-block) 表格单元格(元素的 display 为 table-cell，HTML 表格单元格默认为该值) 表格标题(元素的 display 为 table-caption，HTML 表格标题默认为该值) 匿名表格单元格元素(元素的 display 为 table、table-row、 table-row-group、table-header- group、table-footer-group(分别是 HTML table、row、tbody、thead、tfoot 的默认属性)或 inline-table) overflow 值不为 visible 的块元素 -弹性元素(display 为 flex 或 inline-flex 元素的直接子元素) 网格元素(display 为 grid 或 inline-grid 元素的直接子元素) 等等。
BFC 渲染规则 (1)BFC 垂直方向边距重叠 (2)BFC 的区域不会与浮动元素的 box 重叠 (3)BFC 是一个独立的容器，外面的元素不会影响里面的元素 (4)计算 BFC 高度的时候浮动元素也会参与计算
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，点击查看活动详情
