php未正确拼写字 css,前端Bug解决方案

没错！我正在写bug呢！不管你是小白还是大牛，写bug无可避免，遇到bug怎么办？别慌！毛主席教导我们“战略上藐视BUG，战术上重视BUG”！

前端遇到的bug无非就三个方面结构层(HTML)，表现层(CSS)，行为层(JavaScript)。

一、结构层(HTML)

HTML出错的主要原因是对规范不够理解，没有按照规范来布局。网上搜到很多常见的HTNML错误都是如此：

错误1. 标签嵌套混乱

例1：比如常见的p标签里嵌套div标签

我是一个段落

我是一个块级元素我是一个段落

浏览器解析后就变成这样了

例2：缺少结束标签，或结束标签时机不对。

有时候往往是一个标签没有闭合导致整个布局错乱。

/*错误代码*/

1111

2222

3333

aaa

/*正确代码*/

1111

2222

3333

aaa

错误原因：DTD中规定了块级元素是不能放在P里;P标签内包含块元素时，它会先结束自己。另外提一下，内联元素不可以包含块元素。

解决思路：如上图，就是谷歌浏览器按F12(command+option)打开控制台看元素。

错误2.滥使用br标签

br标签作用在于换行的，而被用来增加行间距和内联元素之间的换行。

/*错误代码*/

我是一句话

我是一句话

我是一句话

我是一个链接

我是一个链接

我是一个链接

/*正确代码*/

我是一句话

我是一句话

我是一句话

• 我是一个链接
• 我是一个链接
• 我是一个链接

错误原因： br标签目的在于换行，作为增加间距不能准确的给出具体的间距大小，作为列表不能明确的表示这是一个列表。

解决思路：，通常是用line-height来调整行间距，用padding来解决段落之间的间距。这样也能很好的做到结构样式分离。

错误3.使用内联的样式

为了代码结构清晰，结构样式分离，我们不推荐使用内联样式。另外当有行为层的时候我们大多通过js来改变的是内联样式。在结构使用内联样式会带来很多麻烦。

/*错误代码*/

/*正确代码*/

不在此一一列举，若你遇到代表性问题欢迎留言！参考:10种常见的HTML标签错误写法

小结：结构层(HTML)问题的解决方案就是谷歌浏览器按F12(command+option)打开控制台看元素结构是不是你设想的一样。

二、表现层(CSS)

少数原因由于粗心大意少写了分号或者结尾的花括号｝导致后面的样式都不起作用了。或者单词拼写错误引起的样式无效。在开发过程中建议使用代码提示，自动补全功能的编辑器(比如：WebStorm)。学习练习的时候使用手写的编辑器。

css错误大多来自对css权重的不理解。排除粗心因素通常遇到到设置的样式不起作用就是这类原因。

错误1：z-index不起作用，或者是负的margin值会影响z-index？。

p{background-color: red; width: 200px; height: 100px ; position: relative; z-index: 1}

div{background-color: green;width: 200px; height: 100px; margin-top: -50px ;z-index: 999}

我是一个段落

我是一个块

错误原因，定位影响层级，定位元素层级高。z-index无效。另外浮动元素也影响层级。

解决思路：查找CSS错误的完整步骤

小结：表现层(CSS)解决方案还是利用浏览器的元素审查功能，查看你的元素，给元素添加行内样式测试是否有效。如果你的css样式经常不起作用。请认真阅读下面两篇文章css权重和Css常用的排序方式权重分配

错误2：在用background-image设置渐变背景的时候，在hover的时候设置background：none无效，还是有渐变背景。

解决方案：在hover的时候设置background-image:none才能清除渐变背景。

错误3：有的浏览器正常有的浏览器不正常

这里主要针对css3的兼容性，关于低版本的ie不做考虑。抵制垃圾浏览器从我做起！

例如

display:flex

display:-webkit-flex

错误原因：没有做兼容性处理；

解决方案：CSS3新特性，兼容性，兼容方法总结

三、行为层(JavaScript)

错误1：找不到对象

例如:

document.querySelector("#div1 > div").innerHTML = "first div";

alert("111111111111");

当我们运行这段代码的时候报出了一个错误

"Uncaught TypeError: Cannot set property 'innerHTML' of null" /AJAX_TEST/selector_test.html (43)

这个时候我们只要根据错误提示找到出错的地方(43)行，这个时候我们会发现这段代码

document.querySelector("#div1 > div").innerHTML = "first div";

出错的原因就是document.querySelector("#div1 > div")该选择器找不到该元素节点，然后我们根据选择器找到节点

发现该元素节点被注释掉了，我们将该注释取消就OK了

解决思路：在谷歌浏览器控制台查看有没有报错。有报错的，根据报错提示，直接找到报错的那行代码。

用注释法或者alert输出法查找原因。

错误2:方法/变量未定义

例如：通过类名获取元素在有的浏览器不支持

解决思路：用if判断如果浏览器支持的情况下怎么出来，不支持的情况下怎么处理，兼容性处理如下

function getClass(n){

if(document.getElementsByClassName){

return document.getElementsByClassName(n);

}else{

var objArr=document.getElementsByTagName('*');

var arrClass=[];

for(var i=0;i

var nameArr = objArr[i].className.split(' ');

for(var j=0;j

if(nameArr[j]==n){

arrClass.push(objArr[i]);

}

}

}

return arrClass;

}

小结：JavaScript错误处理方式

1.通过谷歌或火狐浏览器控制台查看错误提示，定位错误代码，打断点定位错误代码。

2.如果没错误提示的，在源代码中用alert输出，或者逐步注释功能代码块，定位错误代码片段。

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的php未正确拼写字 css,前端Bug解决方案的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。