之前写过两篇开发中遇到的问题和解决方案。当时是 CSS 和 JavaScript 分开写的。现在写这篇文章的时候感觉很多内容都是有内在联系的，所以不好分开。

给大家分享一下这半年来的感受吧：

知道和理解之间是有很大距离的。别人谈到一个知识点，能接上嘴并且能发表一下自己的意见，这叫知道。遇到问题能够想到用什么知识点解决问题，这叫理解。

所以有很多知识点自己确实在书上都看到过但是在平时遇到问题的时候却不知道怎么去用或者说想到去用，有时候会有同事给一下指导说用什么解决问题。关键时候还是多看（看书，看别人的代码）和多用。

1.display:none; 和 visibility:hidden;的区别

display:none 关闭一个元素的显示（对布局没有影响）；其所有后代元素都也被会被关闭显示。文档渲染时，该元素如同不存在。（不会显示在文档流中的位置，但是 DOM 节点仍会出现在文档流中）
visibility:hidden visibility属性让你能够控制一个图形元素的可见性,但是仍会占用显示时候在文档流中的位置。

使用 display:none 的时候虽然元素不会显示，但是DOM 节点仍会出现，所以我们就可以使用选择器对该元素进行操作。如下图中的示例：

2.事件冒泡引发的问题

这个问题是发生在自己上篇文章《h5端呼起摄像头扫描二维码并解析》中的。详细的代码可以看那篇文章。

问题发生的场景

先看一段html 代码：

之前我的想法是这个样子的：
1.我先触发qr-btn的 click 事件，在回调中触发 input 的click 事件click 事件
2.然后触发input 的 change 事件,获取上传图片的信息。

按照我的思路代码应该是下面的这个样子的

上面的代码，按照正常的思路应该是没有问题的，但是，在实际的运行过程中却发生了问题。浏览器的报错信息如下：

这是因为堆栈溢出的问题。那么为什么会出现这样的问题呢？我把断点打在了以下的位置，然后点击子元素

发生的情况是：代码无限次的触发$('.qr-btn').bind(...) ,就出现了上面的报错信息。那么是什么原因导致的呢？
思考一下发现：是因为事件冒泡的问题。我单击父元素触发子元素的click 事件，子元素的 click 事件又冒泡到父元素上，触发父元素的 click 事件，然后父元素再次触发了子元素的 click 事件，这就造成了事件的循环。

问题解决办法：

尝试阻止事件的冒泡，看能够解决问题？
那我们尝试在触发子元素的click的时候，尝试组织子元素的冒泡，看能否解决我的问题？添加如下的代码：

经过我的测试，代码是能够正常的运行的。

那么我们有没有更好的方法来解决上面的问题呢？请看接下来的内容

3.lable标签的 for 属性

先来看 lable 标签的定义:

 标签为input元素定义标注（标记）。
label元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
 标签的for属性应当与相关元素的 id 属性相同。

看想一下 w3school 的示例代码和效果：

效果如下图：

到这里应该之道我们该怎么改进我们的代码了，

除了 lable 标签的样式我们自己需要自己定义外，还有两个优点：

• 减少了 JavaScript 的书写；
• lable 标签和 input 标签没有必要是包含关系

4.“弹层盒”布局和普通盒模型布局的优缺点对比

最近做了一个抽奖的活动，其中就有一个轮盘的旋转的动画效果（注意啦，中间的那个卡顿是 gif 图片又重新开始播放了）。，效果如下图：

关于动画实现在下一篇文章中会继续介绍，这里主要来关注下布局的问题。因为我们页面会在 pc 和移动移动各出一套。所以在 pc 和移动我分别用了两种方案，pc 传统布局实现，h5 “弹性盒”实现。

1.弹性盒实现九宫格

外围的那些灯是使用绝对定位来做的，就不过过多的介绍，主要的是看中间的奖品九宫格的部分。html 代码如下：