前言
这两周参加公司的新项目，采用封闭式开发 (项目成员在会议室里开发)，晚上加班到很晚，所以没时间和精力写原创博客了，今天就分享下这篇《编写高质量代码－－Web前端开发修炼之道》读书笔记吧。
正文
欲精一行，必先通十行。
在前端开发这个领域，一专多能更是非常必要的。
table布局缺点：
css布局：div+css，或者(x)html+css。
代码量少、结构精简、语义清新。
代码量少，浏览器端下载时间就会更短；
语义清晰就会对搜索引擎更友好。
先确定html，确定语义的标签，再来选用合适的CSS。
浏览器会根据标签的语义给定一个默认定样式。
判断网页标签语义是否良好的一个简单方法就是：去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性。
测试下DevTool中有没有禁用网页中的CSS设置？测试下w3c官网去掉样式后的效果。
当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现。
table布局适合展示二维数据。
语义化标签应注意的一些其他问题：
对于文件过于分散和集中的问题并没有完美的解决方案，我们需要根据实际情况做些适当的折中。
css rest：
补充：
reset浏览器默认样式，推荐： https://github.com/necolas/normalize.css
拆分模块：
驼峰法用于区别单词，划线用于表明从属关系。例如：.timeList-lastItem。
学习这种风格的命名：
.fr { float: right; }
.w25 { width: 25%; }
多用组合，少用继承。
当样式设置有冲突时，会采用权重高的样式。
html标签的权重：1，class的权重：10，ID的权重：100.
当权重相同时，会采用最近定义原则。
为了保证样式容易被覆盖，提高可为维护性，css选择符的权重尽可能低。
css的hack方式通常是 选择符前缀法 和 样式属性前缀法。
标签的四种状态定义顺序，l( link )ov( visited )e h( hover )a( acitive )te，即love hate原则。
块级元素和行内元素：
hasLayout：
是IE浏览器为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有一些块级元素的特性。
display：inline-block
行内的块级元素，它有块级元素的特点：可设置宽高、margin和padding值，也有行内元素的特点：不独占一行。
会触发hasLayout。垂直方向的对齐，可设置形如 *vertical-align: -10px 来解决。
为了实现E6、IE7和其他浏览器都兼容display: inline-block，也存在一定问题：
虽然IE6和IE7不支持CSS设置为display: inline-block，但事实上IE6和IE7的CSS解析引擎还是有display: inline-block的，比如说img标签和button标签都具有display: inline-block的特性，可以设置宽高但却不独占一行。
float
会改变正常的文档流排列，影响到周围元素。
position: absolute 和 float: left或float: right 会隐式地改变display类型，不论之前是什么类型的元素(display: none除外)，都会让元素以display: inline-block方式显示：可以设置宽高，默认宽带并不占满父元素。
居中
网格布局
无论sidebar和main在样式上谁左谁右，在html标签上要保证main的标签在sidebar之前被加载。
只在最外层的容器给定具体宽度，所有其他容器的宽度均用百分比设置 ?? 网格布局。
z-index
z 轴在元素设置position为absolute或relative后被激活。
设置负边距可以让相邻元素的位置产生重叠，谁浮在上面，取决于html标签出现的先后，后出现的标签浮于先出现的标签之上。
IE6下的select遮挡问题，可使用同样大小的iframe遮住select。
为避免组件的上下外边距重合问题和IE的hasLaout引发的Bug，各模块除特殊需求，一律采用margin-top设置上下外边距。
Javascript
