盒模型

1. 标准盒模型、IE盒模型

   /* 设置当前盒子为 标准盒模型（默认） */
   box-sizing: content-box;
   
   /* 设置当前盒子为 IE盒模型 */
   box-sizing: border-box;
   

   • 标准盒模型：width 和 height 指的是内容区域的宽度和高度，增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。
   • IE盒模型：width 和 height 指的是内容区域+border+padding的宽度和高度

2. JS设置、获取盒模型对应的宽和高

   • 通用型：window.getComputedStyle(element).width/height
   • 通过DOM节点的style样式获取：element.style.width/height
     • 只能获取行内样式
   • IE独有：element.currentStyle.width/height
   • 获取一个元素的绝对位置：element.getBoundingClientRect().width/height
     • 绝对位置是视窗 viewport 左上角的绝对位置。
     • 可以拿到四个属性：left、top、width、height。

3. margin塌陷/重叠

   • 标准文档流中，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象，父盒子没有文字、border、padding-top)。
     • 方案一：父元素添加 border 属性
     • 方案二：给父元素 overflow:hidden （BFC区域是一个独立的区域，不会影响外面的元素）

4. BFC 块级格式上下文（边距重叠解决方案）

   BFC 的原理，其实也就是 BFC 的渲染规则

   • BFC 内部的子元素，在垂直方向，边距会发生重叠。
   • BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。
   • BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）
   • 计算BFC的高度时，浮动的子元素也参与计算。

   如何生成BFC

   • overflow不为visible，可以让属性是 hidden、auto。
   • 浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。
   • 只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。
   • display为inline-block, table-cell, table-caption, flex, inline-flex

   BFC的应用

   • 解决 margin 重叠
   • BFC区域不与float区域重叠
   • 清除浮动，解决父亲高度消失
     • 给父亲设置高度
     • 给父亲增加 overflow:hidden （计算BFC的高度时，浮动元素也参与计算（第4点），即在计算BFC的高度时，子元素的float box也会参与计算）

页面布局

• 浮动
  • 优点：兼容性好。
  • 缺点：浮动会脱离标准文档流，因此要清除浮动。
• 绝对/相对定位
  • 优点：快捷
  • 缺点：致子元素也脱离了标准文档流，可实用性差。
• flex弹性盒子布局
  • 优点：flex布局比较完美，解决了上面两个方法的不足，多用于移动端。
  • 缺点：CSS3新属性，兼容问题
• table表格布局
  • 优点：兼容性好
  • 缺点：子元素会被当做单元格处理，其中一个高度变化会影响到其他一起变化。性能上单个单元格变化会引起整个table重绘。
• grid表格布局
  • 优点：代码简化，按比例适配
  • 缺点：CSS3新属性