.father{width:200px;高度：200px；边距：100px自动；背景颜色：热粉色；边框：5px实心#000；}.son{宽度：150px；高度：150px；背景色：矢车菊蓝；边距：20px自动；边框：5px实心#000；颜色：#fff；字体大小：25px；}首先，如果你想成为一名前端开发工程师，你必须要有一个好的前端开发工具，比如HbuilderX（个人比较喜欢用）、VSCode（你使用的时候需要安装各种插件，如果你习惯用微软的东西的话，可以用），当然前端开发工具有很多，各有各的优势，有付费的也有免费的，国内外，HbuilderX是国内一款免费好用的前端开发工具。当然，如果你是绝世高手，前端培训你也可以使用notepad来开发前端。可能有人会问，为什么不用Dreamweaver呢？这东西主要是给有为的年轻人练手用的，不太适合我们工作。其次，你还需要一个好的调试工具作为辅助，因为前端开发工具一般会通过高亮、补全、??关键字颜色的显示来告诉你一些例程是否正确，但是有些问题它并不能帮你排错，这时候我们就必须要有一个更好的调试工具来帮你解决这个困惑，而谷歌浏览器就可以很好的帮你进行前端调试。你是不是开始怀疑，我调试的GoogleChromeHelp，是不是我出错了。不管你有没有写错，你可以先尝试使用，如果不行可以来找我讨论。除了谷歌，其实各大浏览器都可以调试，但是相比这些浏览器，谷歌浏览器更易用，其开发工具也更好。那我们就来看看这个被你质疑存在的家伙吧！打开我们的前端开发工具HbuilderX，如下图，记得不要忘记添加一个简单的代码程序，下面我将通过一个简单的例子来演示在谷歌浏览器中开发者工具的使用。此时，我们在当前页面的html元素中添加一点样式代码，如下：.father{width:200px;高度：200px；边距：100px自动；背景颜色：热粉色；边框：5px实心#000；}.son{宽度：150px；高度：150px；背景色：矢车菊蓝；边距：20px自动；边框：5px实心#000；颜色：#fff；字体大小：25px；}将上面的代码放在header标签中，最终效果如下：那么如何使用谷歌浏览器查看其结构和样式呢？如下图所示：如果要查看刚刚写的元素的结构，可以通过以下方式查看：如果样式不行，可以根据上面的结构查看。北京前端培训没有用到样式的时候，可能有被级联或者选择器权重不够的可能。第一种情况好查，第二种情况就得自己判断了。对于第一种情况这种情况会显示如下：从图中可以看出.father中的height被网格线划过了，div中的width也被网格线划过了。第一种：在重量相同的情况下，可能会级联。在这里，.father中的高度被.other中的高度级联，这意味着它被覆盖了。谁离元素近就用谁，远的就级联，所谓就近原则。第二种：样式代码相同，权重不同。较小的重量将由较大的重量堆叠。比如div的权重没有.father的那么大，所以div的宽度由.father的宽度叠加。如何判断权重的大小，这里给大家介绍一个最直接简单的方法，就是选择器选的越准，范围越小，权重越大，不清楚的可以离开我的消息。最后补充一点，开发中发现标签元素少的时候，也可以通过这种方式查看。源码程序员晓晓
