（上次DOM的部分做了些补充，欢迎查看Chrome development tools学习笔记(2)）
利用DevTools Elements工具来调试页面样式
CSS（CascadingStyleSheets层叠样式表）定义了Web页面的表示层，是能够真正做到网页表现与内容分离的一种样式设计语言。本文主要是讲调试工具，关于CSS学习可以参考W3school的CSS部分：。
DevTools的Elements右边的部分，会按照优先级从高到低显示应用在当前选中元素上的CSS样式：
图中1~7对应的说明如下：
在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的修改。查看方法很简单，在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的盒子。
转载自我的技术博客
（完）
钱财何足贵，仁义值千金。
