web开发常见问题集锦

1.JS控制HTML元素的显示和隐藏

利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。

方法一：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"EleId"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.visibility</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"hidden"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"EleId"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.visibility</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"visible"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

利用上述方法实现隐藏后，页面的位置还被控件占用，显示空白。

方法二：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"EleId"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.display</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"none"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span>
document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.getElementById</span>(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"EleId"</span>)<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.style</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.display</span>=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"inline"</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>

利用上述方法实现隐藏后，页面的位置不被占用。

2.document.documentElement是什么，和document.body的区别？

document是HTML DOM中的文档对象，指代载入浏览器的 HTML文档。document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。 
注意：Document 对象是 BOM中Window 对象的一部分，可通过 window.document 属性对其进行访问。

documentElement 属性可返回文档的根节点。body是DOM中document对象里的body子节点，即 <body>标签；

documentElement 是整个节点树的根节点root，即<html>标签；

DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。

以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。

3.为什么浮动元素可以撑开父级容器？

为什么浮动元素可以撑开父级容器，浮动的元素不是已经脱离文档流，不占用父容器的空间了吗？

原来，如果对父容器同时进行浮动，那么浮动的元素就可以撑开浮动的父容器了。已经在IE9+（包含IE9）和Chrome中得到验证。

参考如下验证的代码：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!doctype html></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"box"</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"box1"</span>></span>
            <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>jsadfasdjfsjdflfakfaslfasjflkajdsklajfhkda;lklj;s<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">p</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">div</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/css"</span>></span><span class="css" style="box-sizing: border-box;">
        <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">p</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">float</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">left</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
        <span class="hljs-id" style="box-sizing: border-box; color: rgb(155, 112, 63);">#box1</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">float</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);">left</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

上面的#box1高度是由子元素<p>的高度决定的，即浮动的<p>撑开了浮动的父级元素#box1。

4.JS获取可视窗口、html文档、body的高度和宽度

高度的获取：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-doctype" style="color: rgb(102, 0, 102); box-sizing: border-box;"><!doctype html></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">head</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">body</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/css"</span>></span><span class="css" style="box-sizing: border-box;">
        *<span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">margin</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">padding</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">0</span></span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
        <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">html</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">1</span>px solid red</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">1000</span>px</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
        <span class="hljs-tag" style="color: rgb(0, 0, 0); box-sizing: border-box;">body</span><span class="hljs-rules" style="box-sizing: border-box;">{<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">border</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">1</span>px solid red</span></span>;<span class="hljs-rule" style="box-sizing: border-box;"><span class="hljs-attribute" style="box-sizing: border-box;">height</span>:<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 102, 102);"><span class="hljs-number" style="box-sizing: border-box;">500</span>px</span></span>;<span class="hljs-rule" style="box-sizing: border-box;">}</span></span>
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">style</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span><span class="javascript" style="box-sizing: border-box;">
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"window.innerHeight:"</span>+window.innerHeight);
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"document.documentElement:"</span>+document.documentElement.offsetHeight);
    alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"document.body.offsetHeight:"</span>+document.body.offsetHeight);
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">html</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li></ul>

宽度的获取：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerWidth</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;//可视窗口宽度</span>
document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.documentElement</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetWidth</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;//html文档宽度</span>
document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetWidth</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;//body元素宽度</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

下面附上网友的总结，可以放到浏览器中试一下，加深理解。

jQuery高度：

<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>window).height());                           <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口可视区域高度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document).height());                        <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档的高度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).height());                <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档body的高度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).outerHeight(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>));  <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档body的总高度 包括border padding margin
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>window).width());                            <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口可视区域宽度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document).width());                        <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档对象宽度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).width());                <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档body的宽度
alert(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$(</span>document.body).outerWidth(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>));  <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span>浏览器当前窗口文档body的总宽度 包括border padding margin</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

JavaScript的各种高度：

<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">网页可见区域宽[仅针对body]： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientWidth</span>
网页可见区域高[仅针对body]： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.clientHeight</span>
网页可见区域宽[仅针对body]： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetWidth</span> (包括滚动条和边框，若滚动条和边框为<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>，则和clientWidth相等)
网页可见区域高[仅针对body]： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.offsetHeight</span> (包括滚动条和边框，若滚动条和边框为<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>，则和clientHeight相等)
可视窗口宽度(包括滚动轴宽度)：window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerWidth</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">; //IE9+、Chrome、Firefox、Opera 以及 Safari</span>
可视窗口高度，不包括浏览器顶部工具栏： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerHeight</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">;//IE9+、Chrome、Firefox、Opera 以及 Safari</span>
网页正文全文宽(不包括滚动轴的宽度)： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollWidth</span>
网页正文全文高：document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollHeight</span>
//假如网页中没有滚动轴，document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollWidth</span>和window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerWidth</span>相等，document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollHeight</span>和window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.innerHeight</span>相等。
网页被卷去的高： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollTop</span>
网页被卷去的左： document<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.body</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.scrollLeft</span>
网页正文部分上： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screenTop</span>
网页正文部分左： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screenLeft</span>
屏幕分辨率的高（整个屏幕的高度）： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.height</span>
屏幕分辨率的宽（整个屏幕的宽度）： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.width</span>
屏幕可用工作区高度： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.availHeight</span>
屏幕可用工作区宽度： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.screen</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.availWidth</span>
整个浏览器可用工作区高度： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.outerHeight</span>
整个浏览器可用工作区宽度： window<span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.outerWidth</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li></ul>

5.如何使固定定位的元素（position:fixed）的元素垂直水平居中在浏览器可视窗口中央？

使用固定定位时，元素的定位的参考对象是浏览器可视窗口，不是body，请切记。此时，使用margin:0 auto;已经没有效果。

此时，只能使用CSS的top和left属性进行定位。这里需要一点计算。计算公式如下：

<code class="hljs ini has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-setting" style="box-sizing: border-box;">top=<span class="hljs-value" style="box-sizing: border-box;">n%;</span></span>
<span class="hljs-setting" style="box-sizing: border-box;">n=<span class="hljs-value" style="box-sizing: border-box;">(窗口高度-元素高度)/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>);</span></span>

<span class="hljs-setting" style="box-sizing: border-box;">left=<span class="hljs-value" style="box-sizing: border-box;">n%;</span></span>
<span class="hljs-setting" style="box-sizing: border-box;">n=<span class="hljs-value" style="box-sizing: border-box;">(窗口宽度-元素宽度)/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>);</span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

6.html中如何键入两个汉字空格？

空格的替代符号有以下几种：

<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">名称      编号      描述  
&nbsp;   &<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#160;   半角空格（1个ASCII码字符宽度）</span>
&ensp;   &<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#8194;  半角空格（当前字体的大写字母“N”的宽度）</span>
&emsp;   &<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#8195;  全角空格（当前字体的大写字母“M”的宽，相当于一个汉字宽度）</span>
&thinsp; &<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">#8201;  窄空白（小于1个ASCII码字符宽度） </span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

所以，要想键入一个汉字宽的空格使用 字符实体，段落开头的缩进也是采用em作为长度单位。缩进的方式是设置CSS属性”text-indent:2em;”。

关于长度单位em的描述见：CSS中常见的长度单位。

7.js在函数中申明变量可以不用var吗？

（1）在函数内部申明变量 
是可以不用var来申明变量，但是有很大的区别。有var和没var声明的变量是不一样的。有var声明的是局部变量，没var的，声明的全局变量，所以可以借此向外暴露接口东东。 参考如下代码：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//函数内部申明全局变量</span>
    <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">test</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        lvlv=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;
    }
    test(); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//需要执行函数来申明全部变量lvlv</span>
    alert(lvlv);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//输出1</span>

    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//函数内部申明局部变量</span>
    <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">test1</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> local=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;
    }
    test1();
    alert(local); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//报错，local is not defined</span>
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>   </code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>

（2）在全局作用域内申明变量 
有var和没var声明的变量看一起是一样，但是也是不一样的。我们知道，声明的全局变量，就是window的属性，究竟是否一样，我们通过ECMAScrpit5提供的属性的特性查询方法，来发现之间的区别。

<code class="hljs coffeescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> fff = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>; 
    <span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>.ffa = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>; 
    ffb = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>; 
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>.ffc = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>; 
    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> ffftx = Object.getOwnPropertyDescriptor(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'fff'</span>); <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">configurable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">false</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">enumerable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">value</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">writable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span> 
    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> ffatx = Object.getOwnPropertyDescriptor(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ffa'</span>); <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">configurable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">enumerable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">value</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">writable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span> 
    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> ffbtx = Object.getOwnPropertyDescriptor(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ffb'</span>); <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">configurable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">enumerable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">value</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">writable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span> 
    <span class="hljs-reserved" style="box-sizing: border-box;">var</span> ffctx = Object.getOwnPropertyDescriptor(<span class="hljs-built_in" style="color: rgb(102, 0, 102); box-sizing: border-box;">window</span>, <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'ffc'</span>); <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span><span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">configurable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">enumerable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">value</span>:<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>,<span class="hljs-attribute" style="box-sizing: border-box; color: rgb(0, 136, 0);">writable</span>:<span class="hljs-literal" style="color: rgb(0, 102, 102); box-sizing: border-box;">true</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

我们可以分别通过alert(ffftx.configurable);等来查看上面的属性值。通过上面，我们发现原来还是有差别的，我们再用delete删除属性来验证下，配置性为false的属性无法删除。也就是通过变量var声明全局对象的属性无法删除，我们还会发现和函数声明创建的全局对象属性也无法删除。

<code class="hljs javascript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">delete</span> fff; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 无法删除 </span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">delete</span> ffa; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 可删除 </span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">delete</span> ffb; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 可删除 </span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">delete</span> ffc; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 可删除</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

（3）JS可以重复申明变量吗？JS申明和定义变量的区别？ 
使用var语句重复声明语句是合法且无害的。如果重复声明且带有赋值，那么就和一般的赋值语句没差别。如果尝试读取没有声明过的变量，JS会报错。参考如下代码：

<code class="hljs delphi has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">test</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">{
        lvlv=1;
    }</span>
    <span class="hljs-title" style="box-sizing: border-box;">test</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>;</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//需要执行函数来申明全部变量lvlv</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> lvlv; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//再申明</span>
    alert(lvlv);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//输出1</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> lvlv=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//再申明</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

了解到这些，我真的不得不感叹js这个脚本语言真的是太强大了！语法太灵活了，以至于让我感到有点松散。如果让学Web前端跨到CC++的话，我觉得会很痛苦。在CC++中，变量的申明和定义是有着本质的区别，而在JS中，申明并没有什么作用，如果使用变量时没有定义，那么依然会输出undefined。比如下面的代码：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> lvlv;     <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//申明(申明在JS中是没用的东西,因为这行没有任何作用)</span>
    alert(lvlv);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//输出undefined</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> lvlv=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">6</span>;   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//再申明（按我的理解是定义）</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> lvlv=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">7</span>;   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//再申明（按我的理解是定义,CC++中不能再次定义）</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

但是，出去最后一行，上面的代码结构在CC++中是完全合法的。变量可以在使用时先申明，后定义。之所以会有这样的差异，因为CC++是编译型语言，在编译时如果发现变量只申明，而没有定义在会编译时报错。因为JS是解释性脚本语言，不存在编译时报错，解释运行时就会输出undefined。

那为什么我在下面已经定义了变量lvlv，而且可以重复定义哦，JS强大吧，在CC++中绝对不会允许这么做的。JS又有点弱智了，竟然不去检查我在下面定义的变量，这是为什么呢？请看我第8小节——JS代码的执行流程是怎样的？

说了这么多，这里给JS中变量的申明和定义下一个定义，以免大家听的糊涂。JS中变量的申明和变量定义有什么区别呢？

JS变量的申明：使用var关键字只申明，不初始化； 
JS变量的定义：使用var关键字或不使用var申明时并初始化。

JS中变量的使用规范：使用时先定义。

在学习CC++的时候，我比较讨厌将申明和定义弄混淆，在学习JS时也是。所以，严格的来说JS变量的申明必须用var，不然的话，那叫做变量的定义。因为我们不能按照如下方式申明变量：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">lvlv; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//浏览器解析时报错</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

定义时却可以：

<code class="hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">lvlv =<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">4</span>;
lvlv=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"lvlv"</span>;
alert(lvlv); <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//输出lvlv</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li></ul>

JS真是各种随意啊。

8.JS代码的执行流程是怎样的？

这里要说明一个概念——JS的代码块。JS的代码块是由<script>标签包围的JS代码，即标记对<script>和</script>之间的代码。下面就是两个JS代码块。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">//代码块1
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> lvlv=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">666</span>;
    alert(lvlv);
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>

//代码块2
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> dable=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">666</span>;
    alert(dable);
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

JS的加载顺序：页面上的JavaScript代码是HTML文档的一部分，所以JavaScript在页面装载的顺序就是其引入标记<script/>标签的出现顺序。

JS的执行流程： JS在加载之后，解析时分为两个阶段，一个是预处理阶段，一个是执行阶段。一个HTML页面中的JS总的执行顺序是和JS的加载顺序一致。只不过JS执行的基本单元是JS代码块。当JS的一个代码块加载完之后，便对它进行预处理，预处理的内容有：语法分析等。当预处理结束之后就开始执行该代码块。

解析完当前的代码块，就是下一个JS代码块的解析了。当然，HTML文档内容的加载（包括JS的加载）和JS解析是同时进行且同步的。即JS一边解析的时候，其他的JS代码可以同时加载，但JS解析时，要保证一个完整的JS代码块已经加载完成。

考察下面的代码，来加深对JS代码的边加载边解析的过程理解。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
      Fn();  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//浏览器报错:"undefined"</span>
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
      <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">Fn</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//函数1</span>
          alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"执行了函数1"</span>);
      }
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

为什么运行上面的代码浏览器会报错呢？声明函数不是会在预处理期就会被处理了吗，怎么还会找不到Fn()函数呢？其实这是一个理解误点，我们上面说了JS引擎是按照代码块来顺序解析的，其实完整的说应该是按照代码块来进行预处理和执行的，也就是说预处理的只是执行到的代码块的声明函数和变量，而对于还未加载的代码块，是没法进行预处理的，这也是边加载边解析的核心所在。

小结： JS并不是等待所有的JS代码加载完成之后才开始解析的，而是加载完一个JS代码块之后便对该代码块进行解析。

根据HTML文档流的执行顺序，需要在页面元素渲染前执行的js代码应该放在前面的<script>代码块中,比如放在<head>标签内。而需要在页面元素加载完后的js放在后面，比如放在<body>标签后面。此外，body标签的onload事件是在最后执行的。

这里还是有个疑问，为什么在同一个JS代码块中在后面定义的函数可以调用，而在后面定义的变量却报not undefined的错误呢？考察如下代码：

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">type</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/javascript"</span>></span><span class="javascript" style="box-sizing: border-box;">
    test();       <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//在同一个JS代码块中，函数可以先调用，后定义</span>
    alert(lvlv);  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//解析错误：</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">var</span> lvlv=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//在后面定义，报Uncaught ReferenceError: lvlv is not defined</span>
    <span class="hljs-function" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">function</span> <span class="hljs-title" style="box-sizing: border-box;">test</span><span class="hljs-params" style="color: rgb(102, 0, 102); box-sizing: border-box;">()</span>{</span>
        alert(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"right"</span>);
    }
</span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

有知道的网友请告知，谢谢。

注：上面对JS代码的执行流程的讲解是参考这篇文章：javascript运行机制之执行顺序详解 
。由于其没有权威的参考资料，所以我们要保持怀疑的态度接受它。

在理解JS代码的执行流程我们可能会想到以下几个问题： 
（1）JS代码的加载顺序。 
答：按照<script>标签在HTML文件中的出现的顺序由上到下顺序加载。

（2）JS代码是等到HTML文档加载完之后，或者是等到所有的JS代码加载完之后才开始解析的吗？ 
答：不是，JS代码是等到一个JS代码块加载完成之后便开始预处理，预处理完之后开始解析。如果预处理出错，则该代码块不会被执行。出错的代码块不会影响其他JS代码块的解析。

（3）JS解析时，HTML文档或者说JS代码可以同时加载吗？ 
答：可以同时加载，一个是JS引擎在工作，一个是http超文本传输协议在工作，二者可以同时进行。但是JS引擎在解析JS代码时，需要等待一个完整的JS代码块加载完成。

（4）JS代码块加载完成之后JS引擎才开始预处理吗，可以加载完一句JS代码就预处理一句呢？ 
答：这个目前还没有查阅到可信的资料，在这里我们姑且简单的认为是JS代码块加载完成之后JS引擎才开始预处理与执行。我上面也是按照这个观点讲解的。如果有知道的网友请留言告知，万分感谢。

参考文献

[1]http://www.cnblogs.com/ckmouse/archive/2012/01/30/2332070.html 
[2]HTML DOM Document 对象 
[3]jquery和JavaScript获取网页相关元素的高度和宽度 
[4]如何在HTML文档中显示空格 
[5]JavaScript中变量声明有var和没var的区别示例介绍：http://www.jb51.net/article/55200.htm