小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
两个span之前的默认间距
（1）原因分析：内联元素在html中换行的同时会产生一个文本节点
（2）解决办法：将父元素的font-size设置为0；分别设置子元素的字体大小
图片底部空白间隙
详细分析文章：彻底搞定 vertical-align 垂直居中不起作用疑难杂症
（1）原因分析
图片后存在一个看不见的空白节点，这个特殊的空白节点与普通文节点一样，具有文字大小，行高
默认情况下，图片的对齐方式是以父级元素基线对齐，为了保持与基线对齐，图片底部必须留出间隙，大小为半倍文本间距，即(line-height - font-size) / 2，所以line-height 的值越大，间隙将越大
（2）解决办法
- 将图片设置为 display:block
- 将 vertical-align 设置为 top，bottom，或者 middle 等值
- 将 line-height 设置为 0
- 将 font-size 设置为 0
- 将 img 设置浮动或者绝对定位
定位失效问题
absolute 绝对定位失效：绝对定位相对于最近的非 static 元素定位，如果不存在这样的元素时，会相对于根元素定位，造成定位失效
fixed定位失效：父元素有 transform 样式
BFC(块级格式化上下文)
描述：具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会影响外面的元素，外面的也不会影响里面的
独特特性：
- 内部元素在垂直方向上一个接一个地排列
- 两个盒子之间的垂直距离由 margin 值决定，会发生重叠（
两个BFC，解决margin重叠的问题） - 每一个盒子的左外边缘会挨着容器的左边缘，存在浮动也是如此
- BFC 区域不会与 float 区域重叠，可以阻止元素被浮动元素覆盖（实现
左边的宽度固定，右边的内容自适应布局） - BFC 就是一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
- 计算 BFC 的高度时，浮动元素也参与计算（
清除浮动，解决浮动元素造成的父元素高度塌陷问题）
触发条件：只要元素满足下面任一条件即可触发 BFC 特性
- body 根元素
- 浮动元素：float 除 none 以外的值
- 绝对定位元素：position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
水平垂直居中
-
flex 布局：justify-content: center;align-items: center;
-
absolute 绝对定位：position: absolute; top: 50%; left: 50%;
- transform: translate(-50%, -50%);
- width: 50px; height: 10px;margin-left: -25px;margin-top: -5px;
- left: 0;top: 0;right: 0;bottom: 0;margin: auto;
-
grid 布局：
- div.parent{ display:grid; } div.child{ margin:auto; }
- div.parent {display: grid;} div.child {justify-self: center;align-self: center;}
-
table 布局：
- div.parent {display: table;} div.child {display: table-cell;vertical-align: middle;text-align: center;}
-
其他方式居中
- 行内元素水平居中： text-align:center;
- 块元素水平居中： margin:0 auto;
- 单行文字垂直居中： height:12 px; line-height:12 px;
- 文字相对图片、输入框垂直居中： vertical-align:middle;
- 单行文本垂直居中： text-align + line-height
常用错误监控方式
- try/catch：能捕获常规运行时错误，语法错误和异步错误不行
- window.onerror：JS 运行时错误，不能捕获资源错误
- window.addEventListener('error')：捕获资源（如图片或脚本）加载失败的错误
- window.addEventListener("unhandledrejection")：全局捕获Promise中的错误
- vue错误：errorHandler，errorCaptured
- 重写console.error，具体可看搭建前端监控系统
参考文档：一篇讲透自研的前端错误监控
