学习之余，总结遇到的坑

1、安装wampserver，一定要安装在盘符的根目录下！！！根目录下的文件夹都可以，否则会报错。如下图 360downloads 就是合格的。

其次，wampserver可能会遇到很多错误，如何检测错误呢？

F:\wampserver\wamp64\bin\apache\apache2.4.17\conf  进来后找到 httpd.conf文件，如图

打开cmd，直接把httpd.conf文件拖到cmd执行，就会看到错误的提示信息了

2、body体宽度并非100%的问题，这个在某些时候不注意会在造成代码错误等，如下图底部文字并没有在body体内，而是通过margin-bottom： -350px； 才让文字沉下去。可是打开百度，F12，却发现它的body是100%高，什么情况？原来浏览器自从IE6以后就不会给body设置宽高了，要给body设置宽高，height： 100% ； 是没有任何作用的，这里的100%是相对元素的父元素设定的，如果不给父元素设置宽高，那么光给body设置高度是无效的。

解决办法这么一说就很能简单了，直接看图

给HTML设置高度后，再给body设置就可以了，解决问题

3、input和button的默认border不一致问题，看图

这个很常见，前面一个input后面button，当你设置同样的height时，却会发现他俩的实际高度是不一样的！！

button在高度计算上始终使用了Quirks模式。在Quirks模式下，边框的计算是在元素的宽度内的，而不像标准模式一样计算在外              （ button的高度包含边框的高度，而文本框text则不包含边框高度。这就类似标准盒子模型和IE盒子模型的区别）

button的高度包含边框的高度，而文本框text则不包含边框高度。

解决：引入reset.css或者自定义样式 border： 0；清除样式，然后自己再设定border

4、Chrome浏览器，当文本代码已经更新，但是浏览器却没有反应，不管是热更新还是手动CtrlS/f5，没有作用。

解决：可能是浏览器使用缓存，这里建议不要写后缀.html文件，写成PHP文件，可减少缓存。大招在这里：shift+f5/ctrl+shift+r 进行浏览器页面强制刷新。

原创文章，不喜勿喷，共同进步

转载注明出处！