编写高质量前端代码——HTML&CSS篇
最近刚读完《编写高质量代码——Web前端开发修炼之道》，赶紧总结巩固下记忆，也方便平时查阅。
1、结构、样式和行为分离
这个不用多说，现在也是这样编码的。在此基础上，还要做到精简、重用、有序。用更少的代码实现更多功能，避免重复编码，经常用的方法写成公共插件，注意代码逻辑。
2、table布局与CSS布局
与table布局相比，CSS布局具有代码量少、结构精简、语义清晰等优点。代码量少，浏览器端的下载时间就会更短，语义清晰就会对搜索引擎更友好。
3、标签语义化
调试标签语义良好工具——Firefox插件Web Developer。
不要所有的标签都用div，只有当页面内标签无法满足设计需要时，才会适当添加div和span等无语义标签来辅助实现。
表单语义化：表单域要用fieldset标签包起来，并用legend标签说明表单的用途。就像input要有对应的label，table要有caption、thead、tbody、tfoot一样清晰语义。
4、高质量的CSS
tip1.模块与模块之间尽量不要包含相同的部分，如果有相同的部分，应将它们提取出来，拆分成一个独立的模块。
tip2.类的公共部分越少，类就越容易维护，尽 量将属性和方法设计成私有的。
tip3.多用组合，少用继承。用组合的方式可以大大减少类的数量。
CSS reset和通用原子类要写在base.css里面。原子类用于组合样式，常用css重置代码：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after { content:'';}
abbr,acronym {border:0;}
5、解决IE6双边距bug
,fl和.fr这两个类在设置float:left/right之外，还设置display:inline，可以避免挂浮动类时引入bug。
6、css命名
“骆驼命名法”用于区别不同单词，“划线”用于表明从属关系。
7、特殊样式margin
相邻的margin-left和margin-right不会重合，但相邻的margin-top和margin-bottom会产生重合。所以最好统一只使用margin-top或者margin-bottom，不要混合使用。margin不要写到模块的类里，而是使用类的组合。
8、CSS的权重
HTML标签的权重是1，class的权重是10，id的权重是100。
如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就采用哪个选择符的样式。
CSS选择符的权重要尽可能低，所以尽量不要使用子选择器，除非确定HTML结构十分稳定。
9、CSS Sprite（图片翻转技术）
图片翻转技术将多张图片合并为一张，然后利用background-position属性来展示需要的部分。CSS Sprite技术的好处在于，解决等待加载图片时背景图片出现空白的问题，以及将多张图片合并成一张大图，会大大减少网页的HTTP请求数，减小服务器压力。
CSS Sprite的坏处在于，降低了开发效率（需要精确测量坐标）和增大维护难度（改动一个小图可能会影响到周围的图片）。
10、CSS hack
（1）IE条件注释法
（2）选择符前缀法
在CSS选择符前加一些只有特定浏览器才能识别的前缀，例如“*html”前缀只对IE6生效，“*+html”前缀只对IE7生效。
（3）样式属性前缀法
| hack | 示例 | IE6(S) | IE6(Q) | IE7(S) | IE7(Q) | IE8(S) | IE8(Q) |
| * | *color | Yes | Yes | Yes | Yes | No | Yes |
| + | +color | Yes | Yes | Yes | Yes | No | Yes |
| - | -color | Yes | Yes | No | No | No | No |
| _ | _color | Yes | Yes | No | Yes | No | Yes |
| # | #color | Yes | Yes | Yes | Yes | No | Yes |
| \0 | color\0 | No | No | No | No | Yes | No |
| \9 | color\9 | Yes | Yes | Yes | Yes | Yes | Yes |
| !important | color:blue !important;color:green; | No | No | Yes | No | Yes | No |
11、解决超链接访问后hover样式不出现的问题
关于a标签的四种状态的排序问题，遵守l（link）ov（visited）eh（hate）a（avcive）te原则。
12、hasLayout
CSS在IE下的解析十分奇怪，例如设置border时有时候border会断开，刷新页面或者滚动滚动条的时候，断掉的部分又会连接起来。这些诡异的问题往往与IE下的hasLayout属性有关。hasLayout是IE浏览器专有的一个属性，bug原因可能与hasLayout没有被自动触发有关。hasLayout可以通过设置width、height、position:relative等触发，而最好的方法是设置zoom:1。zoom是最常用、最安全、成本最小的触发方式。如果在很特殊的情况下，zoom:1无效，可以通过设置position:relative来触发hasLayout。
13、块级元素和行内元素
块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度，行内元素不会独占一行，襄铃的行内元素会排列在同一行里，知道一行排不下才会换行。
块级元素及时设置了宽度，仍然是独占一行。
行内元素的margin和padding属性，在水平方向会产生边距效果，但在垂直方向设置padding-top/padding-bottom/margin-top/margin-bottom不会有效果。
关于display属性，块级元素对应于block，行内元素对应inline。因此可以通过修改diaplay来切换块级元素和行内元素。
hasLayout是IE为解析盒模型而设计的一个专有属性，它的设计初衷是用于块级元素的，如果触发行内元素的hasLayout，就会让行内元素拥有块级元素的特性。
14、relative、absolute、float
文档流：元素根据自己的display类型、长宽、内外边距等属性顺序排列在z-index：0这一层里。
只要设置了position:absolute、float:left、float:right中任意一个，都会改变元素的display属性为inline-block。
15、竖直居中
vertical-align只有当父元素为td或th才生效，在firefox和IE8下，可以设置diaplay:table-cell来激活vertical-align属性，对于不支持的IE6和IE7使用特定格式的hack，比如.vertical{*position:absolute;*top:-50%;}。
16、z-index
z轴在元素设置position:relative/absolute后激活，z-index可以为负数。
多个元素位置重叠的效果，除了z-index，还可以通过设置负边距是元素位置发生重叠margin-top:-50px。