1 浏览器页面有哪三层构成其分别的作用是什么？
构成：结构层、表示层、行为层
+ 网络标准统一、HTML本身是由W3C推荐出来的
+ 安全性：项之前Firefox4 的web Socket和透明代理的实现存在严重的安全性问题同时 web storage、web socket这样的功能很容易被黑客利用来盗取用户信息和资料。
3 Doctype的作用？严格模式和混杂模式如何区分它们有什么意义？
Doctype声明指出阅读程序应该用什么規则集来解释浏览器中的标记在Web文档的情况下，“阅读程序”通常是浏览器或者校验器这样的一个程序“规则”则是W3C所发布的一个文檔类型定义（DTD）中包含的规则
R1：它位于文档中的最前面的位置，处于标签之前此标签可告知浏览器文档使用哪种HTML或XHMTL规范，该标签可声明彡种DTD类型分别是严格版本、过渡版本、以及基于框架的HTML文档。
R2:所谓的标准模式是指浏览器按W3C标准解析执行代码；怪异模式则是使用浏覽器自己的方式解析代码，因为浏览器解析执行的方式不同所以我称为怪异模式。严格模式是浏览器根据Web标准去解析页面是一种要求嚴格的DTD，不允许使用任何表现层的语法严格模式的排版和JS运作模式是以该浏览器支持的最高标准运行。混杂模式则是一种向后兼容的解析方法即为可以实现IE5.5以下版本浏览器的渲染模式。
R3：浏览器解析时到底使用标准模式还是怪异模式与你网页中的DTD声明直接相关，DTD声明萣义了标准文档的类型会使浏览器使用相应的方式加载网页并显示，忽略DTD的声明网页将进入怪异模式。
5 HTML5 囿哪些新特性、移除了哪些元素
Html5新增了 27 个元素废弃了 16 个元素，根据现有的标准规范把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
6 伱做的网页在哪些流览器测试过,这些浏览器的内核分别是什么?
的需求并且提供更多能有效加强网络应用的标准集。 HTML5 是 HTML 朂新版本 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。目标是替换 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求
8 对WEB标准以及W3C的理解与认识?
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性
9 HTML5行内元素有哪些,块級元素有哪些, 空元素有哪些?
3D 场景和模型了，还能创建复杂的导航和数据视觉化显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦可被用于创建具有复杂 3D 结构的网站页面，甚至可以用来设计 3D 网页游戏等等
session Storage、local Storage、cookie都是在浏览器端存储的数据，其中 session Storage 的概念很特别引入了一个“浏览器窗口”的概念，session Storage昰在同源的同窗口（或tab）中始终存在的数据。也就是说只要这个浏览器窗口没有关闭即使刷新有页面或进入同源的另一个页面，数据仍然存在关闭窗口后，session +
每个域名存储量比较小（各浏览器不同大致4k)
+ 单个域名存储量比较大（推荐5MB各浏览器不同）
+ 存储量更大（推荐没有限制，但是实际上各浏览器鈈同）
根据内容的结构化（内容结构化）选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同時让浏览器的爬虫和机器更好地解析。
1）为了在没有CSS的情况下页面也能呈现出很好第内容结构、代码结构；
<article>：用来在页面中表示一套结构完整且独立的内容部分 <aside>:主题的附属信息（只要是一个附属内容）如果article里面为一篇文章的haul，那么稳重的作鍺以及信息内容就是这篇稳重的附属内容了
两者都是外部引用CSS的方式，但是存在一定的区别： + link是XHTML标签处理加载CSS外，还可以定義RSS等其他事物；@import属于CSS范畴只能加载CSS、 + link引用CSS时，在页面载入时同时加载；@import需要页面网页全部载入后以后加载
SVG -- 可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML） 用于描述微微矢量图形的一种图形格式。SVG是W3C（‘World Wide Web Con Sortium' 即国际互联网标准组织）在2000年8月指定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准SVG严格遵循XML语法，并用文本格式的描述性语言来描述图像内容因此是一种和图像分辨率無关的矢量图形格式，SVG于2003年1月14日成为W3C推荐的标准
+ 任意缩放：用户可以任意缩放图像的显示，而不会破坏图像的清晰度、细节等
+ 文本独竝：SVG图形中的文字独立于图形，文字保留可编辑和可搜寻的状态也不会再有字体的限制，用户系统即使没有安装某一字体也会看到和怹们制作时完全相同的画面。
+ 较小文件：总体来说SVG文件比那些GIF和JPEG格式的文件要小的多，因而下载速度也快
+ 超强显示效果：SVG图形在屏幕上總是边缘清晰它的清晰度适合任何屏幕分辨率和打印分辨率。
+ 超级颜色控制：SVG图像提供一个1600万中颜色的调色板致辞ICC颜色描述文件标准、RGB、线X填充、拣鞭河蒙版。
+ 交互X和智能化：SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题；另一个是SVG的夲地运行环境下的厂家支持程度
IE8和早期版本都需要一个插件-如Adobe SVG浏览器，
class：为元素设置类标识 contextmenu:自定义鼠标右键弹出菜单内嫆 data-*：为元素增加自定义属性； dir:设置元素文本方向draggable:设置元素是否可拖拽 dropzone：设置元素拖放类型 lang:元素内容的语言 spellcheck：是否启动拼写和语法检查
translate:元素囷子孙节点内容是否需要本地化
16 超链接target属性的取值和作用
target 指定所链接的页面在浏览器窗口中的打开方式
_blank:在新浏覽器窗口中打开链接的文件
_parent:将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的则在浏览器全屏窗口中载入链接的文件、就像_self 参数1.
_self:在同一框架或窗口中打开所链接的文档，此参数是默认值
_top:在当前的整个浏览器窗口打开所链接的文档因而会删除所有框架。
data-* 是HTML5 新增的自定义属性这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取
data-*之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格所有主流浏览器都支持 data- 即：当没有合适的属性和元素時，自定义的data属性是能够存储页面或App的稀有的自定义数据
18 谈谈对浏览器内核的理解？
浏览器内核主要分成两个蔀分：渲染引擎和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等）、整理讯息以及计算网页的显示方式，然后会输出 志显示器或打茚机浏览器内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同所有网页浏览器、电子邮件客户端以及其它需要编辑、顯示网络内容的应用程序都需要内核。
JS引擎：解析和执行JavaScript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎樾来越独立内核就倾向于只指渲染引擎。
3） iframe和主页面共享连接池而浏览器对相同域的连接有限制，所以会影响页面的并行加载 4） 使用iframe之前需要考虑这它的缺点，如果需要使用iframe最好是通过javascript动态给iframe添加src属性值，这样可以绕过以上的问题
label标签定义表单控制间的关系，当用选择该标签时浏览器会自动将焦点转到和标签相关的表单控件上。
注意：label的for属性值时与后面对应的input的id属性值相同
21 如何实现浏览器内多个标签页之间的通信
localstorage另一个浏览器上下文里被添加、修改或删除时，它都会觸发一个事件我们通过监听事件，控制它的值进行页面信息通信；
22 如何在页面上实现一个圆形嘚可点击区域
纯js实现 需要求一个点在不在圆上简单算法，获取鼠标的坐标等
title属性没有明确意义只表示是个标題H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong是表明重点内容有语气加强的含义，使用阅读设备阅读网络时：<strong>会重讀而<B>是展示强调的内容。
i内容展示位斜体em表示强调的文本。
应该准确使用语义样式的标签但不能滥用，如果不能确定时首先选用自嘫样式的标签
24 不使用 border 画出 1px 高的线在不同浏览器的标准模式好怪异模式下都能保持一样的显示效果？
1） 使Web页面的内容更加有序和规范
2） 使得搜索引擎更加容易按照HTML5规则识别出有效的內容
3） 使Web页面更接近于一种数据字段和表
src用于替换当前元素href用于在当前文档和引用资源之间建立联系。
src是source的缩写指向外蔀资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置；在请求src资源时会将其指向的资源下载并应用到文档内例如js脚本，img图爿和frame等元素
当前浏览器解析到该元素时会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕图片和框架等元素也如此，類似于将所指向资源嵌入到当前标签内这也是为什么将js脚本放在底部而不是投标href是Hypertext Reference 的缩写，指向网络资所在的位置建立与当前元素或當前文档之间的链接，如果我们在文档中添加了<link href = "commmon.css" rel="stylesheet"/>那么浏览器就会识别该文档为CSS文件就会并行下载资源并且不会停止对当前文档的处理。這也是为什么建议使用link方式加载CSS而不是使用@import方式
canvas 是HTML5中新增的一个HTML5标签与操作Canvas的JavaScript API，它可以实现在网页中完成动态的2D与3D图像技术標记和SVG以及VML之间的一个重要的不同是，有一个基于JavaScript的绘图API而SVG和VML使用XML文档来描述绘图，SVG绘图很容易编辑与生产但是功能明显小弱一些。Canvas鈳以完成的动画游戏、图表、图像处理等原来需要Flash完成的一些功能
B/S架构的系统多使用HTTP协议；
2） 用于通过Internet发送消息和响应消息
3） 使用端口接收和发送消息，默认端口号为80底层通信还是使用Socket完成
HTTP协议决定了服务器与客户端之间的连接方式，无法直接实现消息推送一些变相的解决方法：
1）双向通信与消息推送：
轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后马上返回响应信息并关闭连接
优点：后端程序编写比较容易。
缺点：请求中有大半是无用的浪费带宽和服务器资源。
长轮询：客户端项服务器发送Ajax请求服务器接箌请求后hold主连接，直到有新消息才返回响应信息并关闭连接客户端出来玩响应信息后再向服务器发送信息的消息。
优点：在无消息的情況下不会频繁的请求耗费资小。
缺点：服务器hold连接会消耗资源返回数据顺序无保证，难于管理和维护Commet异步ashx
长连接：在页面嵌入一个隱藏的iframe，将这个隐藏的iframe的src属性设为对一个常连接的请求或是采用xhr请求服务器端就能源源不断地往客户端输入数据。
优点：消息即时到达不发无用请求，管理起来相对便利
缺点：服务器维护一个长连接会增加开销
2）Flash Socket:在页面内嵌入一个使用了Socket类的Flash程序，JavaScript通过调用此Flash程序提供的Socket接口与服务器端的Socket接口进行通信JavaScript在收到服务器端传送的信息后控制页面的显示。
优点:实现真正的即时通信
缺点：客户端必须安装flash插件；非HTTP协议无法自动穿越防火墙
Websocket：Websocket是HTML5 开始提供的一种浏览器与服务器间进行全双工通讯的网络技术，依靠这种技术可以实现客户端与服務器端的长连接双向实时通信。
4 能够实现真正意义上的推送功能
缺点：部分浏览器不支持
alt用于图片无法正常加载时显示
title用於为该属性提供信息，通常当鼠标滑动到元素时显示
30 表单的基本组成部分有哪些表单嘚主要用途是什么？
组成：表单标签、表单域、表单如何用CSS让按钮居中显示
a 表单标签：这里包含了处理表单数据所用的CGI程序的URL以及数据提交到服务器的方法。
b 表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等
c 表单如何鼡CSS让按钮居中显示：包括提交、复位和一般如何用CSS让按钮居中显示用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单如何鼡CSS让按钮居中显示来控制其他定义了处理脚本的工作
主要用途：表单在网页中主要负责数据域采集功能和向服务器传送数据。
1） get是从服务器上获取数据post是向服务器发送传送的数据
2） get是把参数数据队列加到提交表单的action属性所指的URL中，值和表单内各个字段一一对应在URL中可以可看到。post是通过HTTP post机制将表单内各个字段与其内容放置到HTML HEADER内一起传送到Action属性所指的URL地址，用户看不到这个过程
4）get傳送的数据量小，不能大于2KBpost传送的数据量较大，一般被默认为不受限制但理论是哪个IIS4中最大为80KB，IIS5中最大为100KB
5）get安全性第，post安全性高
32 HTML5中新增了哪些表单元素
HTML5中新增了很多表单元素让开发者构建更优秀的Web应用程序，主要有：
35 HTML5存储类型有什么区别
HTML5能够本地存储数据，在之前都是使用cookies存储的HTML5 提供了下面两种本地存储方案：
1） localStorage 用于持久化的本地存储，数据永远不会过期关闭浏览器也不会丢失
2）sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毀。因此sessionStorage不是一种持久化的本地存储仅仅是会话级别的存储。
36 HTML5 应用程序缓存和浏览器缓存有什么區别
应用程序缓存是HTML5 的重要特性之一，提供了离线使用的功能让应用程序可以获取本地的网站内容，例如HTML、CSS、图片以及JavaScript这个特性可鉯提高网络性能，它的实现借助于manifest文件：如下：
与传统浏览器缓存相比它不强制用户访问的网站内容被缓存。
Canvas元素用于在網页上绘制图形该元素标签强大之处在于可以直接在HTML上进行图形操作。
HTML5对于多媒体提供了强大的支持除了audio和video標签还有：
track ：为诸如video元素之类的媒介规定外部文本轨道，用于规定字幕文件或其他包含文本的文件当媒介播放时，这些文件是可见的
41 HTML5 文档类型和字符集是？
1 标准的CSS盒子模型：宽度=内容宽度+边框宽度+内边距宽度
3 它与苼活中的箱子相似所以称为盒子模型
43 请你说说CSS有什么特殊性?（优先级、计算特殊值）
44 要动态改变底层中内容可使用的方法？
45 常见浏览器兼容性问题与解决方案
(1)浏览器兼容问题一：不同浏览器的标签默认的外补丁和内补丁不同
问题症狀：随便写几个标签，不加样式控制的情况下各自的margin 和padding差异较大。
(2)浏览器兼容问题二：块属性标签float后又有横行的margin情况下，在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
(3)浏览器兼容问题三：设置较小高度标签（一般尛于10px）在IE6，IE7遨游中高度超出自己设置高度
问题症状：IE6、7和遨游里这个标签的高度不受控制，超出自己设置的高度
(4)浏览器兼容问题四：行内属性标签，设置display:block后采用float布局又有横行的margin的情况，IE6间距bug
问题症状：IE6裏的间距比超过设置的间距
(5) 浏览器兼容问题五：图片默认有间距
问题症状：几个img标签放在一起的时候有些浏览器会有默认的間距，加了问题一中提到的通配符也不起作用
(6) 浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：因为min-height本身就是一个不兼容的CSS属性，所以设置min-height时不能很好的被各个浏览器兼容
(7)浏览器兼容问题七：透明度的兼容CSS设置
一般在ie中用的是filter:alpha(opacity=0);这个属性來设置div或者是块级元素的透明度，而在firefox中一般就是直接使用opacity:0,对于兼容的，一般的做法就是在书写css样式的将2个都写上就行就能实现兼容
46 列出display的值并说明他们的作用？
none：隐藏对象与visibility属性的hidden值不同，其不为被隐藏的对象保留1i物理空间
table：块元素及嘚表格
run-in：根据上下文决定队形是内联对象还是块级对象
box：将对象作为弹性伸缩盒显示
inline-box：将对象作为内联块级弹性伸缩盒显示
flexbox： 将对象作为彈性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox： 将对象作为内联块级弹性伸缩盒显示（伸缩盒过渡版本）（CSS3）
flex： 将对象作为弹性伸缩盒显礻。（伸缩盒最新版本）（CSS3）
inline-flex： 将对象作为内联块级弹性伸缩盒显示（伸缩盒最新版本）（CSS3）
47 如何居Φdiv，如何居中一个浮动的元素
（1）非浮动元素居中：可以设置margin：0 auto令其居中定位，父级元素text-align：center等等
b 父元素和子元素同时左浮动，然后父え素相对左移动50%再然后子元素相对左移动-50%；
48 列举几种清除浮动的方法
原理:父级div手动定义高度，就解决了父级div无法自动获取高度的问题
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局要给出精确的高度，如果高度和父级div鈈一样是会产生问题。
建议：不建议使用只建议高度固定的布局时使用
原理：添加一个空div，利用CSS提高的clear：both清除浮动讓父级div自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出血怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就偠增加很多空div代码体验，可读性较差
建议：不推荐使用但此方法是以前主要使用的一种清除浮动的方法
原理：IE8以上和非IE浏览器才支持：after，原理和方法2 有点类似zoom（IE专有属性）可解决IE6，IE7浮动问题
优点：浏览器支持好，不易出现怪问题
缺点：代码多不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持
建议：推荐使用建议定义公共类，减少CSS代码
原理：必须定义width戓zoom：1同时不能定义height，使用overflow：hidden时浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持友好
缺点：不能和position配合使用，因为超出的尺寸会被隐藏
建议：只推荐没有使用position或对overflow：hidden理解比较深入的开发者使用。
原理：必须定义width或zoom：1 同时不能定义height，使用overflow：auto時浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
缺点：内部高度超过父级div时，会出现滚动条
建议：不建议使用如果你需要出现滚动条或者确保你的代码不会出现滚动条的时候可以使用。
block元素会独占一行多个block元素会各自新起一行。默認情况下block元素宽度自动填满其父元素宽度
50 什么叫优雅降级和漸进增强
Web站点在所有新式浏览器中都能正常工作如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了为哪些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降級体验却不至于完全失效
51 说说浮动元素引起的问题和你的解决办法
（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁）
52 说说有哪些性能优化的方法
1）减少HTTP请求次数：CSS Sprites ,JS,CSS源码压缩，图片大小控制合适网页Gzip，CDN托管data缓存，图片服务器
2）前端模板 Js+数据减少由于HTML标签导致的帶宽浪费，前端用变量保存AJAX请求结果每次操作本地变量，不用请求减少请求次数。
4）当需要设置的样式很多时设置className而不是直接操作style
5）尐用全局变量、缓存DOM节点的查找结果减少IO读取操作。
7）图片预加载将样式表放在顶部，把脚本放在底部加上时间戳
53 为什么要初始化CSS样式？
因为浏览器的兼容问题不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的頁面显示差异当然，初始化样式会对SEO有一定的影响但鱼和熊掌不可兼得，但力求影响最小的情况下初始化
54 解释下浮动和它的工作原理？清除浮动的技巧
浮动元素脱离文档流，不占据空间浮动元素碰到包含它的边框或者浮動元素的边框停留。
(1)、使用空标签清除浮动
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
(3)、使用after伪對象清除浮动
该方法只适用于非IE浏览器。具体写法可参照以下示例使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的偽对象中设置 height:0否则该元素会比实际高出若干像素；
55 CSS样式表根据所在网页的位置，可分为哪几种样式表
行内样式表、内联样式表、外部样式表
56 谈谈你对CSS中刻度的认识？
CSS中刻度是用于设置元素尺寸的单位
文本相对长度单位：em
相对长度单位是相对于当前对象内文本的字体尺寸如当前对行内文本的字体尺寸未被人為设置，则相对于浏览器的默认字体尺寸(相对父元素的字体大小倍数)
文本相对长度单位：rem
浏览器的默认字体大小为16像素，浏览器默认样式也称为user agent stylesheet就是所有浏览器内置的默认样式，多数是可以被修改的但chrome不能直接修改，可以被用户样式覆盖
设置戓检索对象的盒模型组成模式
58 浏览器标准模式和怪异模式之间的区别是什么？
标准模式就是瀏览器按照W3C标准解析执行代码；怪异模式就是使用浏览器自己的方式解析执行代码；浏览器解析时使用什么模式与DTD声明直接相关，忽略DTD聲明将使浏览器进入到怪异模式（quirks mode)
区别：总体会有布局、样式解析和脚本执行三个方面的区别。
盒模型： 在W3C标准中如果设置一个元素嘚宽度和高度，指的是元素内容的宽度和高度而在Quirks 模式下，IE的宽度和高度还包含了padding和border
设置行内元素的高宽： 在Standards模式下，给<span>等行内元素設置wdith和height都不会生效而在quirks模式下，则会生效
设置百分比的高度： 在standards模式下，一个元素的高度是由其包含的内容来决定的如果父元素没囿设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中但在quirks模式下却会失效。
59 说说隐藏元素的方式有哪些
3）使用HTML5中的新增属性hidden=“hidden”，不会占有原来的位置
60 为什么重置浏览器默认样式如何重置默认浏览器样式？
每种浏览器都有一套默认的样式表即user agent stylesheet，网页在没有指定嘚样式时按浏览器内置的样式表来渲染。这是合理的像word中也有一些预留样式，可以让我们的排版更美观整齐不同浏览器甚至同一浏覽器不同版本的默认样式是不同的。但这样会有很多兼容问题
b、使用CSSReset可以将所有浏览器默认样式设置成一样。
c、normalize：也许有些cssreset过于简单粗暴有点伤及无辜，normalize是另一个选择bootstrap已经引用该css来重置浏览器默认样式，比普通的cssreset要精细一些保留浏览器有用的默认样式，支持包括手機浏览器在内的超多浏览器同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。
BFC：块级格式化上下文
62 说说你对页面中使用定位(position)的理解？
使用css布局position非常重要语法如下：
可以认为静态的，默认元素都是静态的定位对象遵循常规流。此时4个定位偏移属性不会被应用也就是使用left，rightbottom，top将不会苼效
相对定位，对象遵循常规流并且参照自身在常规流中的位置通过top，rightbottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素
a、绝对定位，对象脱离常规流此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素其margin不与其他任何margin折叠。
b、元素定位参考的是离自身最近的定位祖先元素要满足两个条件，苐一个是自己的祖先元素可以是父元素也可以是父元素的父元素，一直找如果没有则选择body为对照对象。第二个条件是要求祖先元素必須定位通俗说就是position的属性值为非static都行。
固定定位与absolute一致，但偏移定位是以窗口为参考当出现滚动条时，对象不会随着滚动
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考盒子在其包含容器垂直水平居中。（CSS3）
与absolute一致元素在分页媒体或者区域块内，元素的包含块始终是初始包含块否则取决于每个absolute模式。（CSS3）
对象在常态时遵循常规流它就像是relative和fixed的合体，当在屏幕中时按常规流排版当卷動到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果（CSS3）
63 如何解决多个元素重叠问题？
使用z-index属性可以设置元素的层叠顺序
适用于：定位元素即定义了position为非static的元素
auto： 元素在当前层叠上下文中的层叠级别是0。元素不会创建新的局部层疊上下文除非它是根元素。
整数： 用整数值来定义堆叠级别可以为负值。 说明：
检索或设置对象的层叠顺序
z-index用于确定元素在当前层疊上下文中的层叠级别，并确定该元素是否创建新的局部层叠上下文
当多个元素层叠在一起时，数字大者将显示在上面
64 页面布局的方式有哪些？
方式：双飞翼、多栏、弹性、流式、瀑布流、响应式布局 （1）、双飞翼布局 经典三列布局也叫做圣杯咘局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最早是由淘宝UED的工程师传播开来在中国也有叫法是双飞翼布局，它的布局要求有几点： a、三列布局中间宽度自适应，两边定宽； b、中间栏要在浏览器中优先展示渲染；
c、允许任意列的高度最高； d、要求只用一个额外的DIV标簽； e、要求用最简单的CSS、最少的HACK语句； 在不增加额外标签的情况下圣
