细说网页开发者工具F12-前端开发利器一

　　金木水火土查询表3.右侧区域为Style，即css样式,显示的是被选元素对应的css。这样就非常方便我们调试样式。

　　这里我们假设有个需求，需要右边头像的元素代码和css演示。我们不需要右键查看源代码（早期有些教程会使用这个方法）。

　　3.点击确认后，你会发现中部Elements会自动定位到头像代码，右边Style也会自动定位到头像的css样式

　　5.在左侧的Style面板中，点击css右边的css文件名也可以定位到个css文件中的具体

　　但是有些特殊的样式需要鼠标到达某一特殊的时候才会触发，我们再去点指针的时候就会回到原位。（比如博客右侧的小埋，需要鼠标hover才能触发）。

　　我们可以将鼠标移上去后，按快捷键Ctrl+Shift+C直接使用指针工具。就可以获取这些特殊样式的css代码

　　还有些时候，我们需要搜索页面中的某些内容。在中部Elements中使用Ctrl+F打开搜索框：

　　还有个东西这里提一下，选择任意一个元素，在右边的Style面板下拉倒最下面，都可以看到我们的盒子模型(网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)。这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解，所以叫它盒子模式。)

　　直接在Element面板下，双击修改其文本的内容（这里改成余额好多钱，是不是以后都不能相信截图了）

　　这是作者使用浏览器保密码的有道云笔记的登录页面，你可以看到浏览器默认给你填充好了账号和密码。密码使用···号表示并不可见。

　　文章由325棋牌提供发布