多图预警 皮皮虾预警

本文主要介绍Chrome浏览器方面的操作。其他浏览器（如火狐）也可以起到相同效果，操作细节略有不同，建议百度。另外本篇文章不讲解过多的js，有需要请看另一篇文章(常用JS)。本文对于没有HTML基础或者代码恐惧症以及密集恐惧症患者可能会有不适，且本人文笔并不好，所以各位多包涵着。

磨刀不误砍柴工

chrome浏览器或者chrome浏览器相同内核的一些国产浏览器都有一个功能，这个功能在右键菜单中叫做“检查”。为了调用这个功能，我们需要先有一个支持此功能的浏览器。
在继续看如何下载浏览器之前，请尝试按下F12或者Ctrl+Shift+i按键查看是否有个如下图的窗口蹦出来了，有的话请跳过此章节。

看到这里的时候你肯定是没成功。不用着急，问题不大。你可以直接去百度里搜索"chrome"，然后点击普通下载。没有看到普通下载按钮的朋友，可以直接去Chrome 官网下载。下载后双击打开一个exe文件，然后稍等片刻，浏览器便会自动打开全程十分干净无捆绑，教程结束。

开玩笑，工具刚刚装好。

开始了解强大的Chrome开发人员窗口

我没有仔细了解过那个窗口到底官方怎么叫，姑且就叫它开发人员窗口。这个窗口具备很多的功能，而对于本文来讲，我们只介绍其中的几个功能（其他的功能如果你用得上，那自然会知道对吧~）。

打开窗口

打开方法很简单，如果你在之前下载那一节按照我说的做了，那么你现在屏幕上这个窗口应该还在（没在就再点一次）。或者，右键点检查：

现在，如最上面那幅图一样的窗口应该出来了吧？我再放一次图(我真的没在水字数)：

首先顶上那一行("Elements/Console/Sources...")是一些功能，暂时用得上前两个。第二个是js命令窗口。那第一个是什么？往下看~

"你是谁?" "我是Elements" - Elements面板

第一个ELements是展示页面元素的，也是咱们的主战场。随便打开个网页再打开这个窗口，鼠标划过这些代码，你的网页上会自动用方块显示出对应的元素：

很神奇，对吧？

还有更神奇的。注意开发窗格左上角。

这是两个按钮。左侧第一个按钮，戳一下可以问神奇海螺很多事情。

开玩笑。那个按钮按一下会变成蓝色。而且这个时候鼠标划过页面，自动高亮了鼠标指向的整个元素。是不是很棒？

好了，现在你可以按下鼠标左键了。这样你选择的元素就会在右侧高亮并且关闭这个鼠标选择模式。

视线回到左侧。每当悬停选择一个元素的时候，除了为元素上色，上面其实还有一个浮动窗口：

上面有丰富多彩的英文字对吧？好了，现在简单介绍一下这几个英文字。

"你到底是谁？" "我真的是元素啊！" - 如何看元素

还是这张图。

首先看图上有的。
紫色的是TagName，标签名。标签是什么？比如你看本文，<p>这句话</p>中的<p></p>就是标签，p就是标签名。标签一般都成对出现，常见标签有：div p h1 h2 h3 b header nav等等。(具体是做什么用的？这个不属于本文涉猎范围内，因为如果不会代码，这东西解释起来怕是要头疼的。)。上图tagname就是h2。
接下来就是蓝色的class。一个元素可能有多个class也有可能没有，每个class在显示的时候都会在前面加"."点号来表示。class用人话来说就是设置一个规则，大家都来遵守。在一个css样式表里设定了之后，指定调用这个class的元素都会遵从那一套规则
<p class="papapa">这句话</p>中的papapa就是class，显示出来就是.papapa。上图class是post-title。
最后一项一般咱们用不到，前端的朋友会用得到，告诉你元素多大。

Emmmm好像少了什么...

(Pia的一拍脑袋)对了！...没有说ID对吧？

(揉揉脑袋)刚刚那个元素没有ID，看我给它加一个ID：

这次多了一个黄色的字，#hello，这就是元素ID。元素只能有一个ID，而且在整个网页里面唯一，一般会在前面加上"#"来显示。<p id="rua">这句话</p>中的rua就是这个元素的ID。id就像是你的身份证号，因为是唯一的，所以通过身份证号可以找到你这个人。上图里的ID就是hello。

一个元素是可以同时存在ID和CLASS的。如：<p id="rua" class="papapa">这句话</p>，两个属性没有先后之分。但是如果你有单独设置样式，那就是后来者居上，覆盖前者的样式了。

俺老孙会七十二变 - 用电脑看手机页面

很多网站的电脑视图和手机视图是不一样的，应用的规则也不太一样。为了能让我们在Chrome电脑版调试手机页面，我们还需要一点准备。

还记得那两个按钮吗？

刚刚说了第一个按钮，现在用的是第二个按钮。点一下，视图会变成这样：

这显然不是手机页面。不过看到页面顶上的Responsive了嘛？戳一下：

这次就有手机了。我一般习惯用Galaxy S5来调试。点一下就好了：

这个设置点一次就可以了，以后只要打开开发窗口就会自动变成这样。当然关掉的话再点一下刚刚两个按钮的第二个就好了。

我的门前三包 - 边距

在酷安帮别人鼓捣FA的网页的时候最常遇到的就是去除留白和去掉元素。去除留白其实是相对简单的，毕竟去除元素多一半删广告，某毒的广告，弄过的都懂，还有一些页面用js动态加固广告。

边距在哪里呀 边距在哪里~

还是这张图

你看，“常用JS”上下各有一行黄色，那个就是边距中的外边距。你选中一个元素，并且在元素右侧或者下侧的样式设定中，滚动到最下面，就能看到有关边距的设定图：

将颜色和这个进行比对，外边距就很容易知道是margin而且数值是20(px)。

边距种类千千万，看你想要哪一种

上图有几种边距，最外侧position是位置，代表与网页的绝对位置，一般是浮动元素用的。继续是margin，外边距，一般是元素外侧的空白，大部分的去除留白请求也是这个。再往里是border，这个算是边框。再往里是padding，内边距，一般是设置子元素距离元素边的距离。中心是元素大小。这些东西简单点理解，就是：margin是你外面衣服多厚，padding就是你有多少肉，border的话就是你的皮...皮皮虾！

拿起手术刀 - 开始调整

以下网页来自酷狗。m.kugou.com，本文仅仅拿来做演示，侵删。

现在是正题了。切换到手机视图。打开酷狗。

然后现在已经去掉去掉了顶栏（去除方法参见隔壁文章"常用JS"，顶栏id#topFixed），可是我们看到上面有一大片空白。这肯定不是我们想要的。现在根据上文说的，首先用鼠标悬停在空白上，看看到底谁的额头这么大：

可以看到对应元素是<div class="bd js-bd-box" id="bd">...</div>，点击左键确定元素，然后查看右侧样式：

看到了嘛？特别明显，在bd类下有个padding-top。刚刚说过，padding是内边距，而padding-top的意思是顶部边距。我们把鼠标悬停在这一项上，会在前面出现复选框。反选padding-top一项的复选框，相当于取消这一样式，现在查看效果：

可以看到，这次效果就对了。也就是说，我们只需要去除这个padding-top即可。将复选框勾选回来。

我们接下来使用JS来针对性的去除padding-top效果。这里只简单讲下，具体的用法看隔壁常用JS文章。

我们首先看到这个元素拥有一个ID叫做bd，那么选取元素就很简单。

document.getElementById("bd")

这半句js便可以选取这个元素。这个元素下有一个专门放各种样式的object，就是style。在style下，所有的css样式使用驼峰命名法在这里列出。根据驼峰命名法，padding-top就是paddingTop。于是，我们可以直接给这个样式赋值。直接给0是清除最简单的方法。

document.getElementById("bd").style.paddingTop=0;

这句js构造好了，切换到Console标签，输入，回车。可以看到效果已经完美了。这句js就可以放进FusionApp里了。

---

这篇简单教学就到这里了。文笔不好多多包涵，而且之前也很少写教程相关的东西，如果有哪里不清楚，欢迎在酷安找我@Cansll蚕食。