浏览器的审查元素,这是一个神奇的玩意儿
在做页面的过程中,应用到一些前端框架,很多时候都需要对框架的原始设计进行微调,但是如果直接在框架文件里面去搜索,有时候一搜就会有一大堆差不多的,还得一个个去比对到底哪个才是我想要找的,这样一趟下来就要花费不少时间,更何况这种情况还不算少。
这个时候,就要改变策略了!而使用浏览器中的“审查元素”功能就是一个非常好的,也是非常明智的选择。
正好自己今天做页面的时候又用到了审查元素,所以就想把自己已经发现的一些好玩的地方整理一下。
▍如何使用
在浏览器中打开页面,在你想要查看的元素上面点右键,然后选择审查元素,就会调出下方的控制台。如下:
图片下方红色框框就是审查元素的控制台了。
左边是页面的源码,蓝色横条是你所选中的元素的代码,红框右边默认显示的与你选中元素有关的样式,也就是说你当前选中元素的样式是右边所有样式的组合体。
红框分为两部分,左边是代码区,也就是当前页面的源代码,右边是查看相应元素css样式与js代码的地方(打开的时候默认展示的是css样式,打开后也可以自己选择要查看的内容)。
▍功能点:查看样式
在上面已经有所介绍,在右边就可以看到与选中相关的样式了,看看颜色或者是其他属性是如何设置的。
另外再讲一点,在查看样式的时候,一定会看到这种情况:
在某些css属性上面会出现删除线,这个删除线的意思是,元素的这个属性在另外一个地方被重新定义了。
▍功能点:在线微调样式
当把鼠标移到样式上方的时候,在每个属性的左边会出现复选框,点击取消勾选复选框就可以查看,当元素或是页面在没有这个属性设置的时候会是什么样子。
例:原始样式:
当我取消勾掉红框中的padding样式时,页面就会变成这样:
很明显,效果有很大的变化(变差了)。
▍功能点:图形描述盒子模型
还可以通过图形描述该元素的盒子模型是如何设计的。
▍小插曲
这个里面的功能点太多了,才说了几个很小功能点,就感觉有点蒙了,好像自己表达清楚了,又好像没有表达清楚。
所以还是决定不做这种生硬的描述了,就拿一个小案例来做一点说明吧。
▍案例说明
原本在那个表格头部的上面有点小小的白色边框,我想要把这个边框给去掉,但是我将margin、padding和border全部设为0都没有消除掉这个边框。
图:
css代码:
html代码:
然后没办法,就在浏览器中审查元素:
才发现原来它使用的是table的class属性来设置样式的,比我使用table标签来定位的优先级高,所以不管我怎么设置都没有起作用;
而在这个样式中设置的border-top就是表格上面带有有白色边框的原因,所以我就把css改了一下:
然后上面的边框就没有了。
目的达到!
▍我是尾巴
总的来说,这里面的功能还有很多很多,因为文笔不好的原因,难以介绍更多的功能点。
还是让有兴趣的人自行摸索吧,接触的越多就越能发现它的优点所在。
浏览器的审查元素,这是一个神奇的玩意儿相关推荐
- chrome浏览器的审查元素
有些网页如果我们直接去请求的话,他会查看请求的对象是不是浏览器,如果没有浏览器信息就会禁止我们爬虫的访问,这个时候我们就要给爬虫加一个headers,加一个浏览器的user-agent信息.这样我们就 ...
- 360浏览器html文件无图标,360浏览器在网页的右键里不显示审查元素怎么了
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:360浏览器在网页的右键里不显示审查元素怎么了?回答:360浏览器在网页的右键里不显示审查元素的原因为:网页不处于极速模式,你右键没 ...
- 用360检查元素时怎么知道html文件名,360浏览器审查元素怎样用?360浏览器开发工具使用教程...
360浏览器审查元素怎样用?360浏览器开发工具使用教程 首先来说说如何打开360浏览器开发工具吧.提醒:要使用360浏览器的极速模式才能使用审查元素功能,用兼容模式是不能使用审查元素功能的. 先打开 ...
- 浏览器查看源代码和F12审查元素的区别
查看源代码就是查看服务器发给浏览器的原封不动的代码. 审查元素是,浏览器执行完源代码里的js代码后的最终结果. "审查元素"包括源代码+js动态渲染的内容,即最终展示的html内容 ...
- 防止html网页被f12抓取,JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码...
前言 很多站长为了仿止别人仿制或扒下自己的网页,都会选择使用禁止浏览器右键查看元素或F12审查元素,一旦查看元素浏览器页面就会自动关闭,下面话不多说了,来一起看看详细的介绍吧. 注:该代码不兼容火狐浏 ...
- python动态页面元素爬取_Python开发爬虫之动态网页抓取篇:爬取博客评论数据——通过浏览器审查元素解析真实网页地址...
由于主流网站都使用JavaScript展示网页内容,和前面简单抓取静态网页不同的是,在使用JavaScript时,很多内容并不会出现在HTML源代码中,而是在HTML源码位置放上一段JavaScrip ...
- Python开发爬虫之动态网页抓取篇:爬取博客评论数据——通过浏览器审查元素解析真实网页地址...
由于主流网站都使用JavaScript展示网页内容,和前面简单抓取静态网页不同的是,在使用JavaScript时,很多内容并不会出现在HTML源代码中,而是在HTML源码位置放上一段JavaScrip ...
- 搜狗浏览器在高速模式下,右键点击才会出现“审查元素”
搜狗浏览器在高速模式下,右键点击才会出现"审查元素", 学习javascript!!!
- 360安全浏览器右击不显示审查元素 或按F12不弹出开发人员工具的原因和解决方法:设为极速模式
360安全浏览器右击不显示审查元素 或按F12不弹出开发人员工具的原因和解决方法:设为极速模式 参考文章: (1)360安全浏览器右击不显示审查元素 或按F12不弹出开发人员工具的原因和解决方法:设为 ...
最新文章
- Word英文字符间距太大 中英文输入切换都不行
- 黑苹果闪屏解决方法_脖子黑可以用什么方法解决,专家讲解
- 亲情奉献一些搜集的网站
- 用OneR算法对Iris植物数据进行分类
- 数据结构之图:无向图的介绍与功能实现,Python——22
- Android4.0设置界面修改总结
- 深度剖析数仓CN增量备份技术
- JS有哪些数据类型?
- SAP License:FI学习笔记
- python前端开发招聘_[昆明] EMQX 招聘 Python ,前端开发工程师
- html兼容手机浏览器
- FPGA 串口接收不准确,有误码
- Matlab 绘制箱线图
- jquery下的this,$(this),$(this).get(0);
- 51单片机——LED发光二极管、蜂鸣器C语言入门编程
- SubsamplingScaleImageView + Glide显示网络超大图片
- python3 tkinter 出现_tkinter.TclError: can’t invoke “destroy” command: application has been destroyed
- Windows命令行查看文件的MD5
- UniAPP HBuilderX 运行到各个小程序开发工具
- E12:后台管理系统开发-修改文章功能
热门文章
- servlet那边处理完登录,在jsp这边弹框显示结果
- mac 设置mysql登录快捷键_Mac ox mysql启动登录和环境变量配置
- 论文解读2019INFOCOM_Calibrate: Frequency Estimation and Heavy Hitter Identification with LDP
- 使用 KubeKey 快速安装 Kubernetes 集群
- Heatmap.js 一个强大简易的web动态热图
- 学习python需要什么?
- 蓝队工具:使用VirusTotal API校验样本
- FCoin“暴雷”投资人该怎么办?律师这样建议
- 数字图像-理想低通滤波器
- 【基础算法】试除法求约数(Acwing869题)