Web前端工作中常见的div+css错误

序员其实也是一个需要认真仔细的工作，特别是从事web前端的朋友，在写代码的时候更应该认真仔细，一不小心就会出现问题。今天小编就为大家准备了这篇文章大家一起来看一看在web前端工作中如何检查和处理常见的div+css错误。

1. 检查HTML元素是否拼写错误、是否忘记结束标记

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

2. 检查CSS是否正确

检查一下有无拼写错误、是否忘记结尾的｝或者在｝后面存在其他符号等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具，但也能检查出拼写错误。

3. 确定错误发生的位置

假如错误影响了整体布局，则可以逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。

4. 利用border属性确定出错元素的布局特性

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界，错误原因即水落石出。

5. float元素的父元素不能指定clear属性

MacIE下假如对float的元素的父元素使用clear属性，四周的float元素布局就会混乱。这是MacIE的闻名的bug，倘若不知道就会走弯路。

6. float元素务必指定width属性

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何，一定要为其指定width属性。

另外指定元素时尽量使用em而不是px做单位。

7. float元素不能指定margin和padding等属性

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在 float元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定非凡的值。

8. float元素的宽度之和要小于100%

假如float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

9. 是否重设了默认的样式?

某些属性如margin、padding等，不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为0、列表样式设置为none等。

10. 是否忘记了写DTD?

假如无论怎样调整不同浏览器显示结果还是不一样，那么可以检查一下页面开头是不是忘了写下面这行DTD：

html4.01： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"/>
html5： <!DOCTYPE html>

以上就是关于Web前端工作中常见的div+css错误的检查和处理方法的注意事项，大家也可以关注“武汉千锋”微信公众号，小千定时分享行业最新动态和学习资料！

JavaScript 引擎执行 JavaScript 代码时，会发生各种错误：可能是语法错误，通常是程序员造成的编码错误或错别字；可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)；可能是由于来自服务器或用户的错误输出而导致的错误；也可能是由于许多其他不可预知的因素。那么js有没有好的可以检测错误的呢？

JS本身是动态语言，因此人们普遍认为它是一种最难于调试的编程语言。脚本出错时，由于没有上下文信息，让人摸不着头脑，ECMAScript 第 3 版致力于解决这个问题，专门引入了try-catch和throw等语句以及一些错误类型，意在让开发人员能够适当地处理错误，提升开发效率。

1. Error 实例对象

JavaScript 解析或运行时，一旦发生错误，引擎就会抛出一个错误对象。JavaScript 原生提供Error构造函数，所有抛出的错误都是这个构造函数的实例。

var err=new Error('出错了');
err.message // "出错了"

抛出Error实例对象以后，整个程序就中断在发生错误的地方，不再往下执行。

Error具有下面一些主要属性：

description: 错误描述 (仅IE可用).
fileName: 出错的文件名 (仅Mozilla可用).
lineNumber: 出错的行数 (仅Mozilla可用).
message: 错误信息 (在IE下同description)
name: 错误类型.
number: 错误代码 (仅IE可用).
stack: 像Java中的Stack Trace一样的错误堆栈信息 (仅Mozilla可用).

2. 原生错误类型

Error 实例对象是最一般的错误类型，在它的基础上，JavaScript 还定义了其他 6 种错误对象。也就是说，存在Error 的 6 个派生对象。

2.1 SyntaxError 对象

SyntaxError 对象是解析代码时发生的语法错误。

// 变量名错误  错误提示是“token 非法”
var 1a;
// Uncaught SyntaxError: Invalid or unexpected token

// 缺少括号  错误提示是“字符串不符合要求”
console.log 'hello');
// Uncaught SyntaxError: Unexpected string

2.2 ReferenceError 对象

ReferenceError 对象是引用一个不存在的变量时发生的错误。

// 使用一个不存在的变量
unknownVariable
// Uncaught ReferenceError: unknownVariable is not defined

另一种触发场景是，将一个值分配给无法分配的对象。

// 等号左侧不是变量
console.log()=1
// Uncaught ReferenceError: Invalid left-hand side in assignment

// this 对象不能手动赋值
this=1
// ReferenceError: Invalid left-hand side in assignment

2.3 RangeError 对象

RangeError 对象是一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是 Number 对象的方法参数超出范围，以及函数堆栈超过最大值。

// 数组长度不得为负数
new Array(-1)
// Uncaught RangeError: Invalid array length

2.4 TypeError 对象

TypeError 对象是变量或参数不是预期类型时发生的错误。比如，对字符串、布尔值、数值等原始类型的值使用 new 命令，就会抛出这种错误，因为 new 命令的参数应该是一个构造函数。

new 123
// Uncaught TypeError: number is not a func

var obj={};
obj.unknownMethod()
// Uncaught TypeError: obj.unknownMethod is not a function

2.5 URIError 对象

URIError 对象是 URI 相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。

2.6 EvalError 对象

eval函数没有被正确执行时，会抛出EvalError错误。该错误类型已经不再使用了，只是为了保证与以前代码兼容，才继续保留。

2.7 总结

以上这6种派生错误，连同原始的 Error 对象，都是构造函数。这些构造函数都接受一个参数，代表错误提示信息（message）。

var err1=new Error('出错了！');
var err2=new RangeError('出错了，变量超出有效范围！');
var err3=new TypeError('出错了，变量类型无效！');

err1.message // "出错了！"
err2.message // "出错了，变量超出有效范围！"
err3.message // "出错了，变量类型无效！"

3. throw 语句

throw 语句的作用是主动中断程序执行，抛出一个错误。

var x=-1
if (x <=0) {
  throw new Error('x 必须为正数');
}
// Uncaught Error: x 必须为正数

上面代码中，如果变量 x 小于等于 0，就手动抛出一个错误，告诉用户 x 的值不正确，整个程序就会在这里中断执行。可以看到，throw 抛出的错误就是它的参数，这里是一个 Error 实例。

throw 可以抛出任何类型的值。也就是说，它的参数可以是任何值。

// 抛出一个字符串
throw 'Error！';
// Uncaught Error！

// 抛出一个数值
throw 42;
// Uncaught 42

对于 JavaScript 引擎来说，遇到throw 语句，程序就中止了。引擎会接收到throw抛出的信息，可能是一个错误实例，也可能是其他类型的值。

4. try...catch 结构

一旦发生错误，程序就中止执行了。JavaScript 提供了 try...catch 结构，允许对错误进行处理，选择是否往下执行。

如果你不确定某些代码是否会报错，就可以把它们放在 try...catch 代码块之中，便于进一步对错误进行处理。

try {
  throw "出错了";
} catch (e) {
  console.log(111);
}
console.log(222);
// 111
// 222

上面代码中，try 代码块抛出的错误，被catch代码块捕获后，程序不会中断，会按照正常流程继续执行下去。

5. finally 代码块

try...catch 结构允许在最后添加一个finally代码块，表示不管是否出现错误，都必需在最后运行的语句。

function cleansUp() {
  try {
    throw new Error('出错了……');
    console.log('此行不会执行');
  } finally {
    console.log('完成清理工作');
  }
}

cleansUp()
// 完成清理工作
// Uncaught Error: 出错了……
//    at cleansUp (<anonymous>:3:11)
//    at <anonymous>:10:1

上面代码中，由于没有 catch 语句块，一旦发生错误，代码就会中断执行。中断执行之前，会先执行 finally 代码块，然后再向用户提示报错信息。

下面的例子说明，return 语句的执行是排在finally代码之前，只是等finally代码执行完毕后才返回。

var count=0;
function countUp() {
  try {
    return count;
  } finally {
    count++;
  }
}

countUp()
// 0
count
// 1
// return语句里面的count的值，是在finally代码块运行之前就获取了。

下面的例子充分反映了 try...catch...finally 这三者之间的执行顺序。

function f() {
  try {
    console.log(0);
    throw 'bug';
  } catch(e) {
    console.log(1);
    return true; // 这句原本会延迟到 finally 代码块结束再执行
    console.log(2); // 不会运行
  } finally {
    console.log(3);
    return false; // 这句会覆盖掉前面那句 return
    console.log(4); // 不会运行
  }

  console.log(5); // 不会运行
}

var result=f();
// 0
// 1
// 3

result
// false

上面代码中，catch 代码块结束执行之前，会先执行 finally 代码块。

finally代码块用法的典型场景：

openFile();

try {
  writeFile(Data);
} catch(e) {
  handleError(e);
} finally {
  closeFile();
}

上面代码首先打开一个文件，然后在 try 代码块中写入文件，如果没有发生错误，则运行 finally 代码块关闭文件；一旦发生错误，则先使用 catch 代码块处理错误，再使用 finally 代码块关闭文件。

这里是云端源想IT，帮你轻松学IT”

嗨~ 今天的你过得还好吗？

生活的麻烦是无穷无尽的

快乐之所以短暂是因为

它本就藏在解决这些麻烦的间隙里

你要学会像及时下班一样及时快乐

- 2023.05.10 -

错误是编程过程的一部分。无论是新手还是有十分有经验的程序员，编写程序的过程难免会出现一些错误，作为新手我们应该站在巨人的肩膀上，学会如何避免遇到这样的情况，以及如何在自己的项目中做的更好。

在 JavaScript 中，当代码语句紧密耦合并产生错误时，继续使用剩余的代码语句是没有意义的。相反，我们应该尽可能优雅地从错误中恢复过来。

JavaScript 解释器在出现此类错误时检查异常处理代码，如果没有异常处理程序，程序将返回导致错误的任何函数。对调用堆栈上的每个函数重复此操作，直到找到异常处理程序或到达顶层函数，从而导致程序以错误终止，导致程序的崩溃。

一般来说，有两种处理方式：

1.抛出异常 ：如果在运行时发生的问题无法得到有意义的处理，最好抛出它

function openFile(fileName) {

if (!exists(fileName)) {

throw new Error('找不到文件 ' + fileName)

}

// ...

}

2.捕获异常： 抛出的异常在运行时更有意义的地方被捕获和处理

try {

openFile('../test.js')

} catch(e) {

// 优雅地处理抛出的期望

}

接下来，我们更详细地说说这两种异常处理方式的具体操作。

一、抛出异常

你可能会看到类似 ReferenceError: specs is not defined 这样的情况。这表示通过 throw 语句引发的异常。

语法

throw ?value?

// 不要这样做

if (somethingBadHappened) {

throw 'Something bad happened'

}

对可以作为异常抛出的数据类型没有限制，但 JavaScript 具有特殊的内置异常类型。其中之一是 Error，正如您在前面的示例中所看到的。这些内置的异常类型为我们提供了比异常消息更多的细节。

Error

Error 类型用于表示一般异常。这种类型的异常最常用于实现用户定义的异常。它有两个内置属性可供使用。

message：作为参数传递给 Error 构造函数的内容。例如，new Error('This is an error message')。您可以通过 message 属性访问消息。

const myError=new Error('Error!!!')

console.log(myError.message) // Error!!!

stack ：该属性返回导致错误的文件的历史记录(调用堆栈)。堆栈顶部还包括 message，后面是实际堆栈，从最新/隔离的错误点开始，到最外部负责的文件。

Error: Error!!!

at <anonymous>:1:1

注意：new Error('...') 在抛出之前不会执行任何操作，即 throw new Error('error msg') ?将在 JavaScript 中创建一个 Error 实例，并停止脚本的执行，除非你对 Error 错误执行某些操作，例如捕获它。

二、捕捉异常

现在我们知道了什么是异常以及如何抛出它们，让我们讨论一下如何通过捕获它们来阻止它们破坏我们的程序。

try-catch-finally 是处理异常的最简单方法。

try {

// 要运行的代码

} catch (e) {

// 发生异常时要运行的代码

}

[ // 可选

finally {

// 无论发生异常都始终执行的代码

}

]

在 try 子句中，我们添加了可能产生异常的代码。如果发生异常，则执行 catch 子句。

有时，无论代码是否产生异常，都需要执行代码，这时我们可以使用可选块 finally。即使 try 或 catch 子句执行 return 语句，finally 块也将执行。例如，以下函数返回 'Execute finally'，因为 finally 子句是最后执行的内容。

function foo() {

try {

return true

} finally {

console.log('Execute finally')

}

我们在无法事先检查代码正确性的地方使用 try-catch。

const user='{"name": "D.O", "age": 18}'

try {

// 代码运行

JSON.parse(params)

// 在出现错误的情况下，其余的代码将永远无法运行

console.log(params)

} catch (err) {

// 在异常情况下运行的代码

console.log(err.message) // params is not defined

}

如上所示，在执行代码之前，不可能检查 JSON.parse 以获得 stringify 对象或字符串。

注意：你可以捕获程序产生的异常和运行时异常，但无法捕获 JavaScript 语法错误。

try-catch-finally 只能捕获同步错误。如果我们尝试将其用于异步代码，那么在异步代码完成其执行之前，try-catch-finally 可能已经执行了。那么我们如何处理异步代码块中的异常呢？下面给大家介绍三种方法：

三、如何处理异步代码块中的异常

回调函数

使用回调函数(不推荐)，我们通常会收到两个如下所示的参数：

async function(code, (err, result)=> {

if (err) return console.error(err)

console.log(result)

})

我们可以看到有两个参数：err 和 result。如果有错误，err 参数将等于该错误，我们可以抛出该错误来进行异常处理。

在 if (err) 块中返回某些内容或将其他指令包装在 else 块中都很重要。否则，您可能会遇到另一个错误。例如，当您尝试访问 result.data 时，result 可能未定义。

Promises

使用 promises 的 then 或者 catch，我们可以通过将错误处理程序传递给 then 方法或使用 catch 子句来处理错误。

promise.then(onFulfilled, onRejected)

也可以使用 .catch(onRejected) 而不是 .then(null, onRejected) 添加错误处理程序，其工作方式相同。

让我们看一个 .catch 拒绝 Promise 的例子。

Promise.resolve('1')

.then(res=> {

console.log(res) // 1

throw new Error('go wrong') // 抛出异常

})

.then(res=> {

console.log(res) // 不会被执行

})

.catch(err=> {

console.error(err) // 捕获并处理异常 ——> Error: go wrong

})

使用 async/await 和 try-catch

使用 async/await 和 try-catch-finally，处理异常是轻而易举的事。

async function func() {

try {

await nonExistentFunction()

} catch (err) {

console.error(err) // ReferenceError: nonExistentFunction is not defined

}

现在我们已经很好地理解了如何在同步和异步代码块中执行异常处理，最后，再来看看未捕获的异常又该如何去处理呢？

四、如何处理未捕获的异常

也是要分在浏览器中和在 Node.js 中两种情况的，可以根据实际情况来处理这些异常。

在浏览器中

我们可以使用 window.onerror() 方法来处理未捕获的异常。每当运行时发生错误时，该方法会在 window 对象上触发 error 事件。

onerror() 的另一个实用做法是：当站点中的图片或视频等数据加载出错时，可以用该方法触发某些操作。例如，提供一张加载出错时的图片，或显示一条消息。

在 Node.js 中

EventEmitter 模块派生的 process 对象可以订阅事件 uncaughtException。

process.on('uncaughtException', ()=> {})`

我们可以传递一个回调来处理异常。如果我们尝试捕获这个未捕获的异常，进程将不会终止，因此我们必须手动完成。

uncaughtException 仅适用于同步代码。对于异步代码，还有另一个称为 unhandledRejection 的事件。

process.on('unhandledRejection', ()=> {})

决不要尝试为基本 Error 类型实现 “捕获所有” 处理程序。这将混淆所发生的一切，并损害代码的可维护性和可扩展性。

五、关键要点

throw 语句用于生成用户定义的异常。在运行时，当 throw 遇到语句时，当前函数的执行将停止，控制权将传递给 catch 调用堆栈中的第一个子句。如果没有 catch 子句，程序将终止。
JavaScript 有一些内置的异常类型，最值得注意的是 Error，它返回 Error 中的两个重要属性：stack 和 message。
try 子句将包含可能产生异常的代码，catch 子句会在发生异常时执行。
对于异步代码，最好使用 async/await 配合 try-catch 语句。
可以捕获未处理的异常，这可以防止应用程序崩溃。

在实际JavaScript项目开发过程中当我们遇到异常代码不要觉得麻烦，异常处理可以帮助您提高代码的可维护性、可扩展性和可读性。

今天的分享就到这里了，记得点赞和收藏！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享

在线咨询

上一篇：用php生成HTML文件的类
下一篇：手把手教你Vue+ECharts+高德地图API实现

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web前端工作中常见的div+css错误

1. Error 实例对象

2. 原生错误类型

2.1 SyntaxError 对象

2.2 ReferenceError 对象

2.3 RangeError 对象

2.4 TypeError 对象

2.5 URIError 对象

2.6 EvalError 对象

2.7 总结

3. throw 语句

4. try...catch 结构

5. finally 代码块

一、抛出异常

二、捕捉异常

三、如何处理异步代码块中的异常

四、如何处理未捕获的异常

五、关键要点

您的项目需求