面试题小计

时间  2019-11-13
标签 面试 小计 栏目 快乐工作 繁體版
原文   原文链接

**公司面试题总结 （5.12号第六家一面）javascript

技术很硬的一家公司，只是本身水平还比较水，问的是一些比较基础的东西，可是组织好语言把一件事情的原理讲清楚自我感受仍是有难度，或许就是基础的部分掌握不太好，今天把面试过程的问题总结了下，也算是个巩固（记性很差，能回忆起来的都在下面）css

1.js的值类型和引用类型html

    （1）值类型：number，boolean、null、undefined。
    （2）引用类型：对象、数组、函数。java

    JavaScript中函数参数的传递方式既不是传值，也不是传引用，而是叫传内存的引用： call-by-sharing  node

 1 function changeStuff(num, obj1, obj2)
 2 {
 3     num = num * 10;
 4     obj1.item = "changed";
 5     obj2 = {item: "changed"};
 6 }
 7 
 8 var num = 10;
 9 var obj1 = {item: "unchanged"};
10 var obj2 = {item: "unchanged"};
11 changeStuff(num, obj1, obj2);
12 console.log(num);   // 10
13 console.log(obj1.item);    // changed
14 console.log(obj2.item);    // unchanged
  • changeStuff()中的num, obj1, obj2都是一个引用
  • 他们的内容是某块内存的地址
  • 这个地址的值来自于外部定义的三块内存，是那三块内存地址的一份拷贝
  • 同时，在函数内部这三个参数的值是能够直接被修改的，能够指向其余对象（因为JavaScript中没有指针或引用运算符，只能直接修改）

所以，咱们从内存和引用的角度再来看看changeStuff()的定义：程序员

1 function changeStuff(num, obj1, obj2)
2 {
3     num = num * 10; // 对num赋值，修改num的指向，新内存的内容为old_num * 10
4     obj1.item = "changed";  // 修改原始obj1内存中的内容
5     obj2 = {item: "changed"};   // 对obj2赋值，修改obj2指向，新内存的内容为{item: "changed"}
6 }

下面还有几个例子，仔细区分和理解下面试

 1          function test1(){
 2               var a=[1];
 3               var b=a;
 4               alert(a);// 1
 5               b=[2];
 6               alert(a);//1
 7           }
 8           test1();
 9           function test2(){
10               var a=[1];
11               var b=a;
12               alert(a);// 1
13               b[0]=2;
14               alert(a);//2
15           }
16           test2();
17           function test3(a){
18               a={name:'bob'};
19           }
20           var a={name:'john'};
21           alert(a.name);//john
22           test3(a);
23           alert(a.name);//john
24 
25           function test4(a){
26               a.name='bob';
27           }
28           var a={name:'john'};
29           alert(a.name);//john
30           test4(a);
31  alert(a.name);//bob

2.json的数据格式以及如何处理编程

　　json就是javascript object notation ，他与xml同样都是用来作数据的传递用的，json是一种文本格式，不是文档格式，是独立存在的而不是局限于某一种语言，是理想的数据交换格式
json

json基于两种结构来搭建：（1）.名字/键值对 （2） 有序值的列表
数组

json 各类数据格式以下：（1）object  （2）array （3）value 值  （4）string （5）number

注意：任何的xml均可以经过json的数据格式来表示，json的编码格式统一是Unicode格式，编码默认是UTF-8

3.DOM对象模型

    DOM就是document object model 其中

           document表明文档对象 ，

           object ：对象。js中的对象又分为三种  用户定义对象（由程序员自行建立的对象），内建对象（内建在javascript语言里的对象，ECMA-262 只定义了两个内置对                 象，即 Global 和 Math （它们也是本地对象，根据定义，每一个内置对象都是本地对象），本地对象就是 ECMA-262 定义的类（引用类型）。它们包括：

           Object   Function   Array   String    Boolean   Number    Date   RegExp    Error    EvalError   RangeError   ReferenceError  SyntaxError   TypeError  URIError

           宿主对象（由浏览器提供的对象，全部 BOM 和 DOM 对象都是宿主对象）。

4.选取DOM元素的方法
　　（1）经过ID选取元素：getElementById();该函数是document对象特有的函数，参数只有一个，必须放在单引号，或者双引号里面，返回值是有着该参数的元素节点对应的　　对象。

　　（2）经过标签名获取元素：getElementsByTagName()；也是只有一个参数，参数是标签的名字，可是它返回的是一个对象数组(Nodelist对象)，即便整个文档里这个标签只　　有一个元素，也是返回一个数组，只是这时的数组长度为1,。

　　（3）经过css类选取元素：getElementsByClassName();也是只接受一个参数，及类名，要指定多了类名时，只要在字符串参数中，用空格分隔开来就行

　　如element.getElementsByClassName("class2 class1")将选取elements后代元素中同时应用了class1和class2样式的元素（样式名称不区分前后顺序），返回也是一个对　　象数组（Nodelist对象），对应着文档里的一组特定元素节点。

　　（4）经过名字选取元素：getElementsByName();也是一个参数，name 的名称，返回一个对象数组（Nodelist对象）。Name属性，只在少数的HTML元素中有效，好比：　　表　　单，表单元素，<iframe>，<img>元素。这是由于name属性是为了方便提交表单数据而打造。 而且，getElementsByName()方法，不在Document类中，只是针对　　HTML文档可用，在XML中却不能用。

　　（5）、经过CSS选择器选取元素：document.querySelectorAll("selector") 其中，selector为合法的CSS选择器，好比：　　　　　　　　　　　　　　　　　　　　　　　　经过过#id，.class,p[tittle=”aaa”] , var test=document.querySelectorAll("#test");经过这样得到对象那个后，再继续操做。等等。返回值也是一个对象数组（Nodelist　　对象）。

      这些原生的元素选取的方法比jQuery要快不少。

　　扩展：获取和设置属性。（1）getAttribute()；只有一个参数，打算得到的属性的名字；

                                    （2）setAttribute（）；容许对属性节点值作出修改。使用方法：object.setAttribute(attribute,value);

5.js中的经常使用事件

 onabort     onblur        onchange     onclick     ondblclick onerror     onfocus     onkeydown onkeypress onkeyup     onload                         onmousedown onmousemove onmouseout onmouseover  onmouseup onreset     onresize     onselect     onsubmit     onunload

 6.js调用函数的方法

  • 方法调用模式  　　 好比说给一个对象添加一个方法，而后进行调用 
    1 var myobject={
2             value:0,
3             inc:function(){
4                     alert(this.value)
5                 }
6         }
7     myobject.inc()
  • 函数调用模式   
    1   var add=function(a,b){
2         alert(this)//this被绑顶到window
3             return a+b;
4         }
5     var sum=add(3,4);
6     alert(sum)     
  • 构造器调用模式（不建议使用） 
    1 var quo=function(string){
2             this.status=string;
3         }
4     quo.prototype.get_status=function(){
5             return this.status;
6         }
7     var qq=new quo("aaa");
8     alert(qq.get_status());
  • apply和call调用模式

7.js绑定事件的方法

  • 在DOM元素中直接绑定 
    <input onclick="alert('hello neo')" type="button" value="hello neo"
  • 在javascript代码中绑定  .onclick=function()的格式 
    1 document.getElementById("demo").onclick=function(){
2     alert(this.getAttribute("type"));  //  this 指当前发生事件的HTML元素，这里是<div>标签
3 }
  • addEventListener() 或 attachEvent() 来绑定事件监听函数
     其中前者的使用方法 elementObject.addEventListener(eventName,handle,useCapture)
eventName 事件名称。注意，这里的事件名称没有“ on ”，如鼠标单击事件 click ，鼠标双击事件 doubleclick ，鼠标移入事件 mouseover，鼠标移出事件 mouseout 等。
handle 事件句柄函数，即用来处理事件的函数。
useCapture Boolean类型，是否使用捕获，通常用false 。这里涉及到JavaScript事件流的概念，后续章节将会详细讲解。

           

 

 

后者的使用方法elementObject.attachEvent(eventName,handle); 这里注意eventname有on

addEventListener()是标准的绑定事件监听函数的方法，是W3C所支持的，Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数；  可是，IE8.0及其如下版本不支持该方法，它使用attachEvent()来绑定事件监听函数。因此，这种绑定事件的方法必需要处理浏览器兼容问题。

8.事件冒泡和事件捕获

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

  IE 5.5: div -> body -> document

  IE 6.0: div -> body -> html -> document 

  Mozilla 1.0: div -> body -> html -> document -> window

（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，而后到最精确(也能够在窗口级别捕获事件，不过必须由开发人员特别指定)。

（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，可是，捕获型事件先发生。两种事件流会触及DOM中的全部对象，从document对象开始，也在document对象结束。 

  DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数 useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，仍是事件冒泡时执行。而不兼容W3C的浏览器(IE)用 attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候 执行，因此把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。

传统绑定事件方式
在一个支持W3C DOM的浏览器中，像这样通常的绑定事件方式，是采用的事件冒泡方式。

ele.onclick = doSomething2

IE浏览器
如上面所说，IE只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡仍是捕获，它提供了另外一个函数attachEvent。

ele.attachEvent("onclick", doSomething2);

事件的传播是能够阻止的：
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程当中stopPropagation（）后，后面的冒泡过程也不会发生了~

stopPropagation() 能阻止父元素的click事件函数执行，但不能阻止当前元素同时绑定的其它事件函数执行 。
3.阻止事件的默认行为，例如click <a>后的跳转~
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;
不是全部的事件都能冒泡，例如：blur、focus、load、unload

9.事件委托的机制

所谓事件的委托，就是经过父元素给子元素绑定事件，其实现的原理一是基于事件发生机制中的冒泡过程，二是监听事件源，w3c下是e.target ， IE下是window.event.srcElement   下面是原生的js实现一个事件委托的过程

 1  oUl.onmouseover = function(ev){
 2     var ev = ev || window.event;//获取event对象
 3     var target = ev.target || ev.srcElement;//监听事件源
 4     if(target.nodeName.toLowerCase() == "li"){//当事件源于要添加事件的对象一致时
 5                                                                    //执行事件
 6     target.style.background = "red";
 7     }
 8   }

经过事件委托来绑定事件有两方面的好处 ： 1. 提高性能  2.动态绑定，新添加的元素也有事件，而不用从新执行绑定过程

10.控制台的使用（挖坑，慢慢填）

11.浏览器对象模型 BOM

  • BOM是Browser Object Model的缩写，简称浏览器对象模型
  • BOM提供了独立于内容而与浏览器窗口进行交互的对象
  • 因为BOM主要用于管理窗口与窗口之间的通信，所以其核心对象是window
  • BOM由一系列相关的对象构成，而且每一个对象都提供了不少方法与属性
  • BOM缺少标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是 W3C（WHATWG,WebHypertextApplicationTechnologyWorkingGroup——网页超文本应用程序技术工做组 目前正在努力促进BOM的标准化）
  • BOM最初是Netscape浏览器标准的一部分

 

JavaScript中的任何一个全局函数或变量都是window的属性

window子对象

  • document 对象
  • frames 对象
  • history 对象
  • location 对象
  • navigator 对象
  • screen 对象

window对象关系属性

  • parent：若是当前窗口为frame，指向包含该frame的窗口的frame （frame）
  • self ：指向当前的window对象，与window赞成。 （window对象）
  • top ：若是当前窗口为frame，指向包含该frame的top-level的window对象
  • window ：指向当前的window对象，与self赞成。
  • opener ：当窗口是用javascript打开时，指向打开它的那人窗口（开启者）

window对象定位属性

  • IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置，但未提供任何判断窗口大小的方法。用 document.body.offsetWidth和document.body. offsetHeight属性能够获取视口的大小（显示HTML页的区域），但它们不是标准属性。
  • Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了 window.innerWidth和window.innerHeight属性来判断视口的大小，window.outerWidth和 window.outerHeight属性判断浏览器窗口自身的大小。

window对象的方法

窗体控制
moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数作为参数时会吧窗体移出屏幕的可视区域
resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。若是参数为负值，将缩小窗体，反之扩大窗体
resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素
窗体滚动轴控制
scrollTo(x,y)——在窗体中若是有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
scrollBy(x,y)—— 若是有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
窗体焦点控制
focus()—— 使窗体或控件获取焦点
blur()——与focus函数相反，使窗体或控件失去焦点
新建窗体
open()——打开(弹出)一个新的窗体
close()——关闭窗体
opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思

window.open方法语法

    window.open(url, name, features, replace);

 

open方法参数说明

  • url -- 要载入窗体的URL
  • name -- 新建窗体的名称(目标,将在a 标签的target属性中用到，当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式，所以页面都将以弹出的方式打开
  • features -- 表明窗体特性的字符串，字符串中每一个特性使用逗号分隔
  • replace -- 一个布尔值，说明新载入的页面是否替换当前载入的页面，此参数一般不用指定

open函数features参数说明,若是不使用第三个参数，将打开一个新的普通窗口

参数名称 类型 说明
height Number 设置窗体的高度，不能小于100
left Number 说明建立窗体的左坐标，不能为负值
location Boolean 窗体是否显示地址栏，默认值为no
resizable Boolean 窗体是否容许经过拖动边线调整大小，默认值为no
scrollbars Boolean 窗体中内部超出窗口可视范围时是否容许拖动，默认值为no
toolbar Boolean 窗体是否显示工具栏，默认值为no
top Number 说明建立窗体的上坐标，不能为负值
status Boolean 窗体是否显示状态栏，默认值为no
width Number 建立窗体的宽度，不能小于100

　 特性字符串中的每一个特性使用逗号分隔，每一个特性之间不容许有空格

open方法返回值为一个新窗体的window对象的引用

对话框
alert(str)—— 弹出消息对话框（对话框中有一个“肯定”按钮）
confirm(str)—— 弹出消息对话框（对话框中包含一个“肯定”按钮与“取消”按钮）
prompt(str,defaultValue)——弹出消息对话框（对话框中包含一个“肯定”按钮、“取消”按钮与一个文本输入框），因为各个浏览器实现的不一样，若没有第二个参数（文本框中的默认值）时也最好提供一个空字符串
状态栏
window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时)，浏览器底部的区域称为状态栏，用于向用户显示信息
window.status 属性——临时改变浏览器状态栏的显示
时间等待与间隔函数
setTimeout()—— 暂停指定的毫秒数后执行指定的代码
clearTimeout()——取消指定的setTimeout函数将要执行的代码
setInterval()——间隔指定的毫秒数不停地执行指定的代码
clearInterval()——取消指定的setInterval函数将要执行的代码

setTimeout与setInterval方法有两个参数，第一个参数能够为字符串形式的代码，也能够是函数引用，第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID

    var tid = setTimeout("alert('1')",1000); alert(tid); clearTimeout(tid);

 

History对象,在浏览器历史记录中导航

History 对象的属性:length 返回浏览器历史列表中的 URL 数量

History 对象的方法

  • back() 加载 history 列表中的前一个 URL
  • forward() 加载 history 列表中的下一个 URL
  • go(num) 加载 history 列表中的某个具体页面

Location 对象

Location 对象的属性

  • hash 设置或返回从井号 (#) 开始的 URL（锚）
  • host 设置或返回主机名和当前 URL 的端口号
  • hostname 设置或返回当前 URL 的主机名
  • href 设置或返回完整的 URL
  • pathname 设置或返回当前 URL 的路径部分
  • port 设置或返回当前 URL 的端口号
  • protocol 设置或返回当前 URL 的协议
  • search 设置或返回从问号 (?) 开始的 URL（查询部分）

Location 对象的方法

  • assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是同样的
  • reload() 从新加载当前文档，若是该方法没有规定参数，或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。若是文档已改变，reload() 会再次下载该文档。若是文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是彻底同样的。若是把该方法的参数设置为 true，那么不管文档的最后修改日期是什么，它都会绕过缓存，从服务器上从新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是彻底同样。
  • replace() 用新的文档替换当前文档，replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前纪录。

Navigator对象

Navigator 对象的属性

  • appCodeName 返回浏览器的代码名
  • appName 返回浏览器的名称
  • appVersion 返回浏览器的平台和版本信息
  • browserLanguage 返回当前浏览器的语言
  • cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
  • cpuClass 返回浏览器系统的 CPU 等级
  • onLine 返回指明系统是否处于脱机模式的布尔值
  • platform 返回运行浏览器的操做系统平台
  • systemLanguage 返回 OS 使用的默认语言
  • userAgent 返回由客户机发送服务器的 user-agent 头部的值
  • userLanguage 返回 OS 的天然语言设置

框架与多窗口通讯

子窗口与父窗口

只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口经过window.opener属性来访问父窗口。 而在opener窗口中，能够经过window.open方法的返回值来访问打开的窗口！

框架

window.frames集合：在框架集或包含iframe标签的页面中，frames集合包含了对有框架中窗口的引用

    alert(frames.length);//框架的数目 alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用 //不但可使用下标，还可使用frame标签的name属性 alert(frames["frame1"].document.title);

 

在框架集中还可使用ID来获取子窗口的引用

    var frame1 =document.getElementById("frame1");//这样只是获取了标签 var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用 //还能够直接获取框架中document的引用 var frameDoc = frame1.contentDocument; alert(frameDoc);//但IE不支持contentDocument属性

 

子窗口访问父窗口——window对象的parent属性

子窗口访问顶层——window对象的top属性

浏览器检测

市场上的浏览器种类多的不可胜数，它们的解释引擎各不相同，期待全部浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时 候，然而开发者不能干等着那天。历史上已经有很多方法来解决浏览器兼容问题了，主要分为两种：1.userAgent字符串检测，2.对象检测；固然，也 不能考虑全部的浏览器，咱们须要按照客户需求来，若是能够确信浏览网站的用户都使用或大部分使用IE浏览器，那么你大可放心的使用IE专有的那些丰富的扩 展，固然，一旦用户开始转向另外一个浏览，那么痛苦的日子便开始了。下面是市场上的主流浏览器列表：

  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Opera
  • Safari

注意，浏览器老是不断更新，咱们不但要为多种浏览器做兼容处理，还要对同一浏览器多个版本做兼容处理。好比IE浏览器，其6.0版本和7.0版本都 很流行，由于微软IE随着操做系统绑定安装（以前也是同步发行，微软平均每两年推出一款我的桌面，一样IE也每两年更新一次；直到如今，因为火狐的流 行，IE工做组才加快IE的更新），因此更新的较慢，6.0版和7.0版有很大差异。

市场上还存在一些其它浏览器，但因为它们都是使用的上面所列浏览器的核心，或与上面浏览器使用了相同的解释引擎，因此无需多做考虑。下面是主流的浏览器解释引擎列表：

  1. Trident

    Trident （又称为MSHTML），是微软的窗口操做系统（Windows）搭载的网页浏览器—Internet Explorer的排版引擎的名称，它的第一个版本随着1997年10月Internet Explorer第四版释出，以后不断的加入新的技术并随着新版本的Internet Explorer释出。在将来最新的Internet Explorer第七版中，微软将对Trident排版引擎作了的重大的变更，除了加入新的技术以外，并增长对网页标准的支持。尽管这些变更已经在至关大 的程度上落后了其它的排版引擎。使用该引擎的主要浏览器：IE，TheWorld，MiniIE，Maxthon，腾讯TT浏览器。事实上，这些浏览器是 直接使用了IE核心，由于其userAgent字符串中返回的信息与IE是如出一辙的！

  2. Gecko

    壁虎，英文为"Gecko"。Gecko是由Mozilla基金会开发的布局引擎的名字。它本来叫做NGLayout。Gecko的做用是读取诸如 HTML、CSS、XUL和JavaScript等的网页内容，并呈现到用户屏幕或打印出来。Gecko已经被许多应用程序所使用，包括若干浏览器，例如 Firefox、Mozilla Suite、Camino,Seamonkey等等

  3. Presto

    Presto是一个由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。Presto取代了旧版Opera 4至6版本使用的Elektra排版引擎，包括加入动态功能，例如网页或其部分可随着DOM及Script语法的事件而从新排版。Presto在推出后不 断有更新版本推出，使很多错误得以修正，以及阅读Javascript效能得以最佳化，并成为速度最快的引擎。

  4. KHTML

    是HTML网页排版引擎之一，由KDE所开发。KDE系统自KDE2版起，在档案及网页浏览器使用了KHTML引擎。该引擎以C++编程语言所写， 并以LGPL受权，支援大多数网页浏览标准。因为微软的Internet Explorer的占有率至关高，很多以FrontPage制做的网页均包含只有IE才能读取的非标准语法，为了使KHTML引擎可呈现的网页达到最多， 部分IE专属的语法也一并支援。目前使用KHTML的浏览器有Safari和Google Chrome。而KHTML也产生了许多衍生品，如：WebKit,WebCore引擎

 12.overflow hidden为何可以清除浮动

    首先这涉及到BFC机制，

1.BFC 全称是块级排版上下文，用于对块级元素排版，默认状况下只有根元素（body)一个块级上下文，可是若是一个块级元素 设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局做用域内，声明了一个function就会生成 一个独立的做用域同样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版彻底独立隔绝。
2.独立的块级上下文能够包裹浮动流 ，所有浮动子元素也不会引发容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，因此不用清除浮动来撑起高度。
13.浮动和绝对定位的区别
    当一个元素使用绝对定位后，它的位置将依据浏览器左上角开始计算或相对于父容器（在父容器使用相对定位时）。 绝对定位使元素脱离文档流，所以不占据空间 。普通文档流中元素的布局就当绝对定位的元素不存在时同样。由于 绝对定位的框与文档流无关，因此它们能够覆盖页面上的其余元素。包括文字。　
 　而浮动元素的定位仍是基于正常的文档流，而后从文档流中抽出并尽量远的移动至左侧或 者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后，仍然在文档流中的其余元素将忽略该元素并填补他原先的空间。它只是改变了文档流的显示，而没有脱离文档流，理解了这一点，就很容易弄明白何时用定位，何时用浮动了。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程