如何做一个更好的重构工程师

参加杜瑶的分享：如何做一个更好的重构工程师，如何写更好的html/css
主要收获有：
（1）table：默认情况下，加载完最后一个单元格的内容才会去渲染整个表格，性能降低，所以建议使用table-layout:fixed
（2）图像热点，map标签：map可以通过name属性与图片的usemap属性关联，做到在一张图片上指定区域指定图形（包括多边形）指定大小可点击
（3）图片默认存在白边问题：平时我都是用img{display:block}来消除白边，今天知道治本之法为：将图片的对齐方式由默认的基线对齐改为其他方式即可
（4）”行内元素不能设置高与宽“，这句话是错的。行内置换元素拥有自己的外观，可以改变自己的外观。
（5）怪异盒模型，不止IE有，其他浏览器也会有
（6）line-height都是相对字体大小计算的，行高值有单位时，计算结果被继承；没有单位时，计算因子被继承
（7）一个浮动元素前面如果已经存在了行框，那么浮动元素的顶部会和行框的顶部对齐

1、doctype对文档页面的影响：告诉浏览器使用什么样的方式去解析、排版、渲染;

2、注意标签闭合，包括自闭合；

3、正确使用table，为了解决table的性能问题（需等到所有的table元素加载完，最后一个单元格内容才能决定整个table的样式），使用table-layout:fixed; 这样的table类似于常规的div；

4、标签的语义化，元素嵌套不能混乱，比如ul的子元素只有li,没有p 、div等；

5、目前所有的浏览器默认字号是16px，但是有部分标签自带有font-sise值，清楚这些元素不继承祖先元素的font-sise的方法：

h1,h2,……,p,div……{ font-size:100%;}

6、在图像映射的问题上，最方便实用的方法是利用 map与img 合作；

7、浮动float：4种常用的清除浮动的方法；

8、每个浏览器的怪异盒模型都不一样，我们需要加 doctype 规范使用标准盒模型；

9、line-height 陷阱：比如不同的单位，计算出来的值都是16px，但是继承下去的line-height 就不一定了，加单位的值被继承下去行高会叠加，而没有单位的不存在这个问题，但是使用的时候需要注意风险；

10、css选择器的优先级；

11、重排与重绘：重排代价高，成本大，需要回流重新计算值，而重绘不需要reload页面，代价相对较小；