本地的 Markdown 文件不方便管理图片，有的问题用图片要直观一些，所以在这里写一份。有很多细碎的知识点不方便时时记录，大多是记录我印象深刻的。
有的地方可能理解得不对，欢迎交流。
2016-05-06
- 设置两列表格的不同对齐方式：CSS Selector
- 调整确认提交按钮的高度：因为
body设置了padding，所以重新在此处将padding设小一些 -
table内部的线条样式：一直在table中改没有作用，最后发现应该在td改才行。 - input 框有的边无法完整显示——换了不同的浏览器，发现好像是 Chrome 是这样。可通过 border 属性设置。
2016-05-07
- 布局问题：用
position实现了
2016-05-08
- 用
float实现三栏式布局：宽度设置为百分比，否则浏览器大小变化时，无法适应。使用float时，若将width设置为固定 px ，则在浏览器大小变化的时候，无法确定为某种布局。float的出处是文字和图片的混排，在这方面的表现很好。
2016-05-14
- 清除浮动是什么？——看了清除浮动的文章，现在学到的是：设置为
float的元素脱离了文档流，从而在显示上会出现一些问题，比如说一个div内部都是float元素时，这个div内部相当于是没有元素，无法撑开，而清除浮动就是要解决这个问题，让其按照初始想法来显示。但是清除浮动这潭水很深，我看了 stackoverflow 上那篇很多赞的回答，仍然觉得理解不深，可能还是需要通过实践来学习。 - 实现直角扇形：应用
border-radius的属性，将其设置与宽度高度都相等，可以通过border-top-left-radius来同时设置两边的弧长。 - 居中问题：水平居中可以应用
margin的左右为 auto 来实现，但是垂直如何实现？
2016-05-15
- 回答昨天的居中问题——最开始我只会用
margin设置为auto来实现水平居中，但是现在的浏览器对top与bottom的auto并不支持，于是觉得要想实现垂直居中，需要获取父元素或者视的大小，这样通过计算便能够获得居中的位置。今天看了一篇解决办法，它用的是接近的思想，但是很巧妙，尝试思考放在笔记里去了。
2016-05-18
- footer 无法定位到页面底部，body 无法被里面的内容完全撑开：5.19 解决，见笔记问题导向部分。
2016-05-19
- 两列表格不同的对齐方式（5.6 的问题，看自己是否还记得）
- 文本的垂直居中
2016-05-28
-
border-width设置之后没有效果：这个只有在border的效果不是none时才有效。所以用语句border: 2px solid red;可以一句解决几个问题。
2016-06-03
- 找不到地方记录想要学习的问题，也记到这里来。HTML 语义化到底是指什么？我查了一下资料，有四点：标签化、便于 SEO、方便其他的设备解析和渲染、更具有可读性而便于维护。但是我觉得不止这么简单，还需要继续查阅学习。
2016-07-11
- 任务5中，浮动出现问题，期望效果：换行后另起一行，左对齐开始排列。实际：换行后第二行从右边开始，左侧腾空。
解决：因为我没有设置高度，导致第一行的最后一个元素的高度被压缩，本该在第二行的元素挤到了第一行末尾，看起来像是在换行后右对齐。设置了高度之后即解决。
![问题效果]
](http://upload-images.jianshu.io/upload_images/839636-ce43b15b75a9352d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
问题细节 - 段落间距具体指什么
line-height 减去 字体大小 = 行间距
2016-07-12
- 首行缩进 2 个字符
text-indent: 2em;
- slice
- push
主要在应用 CSS 的知识，所以没有遇到太大的问题。
2016-07-13
- click 事件绑定 DOM
- sort( function )
- 把引用 JavaScript 的标签写错，type="text/javascript"，漏写了 text，导致无法正确运行。
2016-07-14
事件代理机制解决了我的一个小问题，它有一个好处：
节省大量重复的事件监听，以减少浏览器资源消耗。还有一个好处就是让HTML独立起来，比如之后还有要加子元素的需求，也不需要再为其单独加事件监听了。
来源：事件机制 | 前端工程师手册
所以它有这样的应用场景，当需要绑定事件的元素是后期动态生成时，可以不必绑定每一个元素，而只需绑定其父元素。
具体实例：
需求：添加数据时，table中显示新加入的数据，每条数据后会有一个删除按钮，点击删除按钮可删除数据。
未使用事件代理机制的思路是：每新添加一条数据，就为该数据对应的按钮绑定一个监听事件。
使用事件代理机制的思路：为整个table绑定监听事件，点击时通过识别当前点击的目标元素，达到确认所需删除数据的目的。
在这种情况下，需要区分事件对象的两个属性：
currentTarget——指处理事件的元素，我理解为绑定了事件处理程序的元素，即实例中的table
target——指触发事件的目标节点，即实际上触发了事件的元素
2016-07-15
- error: document not defined
调试的过程中报了这样的错误，后来发现问题是，我在 Webstorm 中点击调试选择的是 js 文件，同时因为已经打开了一个浏览器预览 html 页面，但实际上调试 js 文件时获取不到相对应的 document 对象。
解决：调试的时候注意选择 html :)
- 一个疑问：
<label>选中<input type="radio" ></label>
这样写的时候，点击label中的文本也能选中相应的 radio，那么具体是怎么实现的呢，点击文本的时候发生了什么？内在的机制原理是什么？
（未解决的疑问，搜了一下没找着，任务完成以后回来阅读解决）
可参考：
Trigger Click on Input when Label is Clicked
Using “label for” on radio buttons
W3C 文档 H44: Using label elements to associate text labels with form controls
2016-07-16
- style 的定义有三种形式，分别涉及 HTML CSS JS。
- for in —— 循环枚举对象的属性，很有用。
2016-07-17
- style.height
我发现在 JavaScript 里面操作元素样式时，如果直接赋值为数字，则会自动加上 px 的单位，我不知道这是不是其默认值，但是解决了一些麻烦。比如我当我需要将值进行运算的时候，直接用数值将会方便很多。
查了一下书：
在标准模式下所有度量值都必须指定一个度量单位。
混杂模式下将style.width设为“20”，浏览器会假设它是“20px”；
但在标准模式下，这样设置会因为没有度量单位被忽略。
最好始终指定度量单位。
- switch
在 ECMAScript 中，每个 case 的值不一定是常量，可以是表达式。此时给 switch 传递参数 true，这样便能在 case 的表达式求值返回布尔值之后进行匹配。 - 字符串和对象不同
var dat = new Date("2016-01-01");——Date对象
var dat = "2016-01-01";——字符串
这两个语句得到的是不同的结果，所能进行的操作也不同。运用的时候注意。
2016-07-18
- 选择框（
select、option）的change事件与其他类型的触发条件有区别。
选择框的change事件： 在选中选项时触发事件；
其他表单元素的change事件： 在值被修改，且焦点离开当前字段的时候触发。
-
完成一个完整的交互功能，回顾反思一下。
最开始有点畏难情绪，于是分出块来写了个清单，一步一步的写。（函数）大致进行的思路和我印象深刻的点是：- 渲染基础图表：DOM2 级样式操作，
absolute定位+边距模拟柱状图，配色
- radio 事件绑定：click 事件，获取 target 属性
- 切换粒度的数据处理（按天的数据处理→按周计算周均值的处理→按月）：switch 处理，计算均值
- select 发生改变的事件绑定：change 事件
- 切换城市的数据处理。
其中比较有难度的部分是处理数据计算平均数的部分，借用 Date 的属性来遍历了所有原始数据，嵌套两层循环完成粒度上的分组。
按周的分组是以 7 天为内循环，按月的分组则是利用
date.setMonth()设定相差一月的起始日期来进行内部循环。 - 渲染基础图表：DOM2 级样式操作，
2016-07-23
今天一直在研究一个问题，现在有了一点眉目，但是具体的还是需要明天再研究。
问题很简单，在做冒泡排序的可视化时，使用 JavaScript 修改 CSS 样式无法实现一步步变化的效果。
最开始我以为是运行太快所以看不见，想通过写 sleep 函数来实现延迟，但实际运行时，仍然是中间运行过程很漫长，最后直接显示最终结果。
之后了解了浏览器的渲染原理，才发现浏览器会积攒很多次操作后才统一渲染。
还有很多文章觉得应该好好看一看：
- 浏览器渲染 | 前端工程师手册——参考资料值得读（另外发现这个前端工程师手册的一个小细节很棒，会自动在你读过的页面后标记绿色对勾，很有意思，让人有种打怪升级的感觉）
-
关于JS动态修改CSS样式问题（class和style）——这篇文章仅仅列举了两种修改方式，总结不完全，一种是替换 className，另一种是直接访问
.style进行修改。 - CSS 对比 JavaScript 动画 | Google Developers——动画方面的问题，我觉得这是一种解决思路，用动画效果来实现延迟。也顺便实现我最初的设想。
- 求索：GSAP的动画快于jQuery吗？为何？ | SegmentFault——了解一下具体的动画效果的评估指标，使用 Chrome 中的 Timeline 查看 scripting， rendering， painting， loading 等所用的时间以及所占的比例，渲染时的 fps。作者的思路是写不同的测试来试验比较其性能。
其他：另外看文章的时候看到了 D3.js 更新了 4.0 版本，去逛了逛实例，好美！
2016-07-24
浏览器的渲染
浏览器的渲染线程和 JS 的执行线程是互斥的，JavaScript 默认是阻塞加载。—— JavaScript的加载与执行 | 前端工程师手册
这也是上面所述问题中网页出现假死的原因，当 JS 脚本在执行的时候，无法渲染新修改的样式，所以只能显示出最终的结果。
我目前的疑问：要用 requestAnimationFrame 来实现的话，那么它会和 JS 的执行有冲突吗？我希望实现在循环内部进行 repaint。
看了很多资料……requestAnimationFrame， 浏览器原理， 以及这篇精读了很久的文章 Javascript高性能动画与页面渲染（主要因为文章里又有很多外链的文章）。然后我意识到了一个问题，我一直在看原理，虽然有勾画思考，但吸收的效率仍然很低。还不如边看边做 Demo 来验证想法和文章思路。今后改进学习方法。
另外，我遇到问题的直接反应是去搜相关原理，觉得弄明白基础运作原理之后，便能更明白如何使用。而另一种思路是，搜一搜这个问题，看看别人的思考方式和过程，作为扩宽思路的参考。在学习研究阶段采取前一种方法无可厚非，但后者也可以适当地试一试。
例如我换了搜索关键词的时候：
用js实现快排加演示-js排程初探
JS异步阻塞的迷思
2016-07-29
Sorting Algorithms Animations
Data Structure Visualizations —— 可视化的数据结构和算法 | 酷壳的翻译
比较排序
可视化排序-参照
D3 Tutorials
JavaScript异步代码排程策略
