Coder！！！ =》事半功倍的布局调试和元素查找方法

布局问题：

作为玩浏览器的coder，开发者工具（F12）：不论是哪个学习阶段，要事半功十好几倍，必须熟悉了解掰着指头都能数的过来的开发者工具界面以及按钮！！！这比熟悉一部新手机容易多了吧？？？？

1.智能的样式属性选择器------------------------------------------------------

写一行代码，切换到浏览器 按F5 刷新，再看一眼手册改一下代码，再切换到浏览器刷新？？？有没有觉得很累啊。

在开发者工具中删除样式之后按住上下键选择，便可以看到可选的属性，并且页面效果实时更新，你一定会有新的发现！！！

2.切换class调试-----------------------------------------------------------------

看到右上角的.cls了吗？

点击之后可以通过checkbox框切换样式了，输入框也可以输入定义好的class（通常会通过切换class实现样式切换，soeazy！！！这里需要注意有些类的顺序）；

如果在谷歌浏览器，会看到：hov   这是切换伪类专用，火狐的话用形象的图标表现了，就在.cls的左边；

3.html搜索--------------------------------------------------------------------

不论是查看别人代码还是自己代码，要知道选择器选择到的dom对象是什么，最直观的方法就是利用火狐的html搜索功能，在输入框输入CSS选择器并回车，查看面板对应位置会高亮显示，鼠标hover（悬停）变会在client（用户区）高亮显示【火狐会贴心的用虚线和洋气的颜色讲元素显示出来】

4.学会自己做教学DEMO-----------------------------------------------------------

这里可以借鉴张鑫旭老师的课程和博客，慕课网也有，讲课生动风趣。。。博客教程的用户体验也是较好的，只要点点点，拖拖拖，眼过千变，不如手过一遍！！！！每当学习到一个新的知识点的时候，就想一想：“这个技术能否帮助我提高学习效率？？？”技术本身有助于学习技术。前段嘛，还是很有趣的！！！同时，需要下功夫，练好基本功。。当你的调试技能和打字速度达到一定熟练度，别人还在查手册， 你已经有了半成品，别人还在搜百度，你已经做出了效果。