如何定位样式相关的问题

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

从外到内

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

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

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

先布局后内容

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

总结

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,189评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,868评论 1 45
  • 学会使用CSS选择器熟记CSS样式和外观属性熟练掌握CSS各种选择器熟练掌握CSS各种选择器熟练掌握CSS三种显示...
    七彩小鹿阅读 6,446评论 2 66
  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 1,740评论 0 6
  • 一:在制作一个Web应用或Web站点的过程中,你是如何考虑他的UI、安全性、高性能、SEO、可维护性以及技术因素的...
    Arno_z阅读 1,369评论 0 1

友情链接更多精彩内容