前言
这两周参加公司的新项目，采用封闭式开发 (项目成员在会议室里开发)，晚上加班到很晚，所以没时间和精力写原创博客了，今天就分享下这篇《编写高质量代码－－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方式显示：可以设置宽高，默认宽带并不占满父元素。
居中
(1) 文本、图片等行内元素的水平居中：给父元素设置 text-align: center
(2) 确定宽度的块级元素的水平居中：给元素设置 margin-left: auto 和 margin-right: auto
(3) 不确定宽度的块级元素的水平居中：
I. 使用table包裹，并给table设置margin: 0 auto; 优点：做法巧妙。缺点：增加了无语义标签，加深了标签的嵌套层数
II. 使用display: inline/inline-block; 优点：简单明了，结构清晰。缺点：使用inline后变成了行内元素，缺少了某些特性，如：width, hieght…
III. 使用position: relative，给父元素设置float、position:relative和left:50%，子元素设置position:relative和left:-50%。 优点：结构清晰。缺点：position:relative会带来一些副作用。
(1) 父元素高度不确定的文本、图片、块级元素的垂直居中：给父容器设置相同的上下内边距实现。
(2) 父元素高度确定的单行文本的垂直居中：line-height: 父元素高度。
(3) 父元素高度确定的多行文本、图片、块级元素垂直居中：
I. 使用table包裹，缺点：添加了无语义标签，增加了嵌套层数。
II. 对支持 display: table-cell 的IE8 和 firefox 用 display: table-cell 和 vertical-align: middle 来实现居中，对不支持的IE6-7，使用特定格式的hack：给父子两层元素分别设置{ *position: absolute; *top: 50% }和{ *position: relative; *top: -50% }来实现居中。缺点：使用来hack不利于维护，设置position: relative; position: absolute; 带来一些副作用。
网格布局
无论sidebar和main在样式上谁左谁右，在html标签上要保证main的标签在sidebar之前被加载。
只在最外层的容器给定具体宽度，所有其他容器的宽度均用百分比设置 ?? 网格布局。
z-index
z 轴在元素设置position为absolute或relative后被激活。
设置负边距可以让相邻元素的位置产生重叠，谁浮在上面，取决于html标签出现的先后，后出现的标签浮于先出现的标签之上。
IE6下的select遮挡问题，可使用同样大小的iframe遮住select。
为避免组件的上下外边距重合问题和IE的hasLaout引发的Bug，各模块除特殊需求，一律采用margin-top设置上下外边距。
Javascript