前端开发之样式调试

​

首先，要想成为一个前端开发工程师，必须有一个好的前端开发工具，比如 HbuilderX（个人比较喜欢用）、VSCode（使用的时候需要自行安装各种插件，如果习惯用微软东西的，可以使用），当然前端开发工具非常多，可谓是各有千秋，有付费的也有免费的，有国内的也有国外的，而 HbuilderX 属于国内免费的较为好用的前端开发工具，当然如果你是一个绝世高手，前端培训你也可以使用记事本开发前端。可能还有人会问，为什么不用 Dreamweaver 呢？这个东西主要是给有为青年用来练手的，不适合我们工作中使用。

其次，你还需要有一个好的调试工具作为辅助，因为前端开发工具一般会通过高亮、补全、以及关键字颜色的显示告诉你一些常规的是否正确，但是有一些问题，它是没法帮你排查的，此时我们必须有一款比较好的调试工具，才能帮你解决这个困惑，而谷歌浏览器就能很好的给你前端调试带来帮助，是不是开始疑惑，谷歌浏览器帮助我进行调试，有没有搞错。不管有没有搞错，可以先尝试使用，如果不好使，你再来找我切磋。除了谷歌，其实各大浏览器都是可以进行调试的，但是相对这些浏览器，谷歌浏览器是比较好使的，它的开发工具也比较不错。

那么下面我们就一起来看看这个被你质疑存在的家伙吧！

打开我们的前端开发工具 HbuilderX，如下所示，记得不要忘记添加一个简单的代码程序，下面我就用一个简单示例为大家演示谷歌浏览器中开发人员工具的使用。

此时我们给当前页面中的 html 元素添加一点样式代码，如下所示：

<style type="text/css">      .father{        width: 200px;        height: 200px;        margin: 100px auto;        background-color: hotpink;        border: 5px solid #000;      }      .son{        width: 150px;        height: 150px;        background-color: cornflowerblue;        margin: 20px auto;        border: 5px solid #000;        text-align: center;        line-height: 150px;        color: #fff;        font-size: 25px;      }</style>

以上代码，将其放到 header 标签里边，最后呈现的效果如下所示：

那么如何利用谷歌浏览器进行查看它的结构和样式呢？如下图所示：

如果要查看刚刚所写的元素的结构，可以通过如下方式进行查看：

​如果碰到样式没有效果，就可以按照上面的结构进行查。北京前端培训当碰到样式没有被使用，存在的可能性有被层叠或者是选择器的权重不够，第一种情况很容易查看，但是第二种情况就得靠你自己去判断，针对第一种情况会显示为如下：

从图片上，可以看出.father 中的高度被栅格线划掉，而 div 中的宽也被栅格线划掉。

第一种：权重相同的情况下，存在的可能就是被层叠掉，这儿的.father 中的高度被.other 中的高度层叠掉，也就是覆盖掉的意思。谁离元素近，谁就会被使用，而远的就被层叠掉，所谓的就近原则。

第二种：样式代码相同，而权重不同，权重小的会被权重大的层叠掉，比如 div 的权重没有.father 的权重大，所以被.father 中的宽度层叠掉了 div 中的宽度。

如何判断权重的大小，这儿给大家一个最直接简单的方法，就是选择器选择的时候越精准，范围越小，权重就越大，如果不清楚，可以给我留言。

最后补充一点，当碰到开发的时候发现标签元素少元素时，也可以通过这种方式进行查看。

来源程序员晓晓