いろいろな%前端开发面试题% 读后感

本文主要记录一些针对常见前端面试问题的个人见解和知识扩展

Edited by Yiyi at 2016/08/15

---

题目一：有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。

审题：”高度自适应”？什么意思？怎么个自适应法？根据子元素的高度自适应？显然不是这个意思，那样的话这道题目就没有意义了。我个人觉得这里的自适应是指父div高度不确定的意思，也就是不管父div高度是多少（前提大于100px），第二个子div的高度都能填充满剩下的部分。PS：如果理解错误欢迎指摘。

//实现方法1：利用定位，效果如下：<div style="position: relative;height: 500px;">    <div style="height: 100px;background-color: red;font-size: 50px;text-align: center;line-height: 100px;">子div：A</div>    <div style="position: absolute;width:100%;top: 100px;bottom: 0px;background: blue;font-size: 50px;text-align: center;">子div：B</div></div>

知识点&实现思路：父div的position为static之外的任意值；第二个子div的position设置为absolute，top为100(第一个子div的高度)，bottom为0，自动拉伸充满剩余部分。之所以父div的position必须设置为static之外的任意值，因为absolute的定位原点是相对于值不为static的第一个父元素进行定位。（position的默认值为static）

---

//实现方法2：利用Flex属性，效果如下：<div style="width:100%;height:250px;border-color:red;display:flex;flex-direction:column;;">    <div style="height: 100px;width: 100%;background-color: #1c4a70; font-size: 50px;text-align: center;line-height: 100px;">子div：A</div>    <div style="flex:1;background-color: yellowgreen; font-size: 50px;text-align: center;">子div：B</div></div>

知识点&实现思路：关于Flex的内容实在有点多，但是不复杂，就不一一总结了。
奉上几篇大神的文章：
阮一峰－语法篇.
阮一峰－实例篇.
张鑫旭－总结篇.

---

//实现方法3：利用CSS3新的属性calc()，一个具有计算能力的属性，效果如下：<div style="width:100%;height:234px;">    <div style="height: 100px;background-color: #22aadd"></div>    <div style="height: calc(100% - 100px);background-color: #b490d0"></div></div>

知识点&实现思路： calc() 函数，在指定元素高度或宽度时，可以基于计算进行设定，而不是简单的使用固定数值，其运算规则如下：
一：使用“+”、“-”、“*” 和 “/”四则运算；
二：可以使用百分比、px、em、rem等单位；
三：可以混合使用各种单位进行计算；
四：表达式中有“+”和“-”时，其前后必须要有空格，width: calc(12%+5em)这种没有空格的写法是错误的；表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格；width:-webkit-calc(100% - (10px + 5px)*2);
赋一张图帮助理解

说到这里，有经验有想法的人会发现，这个功能跟box-sizing:border-box的效果相同，无图无真相：

.border-box{            -webkit-box-sizing:border-box;            -moz-box-sizing:border-box;            width: 100px;            height: 100px;            padding: 10px;            border: 5px solid #3DA3EF;            background: yellow;        }

也就是说，如果一个元素指定了box-sizing:border-box，那么元素的高度：100px ＝ content高度 ＋ 上下padding高度总和 ＋ 上下border高度总和 ，这样一来content的高度就不用手动计算了！
box-sizing的默认值为content-box，也就是如果指定元素width为100px，那么其content高度就被设置为100px。此时元素自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。也就是说，如果你的元素宽度是100%时，只要你在元素中添加了border,padding,margin任何一值，都将会把元素盒子撑破（标准模式下，除IE怪异模式）。

.calc{            background: #f60;            padding: 10px;            border: 5px solid green;            width: 90%;/*写给不支持calc()的浏览器*/            width:-moz-calc(100% - (10px + 5px) * 2);            width:-webkit-calc(100% - (10px + 5px)*2);            width: calc(100% - (10px + 5px) * 2);            height: 90%;/*写给不支持calc()的浏览器*/            height:-moz-calc(100% - (10px + 5px) * 2);            height:-webkit-calc(100% - (10px + 5px) * 2);            height: calc(100% - (10px + 5px) * 2);        }

相比于box-sizing:border-box，如果想实现content高度的自适应，就要利用calc属性手动计算然后赋值。
总结：以上两种实现方式各有利弊，可自行Google；至于选择鱼还是熊掌，就看你是生在海边喜欢吃海鲜囊，还是长在内陆喜欢大口吃肉了。

---

题目二：浏览器的标准模式(strict mode)和怪异模式(quirks mode)

标准模式：浏览器按W3C标准解析执行代码；
怪异模式：浏览器按照自己的方式解析执行代码；
因为不同浏览器解析执行的方式不一样，所以我们称之为怪异模式。
浏览器从服务端获取网页后会根据文档的DOCTYPE定义显示网页，如果文档最开头部分定义且正确定义了DOCTYPE浏览器则会进入标准模式（Standards Mode），否则浏览器会进入怪异模式或混杂模式（Quirks mode）。
这两种模式引起最大的问题就是下图盒模式的问题:

如上图，在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。即：
Strict Mode：width是内容宽度，元素真正的宽度 ＝ width ＋ margin-left + border-left-width + padding-left + padding-right + border-right-width + margin-right；
Quirks Mode：width是元素的实际宽度，内容宽度 ＝ width - (padding-left + padding-right + border-left-width +border-right-width)

怎样解决IE盒模型导致的表现差异：
1⃣️避免导致这个问题的情景：这是首选，避免同时为一个元素同时设置width和padding值或者width和border值，再或者width同时和它们两个值。这确保了所有的浏览器都会一样的去计算元素的总宽度，而不用考虑它们使用哪种盒模型方式。
2⃣️插入额外的标记：我们拿一个例子来说明一下，下面的HTML用来定义一个新闻列表：

//为了得到一个250像素宽的列表，且应用1像素的边框和10像素的填充，会用到这样的CSS：#news {  padding:10px;  border:1px solid;  width:228px;}<div id="news">  <h2>News</h2>  <ul>    <li>      <h3>News article 1</h3>      <p>Lorem ipsum dolor sit amet</p>    </li>    <li>      <h3>News article 2</h3>      <p>Lorem ipsum dolor sit amet</p>    </li>  </ul></div>

在符合标准的浏览器中，总宽度是250像素（1px left border + 10px left padding + width + 10px right padding + 1px right border）。但在IE5.5及更早的版本中，总宽度只是228像素，因为它并未计算边框和填充的值。那么该如何避免这个问题呢？
方案一：为父容器（sidebar）设置宽度来达到效果

#sidebar {width:250px}#news {  padding:10px;  border:1px solid;}<div id="sidebar">  <div id="news">    ...  </div></div>

方案二：在#news里面插入一个标记来达到效果，思路是外层的元素提供宽度，包含在里面的元素提供边框和填充。

#news {width:250px}#news div {  padding:10px;  border:1px solid;}<div id="news">  <div>  <h2>News</h2>    <ul>      ...    </ul>  </div></div>

3⃣️使用条件注释判断语句：果没有合适的父容器来控制宽度也不能通过添加额外的标记解决问题，那针对IE 5.*/Win我们就需要设置一个不同的width值了。最安全的方式就是使用条件注释判断语句（conditional comments）这些内容只能在IE/Win中被解析，下面的代码只有在IE6以下的版本中被执行：

<!--[if lt IE 6]><style type="text/css">  #news {width:250px}</style><![endif]-->

如果你打算使用这个方法，我建议将全部的针对IE 5.*/Win的代码都转移到一个单独的CSS文件中来加载它：

<!--[if lt IE 6]><link rel="stylesheet" type="text/css" href="/css/ie5.css"><![endif]-->

4⃣️使用CSS hacks：（虽然尽量不要使用hacks）针对盒模型问题最简单的CSS hack是SBMH（The simplified box model hack），案例的HTML代码和上面第一个是一样的，CSS是：

#news {  padding:10px;  border:1px solid;  width:250px;  width:228px;}

思路：所有的浏览器都会看到并理解“width:250px”，但IE 5./Win不会读取下面的一行，width:228px，但这行会被其余的浏览器解析。所以最后，IE 5./Win得到的width值是250px，其他浏览器得到的是228px。这样，在全部的浏览器中我们的新闻列表的总宽度就一致了。
Hack的使用：CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法.

关于标准模式和怪异模式的其它区别：狠狠地点击我：IBM大神的总结.

---

题目三：HTML和XHTML的异同

什么是HTML：超文本标记语言（HyperText Markup Language）
什么是XHTML：可扩展的超文本标签语言（EXtensible HyperText Markup Language）
HTML：结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
XHTML：可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言的应用，是一种非常灵活的置标语言；XHTML则基于可扩展标记语言，可扩展标记语言是标准通用置标语言的一个子集。
XHTML与HTML的对比：
1⃣️所有的标记都必须要有一个相应的结束标记；
✅：<p>this is example.</p>
❌：<p>this is example.
2⃣️所有标签的元素和属性的名字都必须使用小写；
✅：<table width="100%">
❌：<table WIDTH="100%">
3⃣️所有的XML标记都必须合理嵌套；
✅：<p><span>this is example.</span></p>
❌：<p><span>this is example.</p></span>
4⃣️所有的属性必须用引号”“括起来；
✅：<table width="100%">
❌：<table width=100%>
5⃣️把所有<和&特殊符号用编码表示；
6⃣️所有属性都必须有一个值，没有值的就重复本身；
✅：

<input checked="checked" /> <input readonly="readonly" /><input disabled="disabled" /> <option selected="selected" /> 

❌：

<input checked> <input readonly> <input disabled><option selected> 

7⃣️不要在注释内容中使“–”；
✅：<!--这里是注释============这里是注释-->
❌：<!--这里是注释-----------这里是注释-->
⚠️：“–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。
8⃣️用id属性来替代name属性；
✅：<img src="picture.gif" id="picture1" />
❌：<img src="picture.gif" name="picture1" />
⚠️：为了版本比较低的浏览器，你应该同时使用name和id属性，并使它们两个的值相同的：<img src="picture.gif" id="picture1" name="picture1" />
9⃣️：图片必须有说明文字；
✅：<img src="ball.jpg" alt="large red ball" title="large red ball"/>
⚠️：为了兼容火狐和IE浏览器，对于图片标签，尽量采用 alt和title双标签，单纯的alt标签在火狐下没有图片说明！

---

题目四：常见浏览器的内核

IE，360，搜狗：trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)

---

题目五：DOCTYPE作用？为什么HTML5只需要写<!DOCTYPE html>？如果不定义或者定义错误会导致什么结果？

DOCTYPE作用：<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前，告知浏览器的解析器用什么文档标准（规范）解析这个文档。
为什么HTML5只需要写<!DOCTYPE html>： HTML5 不基于 SGML(Standard Generalized Markup language 标准通用标记语言)，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照H5的标准去解析渲染文档）
如果不定义或者定义错误会导致什么结果：DOCTYPE不存在或格式不正确会导致文档以兼容模式（Quirks）呈现。

---

题目六：常见的 DOCTYPE 声明有哪些？

1⃣️HTML 5

<!DOCTYPE html>

2⃣️HTML 4.01 Strict：这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

3⃣️HTML 4.01 Transitional：这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

4⃣️HTML 4.01 Frameset：这个 DTD 与 HTML 4.01 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

5⃣️XHTML 1.0 Strict：这个 DTD 包含所有 HTML 元素和属性，但不包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。（请上翻题目三）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

6⃣️XHTML 1.0 Transitional：这个 DTD 包含所有 HTML 元素和属性，包括表象或过时的元素（如 font ）。框架集是不允许的。结构必须按标准格式的 XML 进行书写。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

7⃣️XHTML 1.0 Frameset：这个 DTD 与 XHTML 1.0 Transitional 相同，但是允许使用框架集内容。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

8⃣️XHTML 1.1：这个 DTD 与 XHTML 1.0 Strict 相同，但是允许您添加模块（例如为东亚语言提供 ruby 支持）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

---

题目七：谈谈你对浏览器内核的理解？

早起的浏览器中，引擎包括两大部分：渲染引擎和JS引擎。
现在常说的浏览器引擎，就是渲染引擎。 JS引擎已经独立出来了(最著名的就属Chrome的V8)

渲染引擎工作原理：
浏览器就收到HTML文件和CSS文件；
首先Parse对文件进行解析；
然后将对应的HTML生成为DOM，CSS解析为CSS Object Model；
然后两者合并，最后绘制到页面上。如下图

JS引擎是怎么和浏览器渲染引擎相互工作：
从服务器获得HTML文件，浏览器开始解析文档；
解析到script标签时，则会暂停解析，将控制权给JS引擎；
如果script引用的是外部资源，则会发起请求进行加载，然后执行；
执行完毕后再将控制权还给渲染引擎，然后继续解析；
PS：由于浏览器会将控制权交给JS引擎，所以如果要加载的资源过大，会造成网页卡死，直到文件加载完成为止。所以，通用的做法就是将js文件放到body底部，保证DOM树的完整渲染。

reflow（重流，重排）与repaint（重绘）：
通常页面在加载你的js，css，img等文件时，引擎会对文件加以解析，最终生成两颗树：渲染树和DOM树
渲染树：要显示到页面上，展示给用户看的真实节点（所以display:none的节点则不会存在）
DOM树：页面显示的HTML结构（所有的节点都存在）
当渲染树和DOM树都已经完成的时候，则开始将页面显示到桌面上了。
这时候，如果你改变页面的DOM结构，浏览器则会重新改动涉及到的DOM. 此时你的渲染树和DOM树就会发生改变。
浏览器重新计算出渲染树这一过程叫做重流(重排)。reflow是可以优化的，比如图片在css.css样式文件中就定义好图片的高度，这要会减少重新渲染的次数。
将更新后的结构重新渲染到页面这一过程叫做重绘。只是改变如背景颜色或者文字的颜色，没有改变其它节点的形状布局。
repaint的速度要比reflow的速度明显快的多。
重流必将引起重绘，而重绘不一定会引起重流。

渲染树构建之渲染树和DOM树的关系.
通俗易懂的重绘和重排.

---

题目八：两个CSS隐藏节点语句visibility和display的异同

visibility：visible（默认，元素是可见的）；hidden（元素是不可见的，但仍然影响布局）；inherit（visibility 属性的值从父元素继承）

display：inline（默认，元素呈现为内联元素）；block（元素呈现为块级元素）
；none（元素被隐藏）
HTML 中的元素大多是”内联”或”块”元素：一个内联元素，在其左侧和右侧都是浮动内容。一个块元素填满整个行，并没有什么可显示在其左侧或右侧。

visibility和display属性都用于显示或隐藏一个元素。
如果设置 display:none，将隐藏整个元素，也不占用位置；
如果设置 visibility:hidden，元素的内容将不可见，但元素保持原来的位置和大小。
通过修改visibility属性控制元素显示或者隐藏只会触发重绘；而display则即会触发重流，又会触发重绘。（请上翻题目六）

---

题目九：cookies，sessionStorage和localStorage的区别？

1⃣️数据储存流通方式：
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie数据始终在同源（cookie还需要指定作用域，不可以跨域调用）的http请求中携带（即使不需要），即：会在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
2⃣️存储大小：
cookie数据大小不能超过4k。
sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3⃣️有期时间：
localStorage—存储持久数据，浏览器关闭后数据不丢失除非主动删除数据。
sessionStorage — 数据在当前浏览器窗口关闭后自动删除。
cookie—设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4⃣️数据操作：
Web Storage拥有setItem，getItem，removeItem，clear等方法。
cookie需要前端开发者自己封装setCookie，getCookie。

eg：    sessionStorage.setItem(key, value)    Storage.prototype.setItem = function(key,data) {};    sessionStorage.getItem(key)    Storage.prototype.getItem = function(key) {};    sessionStorage.removeItem(key)    Storage.prototype.removeItem = function(key) {};    sessionStorage.clear()    Storage.prototype.clear = function() {};

---

题目十：href 和 src 的区别；link和@import的区别

href ：
(Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。

<link href="style.css" rel="stylesheet" />

浏览器明白当前资源是一个样式表，页面解析不会暂停（由于浏览器需要样式规则去画或者渲染页面，渲染过程可能会被被暂停）。

src：
src是source的缩写，指向外部资源的位置，嵌入指定资源到当前文档元素定义的位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。在浏览器下载，编译，执行这个文件之前页面的加载和处理会被暂停，这也是建议把JS文件放到底部加载的原因。当然，img标签页与此类似。浏览器暂停加载直到提取和加载图像。

<script src="script.js"></script><img src="..\..\css\image\Img00010.JPG"/>

link：
link属于XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；
页面被加载的时，link会同时被加载；
link是XHTML标签，无兼容问题;
link是html标签，只能放入html中使用；

<link href="style.css" rel="stylesheet" />

@import：
@import是CSS提供的，只能用于加载CSS;
@import引用的CSS会等到页面被加载完再加载，所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况);
@import是CSS2.1 提出的，只在IE5以上才能被识别；
@import作为css样式，既可以存在于HTML中，也可以存在于.CSS文件中；
@import url(style.css) 和@import url(“style.css”)是最优的选择，兼容的浏览器最多。

//在html中<style type="text/css">@import url(CSS文件路径地址);</style>

//在css文件中,直接使用@import url(CSS文件路径地址);

---

题目十一：考察JavaScript的作用域

//==========例1==========var scope='global';function fn(){  alert(scope);  var scope='local';  alert(scope);}fn();    //输出结果？alert(scope);//输出结果？//===========例2==========var scope='global';function fn(){  alert(scope);  scope='local';  alert(scope);}fn();    //输出结果？alert(scope);//输出结果？//===========例3=========var scope='global';function fn(scope){  alert(scope);  scope='local';  alert(scope);}fn();    //输出结果？alert(scope);//输出结果？

上述题目，输出结果分别是：
例1分别输出[undefined , local , global]，
例2分别输出[global , local , local]，
例3结果输出[undefined , local , global]，
＊前提是分别执行，如果你把这一整段代码copy到IDE中运行，会发现是完全不同的结果（微笑脸）

分析：
例1-考点是变量定义提升，相当于如下代码

var scope='global';function fn(){  var scope；  alert(scope);  scope='local';  alert(scope);}

例2-无考点，就是为了迷惑你的，scope是全局变量，操作读取都是针对外层的全局变量，所以值能取到也能改变。

例3-函数参数是按值传递，参数在函数内部相当于局部变量，所以对其修改不会改变外部的全局变量。另一个知识点时JS函数调用的时候只查找最后一个函数名字匹配的函数定义，跟参数个数是否匹配无关。所以先返回undefined。

  var actualArgs = arguments.length; // 获取实际被传递参数的数值  var expectArgs = 函数名.length; // 获取期望参数的数值，函数定义时的预期参数个数

---

题目十二：何为文档流以及position属性的考查

所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。块元素（block）独占一行，常见的有 div，ul，ol，h标签，p标签；内联元素（inline）不独占一行（从左至右依次排列），常见的有 a，label，img，input，textarea。

脱离文档流即是元素打乱了这个排列，或是从排版中拿走。
当前所知的脱离文档流的方式有两种： 浮动和定位 。

position属性值及介绍：
1⃣️absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
2⃣️relative：生成相对定位的元素，相对于其正常位置进行定位。
3⃣️fixed：生成绝对定位的元素，相对于浏览器窗口进行绝对定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
4⃣️static：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
5⃣️inherit：规定从父元素继承 position 属性的值。

⚠️：position的值为absolute、fixed的元素脱离文档流；static、relative没有脱离文档流。

<style type="text/css">        .rel{            border: 1px solid #ccc;            height: 200px;            width: 200px;        }        .rel1{            position: relative;            left: 100px;            top:100px;            background: blue;            height: 50px;            width: 50px;        }    </style><body>    <div class="rel">        <div class="rel1"></div>    </div></body>

1.如果设定TRBL（top，right，bottom，left），并且父级没有设定position属性（默认为static），仍旧以父级的左上角为原点进行定位(和absolute不同)

<style type="text/css">        .rel{            position: absolute;            border: 1px solid #ccc;            height: 200px;            width: 200px;        }        .rel1{            position: relative;            left: 100px;            top:100px;            background: blue;            height: 50px;            width: 50px;        }    </style><body>    <div class="rel">        <div class="rel1"></div>    </div></body>

2.如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决 定(前半段和absolute一样)。如果父级有Padding属性，那么就以内容区域的左上角为原点，进行定位(后半段和absolute不同)。
上述两个栗子效果图如下：

相对定位的总结：
1.使用相对定位的盒子，会相对于它原本的位置（父级左上角，如果父级不存在，则以浏览器左上角进行定位），通过偏移指定的距离，到达新的位置。
2.使用相对定位的盒子仍在标准流中（会占据原来的位置），它对父亲和兄弟盒子都没有任何影响。

        .abs0_1{            top:100px; //没有设置position,此处top无效;            border: 1px solid #ccc;            height: 200px;            width: 200px;            padding: 10px;        }        .abs0_2{            position: absolute;            left: 100px;            top:100px;            background: blue;            height: 50px;            width: 50px;        }        .abs1_1{            position: absolute;            top:260px; //设置了position,此处top有效;            border: 1px solid #ccc;            height: 200px;            width: 200px;            padding: 10px;        }        .abs1_2{            position: absolute;            left: 100px;            top:100px;            background: blue;            height: 50px;            width: 50px;        }<body><div class="abs0_1">    <div class="abs0_2"></div></div><div class="abs1_1">    <div class="abs1_2"></div></div></body>

1.如果设定TRBL，并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。
2.如果设定TRBL，并且父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由TRBL决定。即使父级有Padding属性，对其也不起作用。说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根本没有影 响。
上述两个栗子效果图如下：

绝对定位的总结：
1.若想把一个定位属性为absolute的元素定位于其父级元素内，必须满足两个条件：设 定TRBL且父级设定Position属性（无论是absolute还是relative）。
2.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行定位。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。
3.绝对定位的框从标准流中脱离，这意味着他们对其后的兄弟盒子的定位没有影响，其他的盒子好像就好像这个盒子不存在一样。
点我！定位通俗易懂的讲解

---

题目十三：谈谈HTML语义化编程思想

HTML5提供了语义化更好的内容元素，比如 article、footer、header、nav、section;
语义化的HTML结构首先要强调HTML结构；
用一句话总结语义化编程就是 “用正确的标签做正确的事情”；
HTML语义化优点：
1⃣️让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;
2⃣️即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;
3⃣️有了良好的结构和语义的网页更容易被搜索引擎抓取，搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO，利于网页推广;
4⃣️使阅读源代码的人对网站更容易将网站分块，便于代码阅读维护理解，提高团队开发效率；
5⃣️屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页。

写一段符合语义化编程思想的HTML代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>HTML5语义化编程</title>    <!--meta tags-->    <meta name="keywords" content="HTML5 语义化">    <meta name="description" content="HTML5语义化编程">    <!--stylesheets-->    <link rel="stylesheet" href="css/common.css" type="text/css">    <link rel="stylesheet" href="css/layout.css" type="text/css">    <link rel="stylesheet" href="css/reset.css" type="text/css">    <!--javascript-->    <script src="js/jquery-1.3.2.min.js"></script>    <!--conditional comments-->    <!--[if IE]>        <script src="js/html5.js"></script>    <![endif]--></head><body class="home">    <div id="container">        <header id="page-header">            <div id="logo"><a href="/"><img src="images/logo.gif"  alt="myLogo"></a></div>            <nav id="main-navigation">                <ul>                    <li class="current"><a href="#">首页</a></li>                    <li><a href="#">联系</a></li>                </ul>            </nav>        </header>        <article id="page-content">            <section>                <hgroup>                    <h1>用HTML5做的网页</h1>                    <h2>HTML5+CSS3网页</h2>                </hgroup>                <p>这就是content部分的内容</p>                <h2>A demonstration of list items</h2>                <ul>                    <li>无序list1</li>                    <li>无序list2</li>                </ul>                <ol>                    <li>有序list1</li>                    <li>有序list2</li>                </ol>             </section>            <aside>                <h2>这就是aside部分的内容</h2>                <p>aside部分的内容</p>            </aside>        </article>            </div> <footer>    &copy; Copyright zhangyi 2016 </footer></body></html>

可以看到我们利用了header，nav，article，section，aside，footer这些语义化标签，效果图如下：

手贱的我去掉head部的css样式之后，效果如下：

可以看到，如上总结的，即使在没有CSS样式的情况下，页面也能保持一种文档格式显示，并且是容易阅读的;

---

题目十四：HTML头部（head）一般都包含哪些标签

<head>    <meta/>    <title></title>    <link css外部样式>    <script 外部JS文件>    <style type="text/css"></style></head>

标签中meta属性使用介绍：
meta是html语言head区的一个辅助性标签，meta标签的作用有：搜索引擎优化（SEO），定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等！
1⃣️name属性：
1⃣️－1：Keywords(关键字)：描述该网页内容的一组唯一的关键字。
使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转"> 

1⃣️－2：description(网站内容描述)：不超过 150 个字符且能准确反映网页内容的描述标签，告诉搜索引擎你的网站主要内容。

<meta name="description" content="yiyi的博客,前端开发面试题汇总,meta是html语言head区的一个辅助性标签。"> 

1⃣️－3：robots(机器人向导)：搜索引擎索引方式。

<meta name="robots" content="index,follow" /><!--    all：文件将被检索，且页面上的链接可以被查询；（默认值）    none：文件将不被检索，且页面上的链接不可以被查询；    index：文件将被检索；    follow：页面上的链接可以被查询；    noindex：文件将不被检索；    nofollow：页面上的链接不可以被查询。 -->

1⃣️－4：author(作者)：标注网页的作者

<meta name="author" content="[e-mail]"> 

1⃣️－5：revisit-after：代表网站重访,7days代表7天，依此类推。

<META name="revisit-after" content="7days"> 

2⃣️http-equiv属性：
2⃣️－1：Expires(期限)：设定网页的到期时间。一旦网页过期，必须到服务器上重新传输。

<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT"> ⚠️必须使用GMT的时间格式。

2⃣️－2：Pragma(cache模式)：禁止浏览器从本地计算机的缓存中访问页面内容。

<meta http-equiv="Pragma" content="no-cache"> ⚠️这样设定，访问者将无法脱机浏览。

2⃣️－3：Refresh(刷新)：自动刷新并指向新页面。

<meta http-equiv="Refresh" content="2; URL=http://www.bai du.com"> //(注意后面的引号，分别在秒数的前面和网址的后面) ⚠️其中的2是指停留2秒钟后自动刷新到URL网址。

2⃣️－4：Set-Cookie(cookie设定)：如果网页过期，那么存盘的cookie将被删除。

<meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> ⚠️必须使用GMT的时间格式。

2⃣️－5：content-Type(显示字符集的设定)：设定页面使用的字符集。

<meta http-equiv="content-Type" content="text/html;charset=UTF-8"> meta标签的charset的信息参数如GB2312时，代表说明网站是采用的编码是简体中文；meta标签的charset的信息参数如BIG5时，代表说明网站是采用的编码是繁体中文；meta标签的charset的信息参数如iso-2022-jp时，代表说明网站是采用的编码是日文；meta标签的charset的信息参数如ks_c_5601时，代表说明网站是采用的编码是韩文；meta标签的charset的信息参数如ISO-8859-1时，代表说明网站是采用的编码是英文；meta标签的charset的信息参数如UTF-8时，代表世界通用的语言编码；

2⃣️－6：content-Language（显示语言的设定）

<meta http-equiv="Content-Language"content="zh-cn"/> 

2⃣️－7：Cache-Control（指定请求和响应遵循的缓存机制）
在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。
请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached；
响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。

Public指示响应可被任何缓存区缓存；

Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效；

no-cache指示请求或响应消息不能缓存；

no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存；

max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应；

min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应；

max-stale指示客户机可以接收超出超时期间的响应消息，如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

---