如何定位样式相关的问题

最近做皮肤的开发，主要是样式，bug自然也是样式的bug。因为我只是把皮肤涉及到的样式拆出来管理，很多样式是用的之前的，所以定位问题比较慢。改了几个bug，有一些收获，总结一下。

从外到内

从父元素的角度看，子元素就是一个有一定宽高的盒子，里面有什么内容是不关心的，从html到文本、元素等叶子节点，可以构成一颗树，我们开发或者调试样式自然也要按照这个顺序来。捋清元素与元素的嵌套关系，样式与样式的层叠关系。一层一层的去分析，从外到内，一层一层的去书写和分析样式，先布局后内容，先调整像宽高、定位、margin、padding等布局相关的样式，之后再去调整修饰内容的样式，比如字体、背景之类的样式。。

比如这里文字和图片的间距，我开始就是没找到那里不对，后来我通过一层一层的分析，发现图片的位置是正确的，但文字的line-height应该调大一些。

这样一分析之后，哪一个间距是由哪几个元素的margin、padding、width、height组成的，一目了然。层次很清晰。

先布局后内容

还有这里也是一样，要修改的地方有间距，高度，文字和边框颜色等，开始有些不知道从哪开始，后来想明白之后就先改了宽高和间距的样式，然后再去调整文字颜色和边框颜色了。

总结

改皮肤样式的bug，修改的顺序和定位问题的流程都可以通过从外到内，先布局后内容的方式来处理，这样层次清晰，定位问题时那一层样式的问题也很明了。