Chrome development tools学习笔记(3)
(上次DOM的部分做了些补充,欢迎查看Chrome development tools学习笔记(2))
利用DevTools Elements工具来调试页面样式
CSS(Cascading Style Sheets层叠样式表)定义了Web页面的表示层,是可以真正做到网页表现与内容分离的一种样式设计语言。本文主要是讲调试工具,关于CSS学习可以參考W3school的CSS部分:http://www.w3school.com.cn/css/index.asp。
DevTools的Elements右边的部分,会依照优先级从高到低显示应用在当前选中元素上的CSS样式:
- 通过style属性(或者DevTools)直接定义在元素上的CSS样式。
- 该匹配的CSS样式规则。
比如,「span」会匹配到当前页面HTML上的<span>标签。
- 继承样式,继承了被选择元素的祖先元素匹配的CSS样式规则。
图中1~7相应的说明例如以下:
- 和当前元素匹配的CSS选择器和样式。
- 匹配在同一元素上的多个同样的CSS属性,会先按来源、权重和特异性进行重写覆盖,假设这些优先级都同样,则后定义的属性优先。详细能够參照CSS文档中的层叠顺序说明。在Elements工具中,第一个定义的「color」属性上面打上了删除线,表示它被重写覆盖了。
- User agent stylesheets(用户代理样式)也会在Elements工具中显示出来,所谓用户代理样式,即浏览器提供的一些默认样式,曾经给实习生出过道题目。通过CSS样式来让文字输入text控件在获得焦点时候显示蓝色边框,有的人发现Chrome以下默认text控件获得焦点就会显示一个蓝色边框,事实上假设在DevTools下查看就会发现,这里的蓝色边框效果,就是Chrome浏览器设置的用户代理样式。再细致看的话,像text控件的边框之类的属性,都是通过用户代理样式设置上去的。
- 开发人员定义的CSS样式比用户代理样式优先级高,因此图中开发人员定义的div的「display: inline-block;」样式把用户代理样式的「display: inline-block;」重写覆盖了。前面讲到了浏览器会设置非常多用户代理样式。在开发中。我们通常使用CSS Reset,即导入一套CSS样式覆盖重写不同浏览器的用户代理样式,以统一页面显示效果。
这里的Css Reset用到的就是优先级重写覆盖的原理。
- 继承的样式显示在「Inherited from [node]」分组以下,单击分组头部的节点名,会跳转到相应的DOM节点。能够去CSS 2.1 properties table查看哪些CSS样式是可被继承的。
- 「:root body」选择器的特异性比单独的「body」选择器强。因此图中「:root body」的「font-size: 30px」样式覆盖了「body」的样式。
- 和前一点一样,因为CSS的优先级。「body
」选择器的
「font-family: Helvetica」样式也被覆盖了。关于CSS重写覆盖的优先级。也不多赘述了。百度google上面有一大片。
在CSS选择器中。逗号「,」被用来表示「或
」的关系。即仅仅要满足当中一部分,即被匹配。在Elements工具中,「或」关系的多个选择器中被匹配上的会以黑色字体表示。
在Elements工具中。能够通过CSS样式的左边checkbox来临时禁用或者激活某条CSS样式,某条样式被禁用后,在代码中相应的CSS样式会被凝视。同理,在代码中被凝视的CSS样式。在Elements工具中,会以被禁用的状态显示出来(比如上图的visibility样式)。
在实际的项目中,非常有可能一个元素上面定义了大量的CSS样式,我们能够通过关键词检索的方式来高速定位到想要查看的CSS样式。
编辑CSS样式
点击CSS样式的选择器、属性名、属性值能够分别对他们进行设置。点击能够插入一条CSS规则,个人认为比較赞的是利用DevTools进行CSS样式改动的时候会依据输入值自己主动补全输入。比如使某个元素不可见的CSS样式「visibility」可能记不太清楚拼写,我们仅仅须要在DevTools里面CSS样式名中输入「v」,DevTools就会帮我们自己主动找出来全部「v」开头的CSS样式。
对于样式的值也是一样,DevTools会自己主动给出相应CSS样式可能的值,通过键盘上下键能够高速进行切换并实时显示到页面上。
点击能够切换元素的状态,和上一篇讲的在DOM节点上右键选择「Force element state」效果是一样的。
CSS改动历史
须要注意的是,和DOM的改动一样,在DevTools里面进行的全部CSS改动,都是临时的。
这就意味着页面一旦刷新。全部的改动都会丢失。我们写代码时候可能须要重复多次对某些地方进行微调。DevTools提供了一个改动历史查看工具来帮助我们查看当前对页面上CSS以及JavaScript的改动。查看方法非常easy,在DevTools的「Sources」标签以下,右键须要查看改动历史的文件。选择「Local modifications...」就可以。我们能够在改动历史中,看到改动的时间,以及两次改动前后的Diff,还能够对这些改动进行回滚操作。
顺便说下,假设我们须要让CSS改动真正反映到源码文件里,能够选择增加workspace来实现。
关于workspace,在以后会详细展开。
CSS盒模型查看
谈到CSS布局,必定会提起CSS的盒模型。
记得学校里上网页设计课的时候,还在用table来进行页面布局,可是放眼望去如今的站点,差点儿都是使用盒模型来布局的。关于盒模型,在书上看到非常多概念性的东西,可是一直对margin、border、padding等概念不是非常熟悉。
通过DevTools的盒模型工具,能够非常直观的帮助我们上手CSS布局。
通过在盒模型中设置不同的值。我们能够非常直观的看到margin、border、padding这些CSS属性对于布局的作用。光标移动到盒模型中的不同部分,页面上该部分会以高亮显示。能够在盒模型视图中进行高速的改动,不须要加px单位,改动一样是实时反馈在页面上的。当调整页面上元素位置的时候,能够帮助我们高速知道改动的是上层元素的padding还是当前元素的margin亦或是其它属性。用了DevTools亲自己主动手尝试后,再看到网上的盒模型介绍,是不是一下子就看懂了?
当设置position为「static」以外的值的时候,margin外面还会有一个position的盒子。
转载自我的技术博客http://www.cc-lab.cn/chrome-dev-tools-3/
(完)
转载于:https://www.cnblogs.com/gcczhongduan/p/5223008.html
Chrome development tools学习笔记(3)相关推荐
- 《Fluid Engine Development》 学习笔记2-基础
断断续续花了一个月,终于把这本书的一二两章啃了下来,理解流体模拟的理论似乎不难,无论是<Fluid Simulation for Computer Graphics>还是<计算流体力 ...
- 《Fluid Engine Development》 学习笔记3-光滑粒子流体动力学
用粒子表示流体最热门的方法就是就是光滑粒子流体动力学(Smoothed Particle Hydrodynamics (SPH).) 这种方法模糊了流体的边界,用有限数量的粒子代表流体,该方法的基本思 ...
- Chrome开发者工具学习笔记
简介 Chrome 开发者工具是一套内置在Google Chrome中Web开发和调试工具.我们可以使用开发者工具来重演,调试和剖析我们的网站.开发者工具主要包含Elements面板.Console面 ...
- 树莓派学习笔记 ——I2C PCF8574 SysFs方式
1.前言 树莓派的GPIO端口数量有限,可通过IO扩展芯片增加GPIO的数量,使得树莓派可以适应更多的应用.PCF8574为一款通过I2C总线扩展IO的芯片,单个PCF8574可扩展8个IO,一个I2 ...
- 树莓派学习笔记——I2C设备载入和速率设置
1.载入设备 方法1--临时载入设备 sudo modprobe -r i2c_bcm2708 #卸载设备 -r代表removesudo modprobe i2c_bcm2708 #重新载入设备 方法 ...
- 树莓派学习笔记——Linux I2C驱动说明
1.前言 [linux内核说明] 通常情况下,I2C设备由内核驱动控制,但是某些情况下I2C设备也可由用户空间控制.如果在用户空间控制I2C设备,需要访问/dev目录中所提供的接口,在使用I2C设备之 ...
- kail中tools的安装和第一个php学习笔记
安装tools 打开 鼠标右击选择 创建文件夹 mkdir cdrom 把tools文件复制到 位置--计算机--cdrom文件夹下 打开 cdrom cd cdrom 复制生成的目录 解压文件夹:t ...
- Linux学习笔记三:安装VMWare Tools共享文件夹
这里写目录标题 概述 window下安装 Ubuntu下安装 提取安装包 解压安装 Ubuntu安装插件 适应窗口和拖拽文件 概述 本文主要是记录下我安装VMwareTools的过程,原本打算写在Li ...
- Chrome学习笔记(三):UI组件,皮肤引擎
原创文章,转载请注明:转载自Soul Apogee 本文链接地址:Chrome学习笔记(三):UI组件,皮肤引擎 -- 控件库 这篇文章是接着上篇文章继续聊的,Chrome的代码实在太多,每一个东西单 ...
最新文章
- leetcode 406. 根据身高重建队列(贪心算法)
- 【LightOJ - 1104】Birthday Paradox(概率,思维)
- 7 QM配置-质量计划配置-定义检验方法的编号范围
- 新建一个虚拟环境 用于django的项目
- 安卓调用系统拍照功能:1、启动拍照返回图片,2、启动拍照,图片存储在指定路径下
- 【图论】【poj 3020】Antenna Placement
- 论文笔记_S2D.11-2018-ECCV_用于语义分割和深度估计的联合任务递归学习
- 计算机基础知识集体备课,计算机基础知识集体备课.doc
- USB数据采集卡关于高电压数据采集提供的解决方案
- 成都-峨眉山(乐山)旅游攻略
- 嵌入式开发如何入门?
- 利用Jimi进行图片缩放操作
- 找不到移动硬盘解决办法
- 16个最新创意品牌Logo设计 —— “形神”兼具的设计,方显高级和质感
- OpenGL3D图形、旋转、纹理、键盘移动、光照、滤波、透明(完整)
- 39期1组,第一个项目感受---------文字与回忆
- 背负着24-70之名 佳能新老镜皇横向对比(MTF对比说明)
- 国企央企OFFER收割全攻略 | 银行篇之差额体检答疑
- Invalid content was found starting with element ‘{“http://maven.apache.org/POM/4.0.0“:dependency}‘.
- python2打包pyQT5
热门文章
- 计算机大学英语值最高的3项,计算机等级考试一级B上机试题:Windows字处理
- 成本预算的四个步骤_工业企业成本管理之成本控制体系的构建
- hosts ip 指向ip_不同网段共享打印机?不同IP段怎么共享打印机?
- 真实的产品案例:实现文档边缘检测
- CPU实时人脸检测,各种朝向、侧脸都检出来
- 数据缺失,如何智能修复?第一名方案源码分享
- 一次性掌握机器学习基础知识脉络
- CCF农产品价格预测-复赛rank2代码公布
- troublemaker中文谐音_求Arashi 岚的Troublemaker的中文谐音~~~~ 超感激~
- SpellGCN: Incorporating Phonological and Visual Similarities intoLanguage Models