浏览器的审查元素,这是一个神奇的玩意儿

日期:2020-10-12/ 分类:数字货币是什么样的

在做页面的过程中,应用到一些前端框架,很多时候都需要对框架的原始设计进行微调,但是如果直接在框架文件里面去搜索,有时候一搜就会有一大堆差不多的,还得一个个去比对到底哪个才是我想要找的,这样一趟下来就要花费不少时间,更何况这种情况还不算少。

 

这个时候,就要改变策略了!而使用浏览器中的“审查元素”功能就是一个非常好的,也是非常明智的选择。

 

正好自己今天做页面的时候又用到了审查元素,所以就想把自己已经发现的一些好玩的地方整理一下。

 

 

▍如何使用

 

在浏览器中打开页面,在你想要查看的元素上面点右键,然后选择审查元素,就会调出下方的控制台。如下:

 

 

 

图片下方红色框框就是审查元素的控制台了。

 

左边是页面的源码,蓝色横条是你所选中的元素的代码,红框右边默认显示的与你选中元素有关的样式,也就是说你当前选中元素的样式是右边所有样式的组合体。

 

红框分为两部分,左边是代码区,也就是当前页面的源代码,右边是查看相应元素css样式与js代码的地方(打开的时候默认展示的是css样式,打开后也可以自己选择要查看的内容)。

 

 

 

 

▍功能点:查看样式

 

在上面已经有所介绍,在右边就可以看到与选中相关的样式了,看看颜色或者是其他属性是如何设置的。

 

另外再讲一点,在查看样式的时候,一定会看到这种情况:

 

 

 

在某些css属性上面会出现删除线,这个删除线的意思是,元素的这个属性在另外一个地方被重新定义了。

 

 

▍功能点:在线微调样式

 

当把鼠标移到样式上方的时候,在每个属性的左边会出现复选框,点击取消勾选复选框就可以查看,当元素或是页面在没有这个属性设置的时候会是什么样子。

 

 

 

例:原始样式:

 

 

 

当我取消勾掉红框中的padding样式时,页面就会变成这样:

 

 

 

很明显,效果有很大的变化(变差了)。

 

 

▍功能点:图形描述盒子模型

 

还可以通过图形描述该元素的盒子模型是如何设计的。

 

 

 

 

▍小插曲

 

这个里面的功能点太多了,才说了几个很小功能点,就感觉有点蒙了,好像自己表达清楚了,又好像没有表达清楚。

 

所以还是决定不做这种生硬的描述了,就拿一个小案例来做一点说明吧。

 

 

▍案例说明

 

原本在那个表格头部的上面有点小小的白色边框,我想要把这个边框给去掉,但是我将margin、padding和border全部设为0都没有消除掉这个边框。

 

图:

 

 

css代码:  

 

 

html代码:

 

 

然后没办法,就在浏览器中审查元素:

 

 

 

才发现原来它使用的是table的class属性来设置样式的,比我使用table标签来定位的优先级高,所以不管我怎么设置都没有起作用;

 

而在这个样式中设置的border-top就是表格上面带有有白色边框的原因,所以我就把css改了一下:

 

 

 

然后上面的边框就没有了。

 

 

目的达到!

 

 

▍我是尾巴

 

总的来说,这里面的功能还有很多很多,因为文笔不好的原因,难以介绍更多的功能点。

 

还是让有兴趣的人自行摸索吧,接触的越多就越能发现它的优点所在。

 

公众号:爱唱歌的蜗牛先生17.3%text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfZG9udF9rbm93X2E=, size_16, 职务color_FFFFFF,t_70">

 

上一篇:没有了    下一篇:Maven是什么?