小坑过河

学习之余,总结遇到的坑

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

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

F:wampserverwamp64inapacheapache2.4.17conf  进来后找到 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 进行浏览器页面强制刷新。

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

转载注明出处!

原文地址:https://www.cnblogs.com/fanghl/p/9909478.html