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

参加杜瑶的分享：如何做一个更好的重构工程师，如何写更好的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页面，代价相对较小；