在做页面的过程中，应用到一些后端框架，很多时侯都须要对框架的原始设计进行微调，但是假如直接在框架文件上面去搜索，有时候一搜都会有一大堆差不多的，还得一个个去比对究竟那个才是我想要找的，这样一趟出来就要耗费不少时间，更何况此类情况还不算少。
这个时侯，就要改变策略了！而使用浏览器中的“审查元素”功能就是一个非常好的，也是十分明智的选择。
正好自己昨晚做页面的时侯又用到了审查元素，所以就想把自己早已发觉的一些好玩的地方整理一下。
▍如何使用
在浏览器中打开页面，在你想要查看的元素前面点右键，然后选择审查元素，就会调出下方的控制台。如下：
图片下方白色框框就是审查元素的控制台了。
左边是页面的源码，蓝色条纹是你所选中的元素的代码，红框右侧默认显示的与你选中元素有关的款式，也就是说你当前选中元素的款式是左侧所有款式的组合体。
红框分为两部份，左边是代码区，也就是当前页面的源代码，右边是查看相应元素css样式与js代码的地方（打开的时侯默认展示的是css样式，打开后也可以自己选择要查看的内容）。
▍功能点：查看款式
在里面早已有所介绍，在左侧就可以看见与选中相关的款式了电脑右击怎么没有审查元素，看看颜色或则是其他属性是怎样设置的。
另外再讲一点，在查看款式的时侯，一定会见到这些情况：
在个别css属性里面会出现删掉线，这个删掉线的意思是，元素的这个属性在另外一个地方被重新定义了。
▍功能点：在线微调款式
当把键盘移到款式上方的时侯，在每位属性的右侧会出现复选框，点击取消勾选复选框就可以查看，当元素或是页面在没有这个属性设置的时侯会是哪些样子。
例：原始式样：
当我取消勾掉红框中的padding款式时，页面都会弄成这样：
很明显，效果有很大的变化（变差了）。
▍功能点：图形描述袋子模型
还可以通过图形描述该元素的袋子模型是怎样设计的。
▍小插曲
这个上面的功能点太多了，才说了几个很小功能点，就觉得有点蒙了，好像自己抒发清楚了，又似乎没有抒发清楚。
所以还是决定不做这些艰涩的描述了，就拿一个小案例来做一点说明吧。
▍案例说明
原本在哪个表格背部的前面有点小小的蓝色边框，我想要把这个边框给除去，但是我将margin、padding和border全部设为0都没有清除掉这个边框。
图：
css代码：
html代码：
然后没办法，就在浏览器中审查元素：
才发觉原先它使用的是table的class属性来设置款式的电脑右击怎么没有审查元素，比我使用table标签来定位的优先级高，所以不管我如何设置都没有起作用；
而在这个款式中设置的border-top就是表格里面带有有黑色边框的缘由，所以我就把css改了一下：
然后里面的边框就没有了。
目的达到！
▍我是尾巴
总的来说，这上面的功能还有很多很多，因为文采不好的缘由，难以介绍更多的功能点。
还是让有兴趣的人自行摸索吧，接触的越多就越能发觉它的优点所在。
