前端基础知识（1）

1、HTML

一、浏览器页面有哪三层构成，分别是什么，做用是什么?
构成：结构层、表示层、行为层
分别：HTML、CSS、JavaScript
做用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务。

二、HTML5的优势与缺点？
优势：
（1）网络标准统1、HTML5自己是由W3C推荐出来的。
（2）多设备、跨平台
（3）即时更新。
（4）提升可用性和改进用户的友好体验；
（5）有几个新的标签，这将有助于开发人员定义重要的内容；
（6）能够给站点带来更多的多媒体元素(视频和音频)；
（7）能够很好的替代Flash和Silverlight；
（8）涉及到网站的抓取和索引的时候，对于SEO很友好；
（9）被大量应用于移动应用程序和游戏。
缺点：
（1）安全：像以前Firefox4的web socket和透明代理的实现存在严重的安全问题，同时web storage、web socket 这样的功能很容易被黑客利用，来盗取用户的信息和资料。
（2）完善性：许多特性各浏览器的支持程度也不同。
（3）技术门槛：HTML5简化开发者工做的同时表明了有许多新的属性和API须要开发者学习，像web worker、web socket、web storage 等新特性，后台甚至浏览器原理的知识，机遇的同时也是巨大的挑战
（4）性能：某些平台上的引擎问题致使HTML5性能低下。
（5）浏览器兼容性：最大缺点，IE9如下浏览器几乎全军覆没。

三、Doctype做用? 严格模式与混杂模式如何区分？它们有何意义?
（1）声明位于文档中的最前面，处于标签以前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）严格模式的排版和JS 运做模式是以该浏览器支持的最高标准运行。
（3）在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点没法工做。
（4）DOCTYPE不存在或格式不正确会致使文档以混杂模式呈现。

四、HTML5有哪些新特性、移除了哪些元素？
Html5新增了 27 个元素，废弃了 16 个元素，根据现有的标准规范，把 HTML5 的元素按优先级定义为结构性属性、级块性元素、行内语义性元素和交互性元素 4 大类。
（1）结构性元素主要负责web上下文结构的定义
section：在 web 页面应用中，该元素也能够用于区域的章节描述。
header：页面主体上的头部， header 元素每每在一对 body 元素中。
footer：页面的底部（页脚），一般会标出网站的相关信息。
nav：专门用于菜单导航、连接导航的元素，是 navigator 的缩写。
article：用于表现一篇文章的主体内容，通常为文字集中显示的区域。
（2）级块性元素主要完成web页面区域的划分，确保内容的有效分割。
aside：用于表达注记、贴士、侧栏、摘要、插入的引用等做为补充主体的内容。
figure：是对多个元素进行组合并展现的元素，一般与 ficaption 联合使用。
code：表示一段代码块。
dialog：用于表达人与人之间的对话，该元素包含 dt 和 dd 这两个组合元素， dt 用于表示说话者，而 dd 用来表示说话内容。
（3）行内语义性元素主要完成web页面具体内容的引用和描述，是丰富内容展现的基础。
meter：表示特定范围内的数值，可用于工资、数量、百分比等。
time：表示时间值。
progress：用来表示进度条，可经过对其 max 、 min 、 step 等属性进行控制，完成对进度的表示和监事。
video：视频元素，用于支持和实现视频文件的直接播放，支持缓冲预载和多种视频媒体格式。
audio：音频元素，用于支持和实现音频文件的直接播放，支持缓冲预载和多种音频媒体格式。
（4）交互性元素主要用于功能性的内容表达，会有必定的内容和数据的关联，是各类事件的基础。
details：用来表示一段具体的内容，可是内容默承认能不显示，经过某种手段（如单击）与 legend 交互才会显示出来。
datagrid：用来控制客户端数据与显示，能够由动态脚本及时更新。
menu：主要用于交互菜单（曾被废弃又被从新启用的元素）。
command：用来处理命令按钮。

五、你作的网页在哪些流览器测试过,这些浏览器的内核分别是什么?
（1）IE: trident 内核
（2）Firefox ： gecko 内核
（3）Safari:webkit 内核
（4）Opera: 之前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核
（5）Chrome:Blink( 基于 webkit ， Google 与 Opera Software 共同开发 )

六、说说你对HTML5认识?
（1）HTML5指的是包括HTML、CSS和JavaScript在内的一套技术组合。它但愿可以减小网页浏览器对于须要插件的丰富性网络应用服务（ Plug-in-Based Rich Internet Application ， RIA ），例如： AdobeFlash 、 Microsoft Silverlight 与 Oracle JavaFX 的需求，而且提供更多能有效增强网络应用的标准集。 HTML5 是 HTML 最新版本， 2014 年 10 月由万维网联盟（ W3C ）完成标准制定。目标是替换 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到匹配当代的网络需求。
（2）HTML4陈旧不能知足日益发展的互联网须要，特别是移动互联网。为了加强浏览器功能 Flash 被普遍使用，但安全与稳定堪忧，不适合在移动端使用（耗电、触摸、不开放）。
（3）HTML5加强了浏览器的原生功能，符合 HTML5 规范的浏览器功能将更增强大，减小了 Web 应用对插件的依赖，让用户体验更好，让开发更加方便，另外 W3C 从推出 HTML4.0 到 5.0 之间共经历了 17 年， HTML 的变化很小，这并不符合一个好产品的演进规则。

七、HTML5行内元素有哪些,块级元素有哪些, 空元素有哪些?
(1)行内元素
a：锚点
abbr：缩写
acronym：首字
b：粗体 ( 不推荐 )
bdo：bidi override
big：大字体
br：换行
cite：引用
code：计算机代码 ( 在引用源码的时候须要 )
dfn：定义字段
em：强调
font：字体设定 ( 不推荐 )
i：斜体
img：图片
input：输入框
kbd：定义键盘文本
label：表格标签
q：短引用
s：中划线 ( 不推荐 )
samp：定义范例计算机代码
select：项目选择
small：小字体文本
span：经常使用内联容器，定义文本内区块
strike：中划线
strong：粗体强调
sub：下标
sup：上标
textarea：多行文本输入框
tt：电传文本
u：下划线
var：定义变量
(2)块元素 (block element)
address：地址
blockquote：块引用
center：举中对齐块
dir：目录列表
div：经常使用块级容易，也是 css layout 的主要标签
dl：定义列表
fieldset：form控制组
form：交互表单
h1：大标题
h2：副标题
h3：3级标题
h4：4级标题
h5：5级标题
h6：6级标题
hr：水平分隔线
isindex：input prompt
menu：菜单列表
noframes：frames可选内容，（对于不支持 frame 的浏览器显示此区块内容
noscript：）可选脚本内容（对于不支持 script 的浏览器显示此内容）
ol：排序表单
p：段落
pre：格式化文本
table：表格
ul：非排序列表
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet：java applet
button：按钮
del：删除文本
iframe：inline frame
ins：插入的文本
map：图片区块 (map)
object：object对象
script：客户端脚本
(3)空元素 ( 在 HTML[1] 元素中，没有内容的 HTML 元素被称为空元素 )
<br/>：换行
<hr>：分隔线
<input> ：文本框等
<img>：图片
<link>：连接资源

八、什么是WebGL,它有什么优势?
（1）WebGL（全写 Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准容许把 JavaScript 和 OpenGL ES 2.0 结合在一块儿，经过增长 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 能够为 HTML5 Canvas 提供硬件 3D 加速渲染，这样 Web 开发人员就能够借助系统显卡来在浏览器里更流畅地展现 3D 场景和模型了，还能建立复杂的导航和数据视觉化。显然， WebGL 技术标准免去了开发网页专用渲染插件的麻烦，可被用于建立具备复杂 3D 结构的网站页面，甚至能够用来设计 3D 网页游戏等等。
（2）WebGL完美地解决了现有的 Web 交互式三维动画的两个问题：
第一，它经过HTML脚本自己实现 Web 交互式三维动画的制做，无需任何浏览器插件支持 ;
第二，它利用底层的图形硬件加速功能进行的图形渲染，是经过统一的、标准的、跨平台的OpenGL接口实现的。
通俗说WebGL中 canvas 绘图中的 3D 版本。由于原生的 WebGL 很复杂，咱们常常会使用一些三方的库，如 three.js 等，这些库多数用于 HTML5 游戏开发。

九、请你描述一下 cookies，sessionStorage 和 localStorage 的区别?
（1）Cookie
每一个域名存储量比较小（各浏览器不一样，大体 4K ）
全部域名的存储量有限制（各浏览器不一样，大体 4K ）
有个数限制（各浏览器不一样）
会随请求发送到服务器
（2）LocalStorage
永久存储
单个域名存储量比较大（推荐 5MB ，各浏览器不一样）
整体数量无限制
（3）SessionStorage
只在 Session 内有效
存储量更大（推荐没有限制，可是实际上各浏览器也不一样）

十、说说你对HTML语义化的理解?
(1)什么是 HTML 语义化？
基本上都是围绕着几个主要的标签，像标题（ H1~H6 ）、列表（ li ）、强调（ strong em ）等等
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
(2)为何要语义化？
为了在没有CSS的状况下，页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看；
用户体验：例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用；
有利于SEO：和搜索引擎创建良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来肯定上下文和各个关键字的权重；
方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，能够减小差别化。
(3) 语义化标签
<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article> ：用来在页面中表示一套结构完整且独立的内容部分
<aslde></aside> ：主题的附属信息 ( 用途很广，主要就是一个附属内容 ) ，若是 article 里面为一篇文章的话，那么文章的做者以及信息内容就是这篇文章的附属内容了
<figure></figure>：媒体元素，好比一些视频，图片啊等等
<datalist></datalist>：选项列表，与 input 元素配合使用，来定义 input 可能的值
<details></details>：用于描述文档或者文档某个部分的细节 ~ 默认属性为 open~
ps:配合 summary 一块儿使用

十一、link和@import的区别?
HTML代码
<link rel='stylesheet' rev='stylesheet' href='CSS文件 ' type='text/css' media='all' />
<style type='text/css' media='screen'>
@import url('CSS文件 ');
</style>
二者都是外部引用CSS的方式，可是存在必定的区别：
（1）link 是 XHTML 标签，除了加载 CSS 外，还能够定义 RSS 等其余事务； @import 属于 CSS 范畴，只能加载 CSS 。
（2）link 引用 CSS 时，在页面载入时同时加载； @import 须要页面网页彻底载入之后加载。
（3）link 是 XHTML 标签，无兼容问题； @import 是在 CSS2.1 提出的，低版本的浏览器不支持。
（4）link 支持使用 Javascript 控制 DOM 去改变样式；而 @import 不支持。

十二、说说你对SVG理解?
SVG可缩放矢量图形（ Scalable Vector Graphics ）是基于可扩展标记语言（ XML ），用于描述二维矢量图形的一种图形格式。SVG 是 W3C('World Wide Web ConSortium' 即 ' 国际互联网标准组织 ') 在 2000 年 8 月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。 SVG 严格听从 XML 语法，并用文本格式的描述性语言来描述图像内容，所以是一种和图像分辨率无关的矢量图形格式。 SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。
特色：
(1)任意放缩
用户能够任意缩放图像显示，而不会破坏图像的清晰度、细节等。
(2)文本独立
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即便没有安装某一字体，也会看到和他们制做时彻底相同的画面。
(3)较小文件
整体来说，SVG文件比那些 GIF 和 JPEG 格式的文件要小不少，于是下载也很快。
(4)超强显示效果
SVG图像在屏幕上老是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制
SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。
(6)交互 X 和智能化。 SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题，另外一个问题就是 SVG 的本地运行环境下的厂家支持程度。
浏览器支持：
Internet Explorer9，火狐，谷歌 Chrome ， Opera 和 Safari 都支持 SVG 。
IE8和早期版本都须要一个插件 - 如 Adobe SVG 浏览器，这是免费提供的。

1三、HTML全局属性(global attribute)有哪些?
（1）accesskey:设置快捷键，提供快速访问元素如aaa在windows下的firefox中按alt + shift + a可激活元素
（2）class:为元素设置类标识，多个类名用空格分开，CSS和javascript可经过class属性获取元素
（3）contenteditable: 指定元素内容是否可编辑
（4）contextmenu: 自定义鼠标右键弹出菜单内容
（5）data-*: 为元素增长自定义属性
（6）dir: 设置元素文本方向
（7）draggable: 设置元素是否可拖拽
（8）dropzone: 设置元素拖放类型
（9）id: 元素id，文档内惟一
（10）lang: 元素内容的的语言
（11）spellcheck: 是否启动拼写和语法检查
（12）style: 行内css样式
（13）tabindex: 设置元素能够得到焦点，经过tab能够导航
（14）title: 元素相关的建议信息
（15）translate: 元素和子孙节点内容是否须要本地化

1四、说说超连接target属性的取值和做用？
target这个属性指定所连接的页面在浏览器窗口中的打开方式。
它的参数值主要有：
（1）_blank ：在新浏览器窗口中打开连接文件
（2）_parent ：将连接的文件载入含有该连接框架的父框架集或父窗口中。若是含有该连接的框架不是嵌套的，则在浏览器全屏窗口中载入连接的文件，就象 _self 参数一。
（3）_self ：在同一框架或窗口中打开所连接的文档。此参数为默认值，一般不用指定。可是我不太理解。
（4）_top ：在当前的整个浏览器窗口中打开所连接的文档，于是会删除全部框架。

1五、`data-`属性的做用是什么？
（1）`data-`为前端开发者提供自定义的属性，这些属性集能够经过对象的 `dataset` 属性获取，不支持该属性的浏览器能够经过 `getAttribute` 方法获取。
（2）须要注意的是：`data-`以后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。并非全部的浏览器都支持 .`dataset` 属性，测试的浏览器中只有 Chrome 和 Opera 支持。
即：当没有合适的属性和元素时，自定义的 data 属性是可以存储页面或 App 的私有的自定义数据。

1六、介绍一下你对浏览器内核的理解？
（1）主要分红两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。
（2）渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，而后会输出至显示器或打印机。浏览器的内核的不一样对于网页的语法解释会有不一样，因此渲染的效果也不相同。全部网页浏览器、电子邮件客户端以及其它须要编辑、显示网络内容的应用程序都须要内核。
（3）JS引擎则：解析和执行 javascript 来实现网页的动态效果。
（4）最开始渲染引擎和JS引擎并无区分的很明确，后来 JS 引擎愈来愈独立，内核就倾向于只指渲染引擎。

1七、iframe有那些缺点？
（1）iframe会阻塞主页面的 Onload 事件；
（2）搜索引擎的检索程序没法解读这种页面，不利于 SEO;
（3）iframe和主页面共享链接池，而浏览器对相同域的链接有限制，因此会影响页面的并行加载。
若是须要使用 iframe ，最好是经过 javascript 动态给iframe添加 src 属性值，这样能够绕开以上两个问题。

1八、Label的做用是什么，是怎么用的？
（1）做用：label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。
（2）使用实例：
<label for='Name'>Number:</label>
<input type='text' name='Name' id='Name'/>
<label>Date: <input type='text' name='B'/></label>

1九、如何实现浏览器内多个标签页之间的通讯?
（1）WebSocket、 SharedWorker ；
（2）也能够调用localstorage、 cookies 等本地存储方式；
（3）localstorage另外一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
（4）经过监听事件，控制它的值来进行页面信息通讯；
注意quirks： Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

20、如何在页面上实现一个圆形的可点击区域？
（1）map+area 或者 svg
（2）border-radius
（3）纯 js 实现 须要求一个点在不在圆上简单算法、获取鼠标坐标等等

2一、title与h3的区别、b与strong的区别、i与em的区别？
（1）title属性没有明确意义只表示是个标题， h3 则表示层次明确的标题，对页面信息的抓取也有很大的影响；
（2）strong是标明重点内容，有语气增强的含义，使用阅读设备阅读网络时： <strong> 会重读，而 <b> 是展现强调内容。
（3）i内容展现为斜体， em 表示强调的文本；
ps：
（1）Physical Style Elements -- 天然样式标签：b, i, u, s, pre
（2）Semantic Style Elements -- 语义样式标签：strong, em, ins, del, code
（3）应该准确使用语义样式标签, 但不能滥用 , 若是不能肯定时首选使用天然样式标签。

2二、实现不使用 border 画出1px高的线，在不一样浏览器的标准模式与怪异模式下都能保持一致的效果？
<div style='height:1px;overflow:hidden;background:red'></div>

2三、HTML5标签的做用?
（1）使Web页面的内容更加有序和规范
（2）使搜索引擎更加容易按照HTML5规则识别出有效的内容
（3）使Web页面更接近于一种数据字段和表

2四、简述一下src与href的区别？
（1）src用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。
（2）src是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本， img 图片和 frame 等元素。
实例：
（1）<script src ='js.js'></script>
当浏览器解析到该元素时，会暂停其余资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，相似于将所指向资源嵌入当前标签内。这也是为何将js脚本放在底部而不是头部。
（2）<link href='common.css' rel='stylesheet'/>
href是 Hypertext Reference 的缩写，指向网络资源所在位置，创建和当前元素（锚点）或当前文档（连接）之间的连接，若是咱们在文档中添加那么浏览器会识别该文档为css文件，就会并行下载资源而且不会中止对当前文档的处理。这也是为何建议使用 link 方式来加载 css ，而不是使用 @import 方式。

2五、谈谈你对canvas的理解？
（1）canvas是HTML5中新增一个HTML5标签与操做canvas的javascript API，它能够实如今网页中完成动态的2D与3D图像技术。

（2）canvas标记和 SVG以及 VML 之间的一个重要的不一样是，有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas能够完成动画、游戏、图表、图像处理等原来须要Flash完成的一些功能。

2六、消息推送的实现
（1）短轮询：客户端定时向服务器发送Ajax请求，服务器接到请求后立刻返回响应信息并关闭链接。
优势：后端程序编写比较容易。
缺点：请求中有大半是无用，浪费带宽和服务器资源。
实例：适于小型应用。
（2）长轮询：客户端向服务器发送Ajax请求，服务器接到请求后 hold 住链接，直到有新消息才返回响应信息并关闭链接，客户端处理完响应信息后再向服务器发送新的请求。
优势：在无消息的状况下不会频繁的请求，耗费资小。
缺点：服务器hold链接会消耗资源，返回数据顺序无保证，难于管理维护。 Comet 异步的 ashx ，
实例：WebQQ、 Hi 网页版、 Facebook IM 。
（3）长链接：在页面里嵌入一个隐蔵iframe，将这个隐蔵 iframe 的 src 属性设为对一个长链接的请求或是采用 xhr 请求，服务器端就能源源不断地往客户端输入数据。
优势：消息即时到达，不发无用请求；管理起来也相对便。
缺点：服务器维护一个长链接会增长开销。
实例：Gmail聊天
（4）Flash Socket：在页面中内嵌入一个使用了 Socket 类的 Flash 程序 JavaScript 经过调用此 Flash 程序提供的 Socket 接口与服务器端的 Socket 接口进行通讯， JavaScript 在收到服务器端传送的信息后控制页面的显示。
优势：实现真正的即时通讯，而不是伪即时。
缺点：客户端必须安装Flash插件；非 HTTP 协议，没法自动穿越防火墙。
实例：网络互动游戏。
（5）Websocket：WebSocket是 HTML5 开始提供的一种浏览器与服务器间进行全双工通信的网络技术。依靠这种技术能够实现客户端和服务器端的长链接，双向实时通讯。
优势:事件驱动、异步、可以实现真正意义上的推送功能
缺点：使用 ws 或者 wss 协议的客户端 socket、少部分浏览器不支持，浏览器支持的程度与方式有区别。

2七、img的title和alt有什么区别？
Alt 用于图片没法加载时显示 Title 为该属性提供信息，一般当鼠标滑动到元素上的时候显示

2八、表单的基本组成部分有哪些，表单的主要用途是什么？
组成：表单标签、表单域、表单按钮
（1）表单标签：这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。
（2）表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
（3）表单按钮：包括提交按钮，复位按钮和通常按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还能够用表单按钮来控制其余定义了处理脚本的处理工做。
主要用途：表单在网页中主要负责数据采集的功能，和向服务器传送数据。

2九、表单提交中Get和Post方式的区别？
（1）get 是从服务器上获取数据， post 是向服务器传送数据。
（2）get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中能够看到。 post 是经过 HTTP post 机制，将表单内各个字段与其内容放置在 HTML HEADER 内一块儿传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。
（3）对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。
（4）get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，通常被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为 100KB 。
（5）get 安全性低， post 安全性较高。

30、HTML5 有哪些新增的表单元素？
（1）datalist
（2）datetime
（3）output
（4）keygen
（5）date
（6）month
（7）week
（8）time
（9）color
（10）number
（11）range
（12）email
（13）Url

3一、HTML5 废弃了哪些 HTML4 标签？
（1）frame
（2）frameset
（3）noframe
（4）applet
（5）big
（6）center
（7）basefront

3二、HTML5 标准提供了哪些新的 API？
（1）Media API
（2）Text Track API
（3）Application Cache API
（4）User Interaction
（5）Data Transfer API
（6）Command API
（7）Constraint Validation API
（8）History API

3三、HTML5 应用程序缓存和浏览器缓存有什么区别？
应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序能够获取本地的网站内容，例如 HTML 、 CSS 、图片以及 JavaScript 。这个特性能够提升网站性能，它的实现借助于 manifest 文件，以下：
<!doctype html>
<html manifest=”example.appcache”>
…..
</html>

与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

3四、HTML5 Canvas 元素有什么用？
Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于能够直接在 HTML 上进行图形操做，

3五、除了 audio 和 video，HTML5 还有哪些媒体标签？
（1）<embed> 标签订义嵌入的内容，好比插件。
（2）<source> 对于定义多个数据源颇有用。
（3）<track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其余包含文本的文件，当媒介播放时，这些文件是可见的。

3六、HTML5 中如何嵌入视频？
和音频相似，HTML5 支持 MP4 、 WebM 和 Ogg 格式的视频，下面是简单示例：
<video width=” 450 ″ height= ” 340 ″ controls>
  <source src=” jamshed.mp4 ″ type= ” video/mp4 ″ >
  Your browser does’ nt support video embedding feature.
</video>

3七、HTML5 中如何嵌入音频？
HTML5 支持 MP3 、 Wav 和 Ogg 格式的音频，下面是在网页中嵌入音频的简单示例：
<audio controls>
   <source src=” jamshed.mp3 ″ type= ” audio/mpeg ” >
   Your browser does’ nt support audio embedding feature.
</audio>

3八、新的 HTML5 文档类型和字符集是？
（1）HTML5 文档类型很简单：<!doctype html>
（2）HTML5 使用 UTF-8 编码示例：<meta charset=” UTF-8 ″ >

3九、解释一下CSS的盒子模型？
回答一：
（1）标准的css盒子模型：宽度=内容的宽度+边框的宽度+加上内边具的宽度
（2）网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具有这些属性。
（3）这些属性咱们能够把它转移到咱们平常生活中的盒子（箱子）上来理解，平常生活中所见的盒子也就是能装东西的一种箱子，也具备这些属性，因此叫它盒子模式。CSS盒子模型就是在网页设计中常常用到的CSS技术所使用的一种思惟模型。
回答二：
盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每一个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让全部浏览器都会采用标准 w3c 盒子模型去解释你的盒子。

40、请你说说CSS有什么特殊性?（优先级、计算特殊值）
优先级
（1）同类型，同级别的样式后者先于前者
（2）ID > 类样式 > 标签 > *
（3）内联>ID选择器>伪类>属性选择器>类选择器>标签选择器>通用选择器(*)>继承的样式
（4）具体 > 泛化的，特殊性即css优先级
（5）近的 > 远的 (内嵌样式 > 内部样式表 > 外联样式表)
内嵌样式：内嵌在元素中，<span style="color:red">span</span>
内部样式表：在页面中的样式，写在<style></style>中的样式
外联样式表：单独存在一个css文件中，经过link引入或import导入的样式
（6）!important 权重最高，比 inline style 还要高

计算特殊性值
important > 内嵌 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

权重、特殊性计算法：
CSS样式选择器分为4个等级，a、b、c、d
（1）若是样式是行内样式（经过Style=“”定义），那么a=1，1,0,0,0
（2）b为ID选择器的总数 0,1,0,0
（3）c为属性选择器，伪类选择器和class类选择器的数量。0,0,1,0
（4）d为标签、伪元素选择器的数量 0,0,0,1
（5）!important 权重最高，比 inline style 还要高

4一、要动态改变层中内容可使用的方法？
document.innerHTML、document.innerText

4二、常见浏览器兼容性问题与解决方案？
(1)浏览器兼容问题一：不一样浏览器的标签默认的外补丁和内补丁不一样
问题症状：随便写几个标签，不加样式控制的状况下，各自的margin 和padding差别较大。
碰到频率:100%
解决方案：CSS里 *{margin:0;padding:0;}
备注：这个是最多见的也是最易解决的一个浏览器兼容性问题，几乎全部的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。
(2)浏览器兼容问题二：块属性标签float后，又有横行的margin状况下，在IE6显示margin比设置的大
问题症状:常见症状是IE6中后面的一块被顶到下一行
碰到频率：90%（稍微复杂点的页面都会碰到，float布局最多见的浏览器兼容问题）
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
备注：咱们最经常使用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候咱们一般都是用div float实现的，横向的间距设置若是用margin实现，这就是一个必然会碰到的兼容性问题。
(3)浏览器兼容问题三：设置较小高度标签（通常小于10px），在IE6，IE7，遨游中高度超出本身设置高度
问题症状：IE六、7和遨游里这个标签的高度不受控制，超出本身设置的高度
碰到频率：60%
解决方案：给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。
备注：这种状况通常出如今咱们设置小圆角背景的标签里。出现这个问题的缘由是IE8以前的浏览器都会给标签一个最小默认的行高的高度。即便你的标签是空的，这个标签的高度仍是会达到默认的行高。
(4)浏览器兼容问题四：行内属性标签，设置display:block后采用float布局，又有横行的margin的状况，IE6间距bug
问题症状：IE6里的间距比超过设置的间距
碰到概率：20%
解决方案 ： 在display:block;后面加入display:inline;display:table;
备注：行内属性标签，为了设置宽高，咱们须要设置display:block;(除了input标签比较特殊)。在用float布局并有横向的margin后，在IE6下，他就具备了块属性float后的横向margin的bug。不过由于它自己就是行内属性标签，因此咱们再加上display:inline的话，它的高宽就不可设了。这时候咱们还须要在display:inline后面加入display:talbe。
(5) 浏览器兼容问题五：图片默认有间距
问题症状：几个img标签放在一块儿的时候，有些浏览器会有默认的间距，加了问题一中提到的通配符也不起做用。
碰到概率：20%
解决方案：使用float属性为img布局
备注 ： 由于img标签是行内属性标签，因此只要不超出容器宽度，img标签都会排在一行里，可是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（个人一个学生使用负margin，虽然能解决，但负margin自己就是容易引发浏览器兼容问题的用法，因此我禁止他们使用）
(6) 浏览器兼容问题六：标签最低高度设置min-height不兼容
问题症状：由于min-height自己就是一个不兼容的CSS属性，因此设置min-height时不能很好的被各个浏览器兼容
碰到概率：5%
解决方案：若是咱们要设置一个标签的最小高度200px，须要进行的设置为：{min-height:200px; height:auto !important; height:200px; overflow:visible;}
备注：在B/S系统前端开时，有不少状况下咱们又这种需求。当内容小于一个值（如300px）时。容器的高度为300px；当内容高度大于这个值时，容器高度被撑高，而不是出现滚动条。这时候咱们就会面临这个兼容性问题。
(7)浏览器兼容问题七：透明度的兼容CSS设置
通常在ie中用的是filter:alpha(opacity=0);这个属性来设置div或者是块级元素的透明度，而在firefox中，通常就是直接使用opacity:0,对于兼容的，通常的作法就是在书写css样式的将2个都写上就行，就能实现兼容

4三、列出display的值并说明他们的做用？
（1）display： none | inline | block | list-item | inline-block | table | inline-table | table-caption | table-cell | table-row | table-row-group | table-column | table-column-group | table-footer-group | table-header-group | run-in | box | inline-box | flexbox | inline-flexbox | flex | inline-flex
默认值：inline
（1）none： 隐藏对象。与visibility属性的hidden值不一样，其不为被隐藏的对象保留其物理空间
（2）inline： 指定对象为内联元素。
（3）block： 指定对象为块元素。
（4）list-item： 指定对象为列表项目。
（5）inline-block： 指定对象为内联块元素。（CSS2）
（6）table： 指定对象做为块元素级的表格。类同于html标签<table>（CSS2）
（7）inline-table： 指定对象做为内联元素级的表格。类同于html标签<table>（CSS2）
（8）table-caption： 指定对象做为表格标题。类同于html标签<caption>（CSS2）
（9）table-cell： 指定对象做为表格单元格。类同于html标签<td>（CSS2）
（10）table-row： 指定对象做为表格行。类同于html标签<tr>（CSS2）
（11）table-row-group： 指定对象做为表格行组。类同于html标签<tbody>（CSS2）
（12）table-column： 指定对象做为表格列。类同于html标签<col>（CSS2）
（13）table-column-group： 指定对象做为表格列组显示。类同于html标签<colgroup>（CSS2）
（14）table-header-group： 指定对象做为表格标题组。类同于html标签<thead>（CSS2）
（15）table-footer-group： 指定对象做为表格脚注组。类同于html标签<tfoot>（CSS2）
（16）run-in： 根据上下文决定对象是内联对象仍是块级对象。（CSS3）
（17）box： 将对象做为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
（18）inline-box： 将对象做为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
（19）flexbox： 将对象做为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
（20）inline-flexbox： 将对象做为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
（21）flex： 将对象做为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
（22）inline-flex： 将对象做为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

4四、如何居中div, 如何居中一个浮动元素?
一、非浮动元素居中：能够设置 margin:0 auto 令其居中, 定位 ,父级元素text-algin:center等等
二、浮动元素居中:
（1）设置当前div的宽度，而后设置margin-left:50%; position:relative; left:-250px;其中的left是宽度的一半。
（2）父元素和子元素同时左浮动，而后父元素相对左移动50%，再而后子元素相对左移动-50%。
（3）position定位等等。

4五、请列举几种清除浮动的方法(至少两种)?
(1)、父级div定义 height
原理：父级div手动定义height，就解决了父级div没法自动获取到高度的问题。
优势：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，若是高度和父级div不同时，会产生问题
建议：不推荐使用，只建议高度固定的布局时使用
(2)、结尾处加空div标签 clear:both
原理：添加一个空div，利用css提升的clear:both清除浮动，让父级div能自动获取到高度
优势：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：很多初学者不理解原理；若是页面浮动布局多，就要增长不少空div，让人感受很很差
建议：不推荐使用，但此方法是之前主要使用的一种清除浮动方法
(3)、父级div定义 伪类:after 和 zoom
原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点相似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优势：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
缺点：代码多、很多初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持。
建议：推荐使用，建议定义公共类，以减小CSS代码。
(4)、父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优势：简单、代码少、浏览器支持好
缺点：不能和position配合使用，由于超出的尺寸的会被隐藏。
建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用。
(5)、父级div定义 overflow:auto
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:auto时，浏览器会自动检查浮动区域的高度
优势：简单、代码少、浏览器支持好
缺点：内部宽高超过父级div时，会出现滚动条。
建议：不推荐使用，若是你须要出现滚动条或者确保你的代码不会出现滚动条就使用吧。

4六、block，inline和inlinke-block细节对比？
一、display:block
（1）block元素会独占一行，多个block元素会各自新起一行。默认状况下，block元素宽度自动填满其父元素宽度。
（2）block元素能够设置width,height属性。块级元素即便设置了宽度,仍然是独占一行。
（3）block元素能够设置margin和padding属性。
二、display:inline
（1）inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
（2）inline元素设置width,height属性无效。
（3）inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
三、display:inline-block
（1）简单来讲就是将对象呈现为inline对象，可是对象的内容做为block对象呈现。以后的内联对象会被排列在同一行内。好比咱们能够给一个link（a元素）inline-block属性值，使其既具备block的宽度高度特性又具备inline的同行特性。
四、补充说明
（1）通常咱们会用display:block，display:inline或者display:inline-block来调整元素的布局级别，其实display的参数远远不止这三种，仅仅是比较经常使用而已。
（2）IE（低版本IE）原本是不支持inline-block的，因此在IE中对内联元素使用display:inline-block，理论上IE是不识别的，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表象。

4七、什么叫优雅降级和渐进加强？
（1）优雅降级： Web站点在全部新式浏览器中都能正常工做，若是用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工做。因为IE独特的盒模型布局问题，针对不一样版本的IE的hack实践过优雅降级了,为那些没法支持功能的浏览器增长候选方案，使之在旧式浏览器上以某种形式降级体验却不至于彻底失效.
（2）渐进加强： 从被全部浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增长无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥做用。

4八、你有哪些性能优化的方法？
（1）减小http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。
（2）前端模板 JS+数据，减小因为HTML标签致使的带宽浪费，前端用变量保存AJAX请求结果，每次操做本地变量，不用请求，减小请求次数
（3）用innerHTML代替DOM操做，减小DOM操做次数，优化javascript性能。
（4）当须要设置的样式不少时设置className而不是直接操做style。
（5）少用全局变量、缓存DOM节点查找的结果。减小IO读取操做。
（6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。
（7）图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

4九、为何要初始化CSS样式？
由于浏览器的兼容问题，不一样浏览器对有些标签的默认值是不一样的，若是没对CSS初始化每每会出现浏览器之间的页面显示差别。

50、谈谈你对CSS中刻度的认识？
一、特殊值0能够省略单位。例如：margin:0px能够写成margin:0
二、一些属性可能容许有负长度值，或者有必定的范围限制。若是不支持负长度值，那应该变换到可以被支持的最近的一个长度值。
三、长度单位包括：相对单位和绝对单位。
（1）相对长度单位有： em, ex, ch, rem, vw, vh, vmax, vmin
（2）绝对长度单位有： cm, mm, q, in, pt, pc, px
（3）绝对长度单位：1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
（4）文本相对长度单位：em、rem（CSS3）
（5）相对长度单位是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(相对父元素的字体大小倍数)

5一、请你说说box-sizing属性的的用法？
设置或检索对象的盒模型组成模式
（1）box-sizing:content-box： padding和border不被包含在定义的width和height以内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。
（2）box-sizing:border-box： padding和border被包含在定义的width和height以内。对象的实际宽度就等于设置的width值，即便定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

5二、浏览器标准模式和怪异模式之间的区别是什么？
在“标准模式”(Standards Mode) 页面按照 HTML 与 CSS 的定义渲染，而在“怪异模式”(Quirks Mode)就是浏览器为了兼容很早以前针对旧版本浏览器设计、并未严格遵循 W3C 标准的网页而产生的一种页面渲染模式。浏览器基于页面中文件类型描述的存在以决定采用哪一种渲染模式；若是存在一个完整的`DOCTYPE`则浏览器将会采用标准模式，而若是它缺失则浏览器将会采用怪异模式。
强烈建议阅读加深理解：[怪异模式（Quirks Mode）对 HTML 页面的影响](http://www.ibm.com/developerworks/cn/web/1310_shatao_quirks/)，这里列下浏览器标准模式和怪异模式的区别：
（1）盒模型：
在怪异模式下，盒模型为IE盒模型而非标准模式下的W3C
盒模型：在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border right，
box height = content height + padding top + padding bottom + border top + border bottom。
而在 W3C 标准的盒模型中，box 的大小就是 content 的大小。
（2）图片元素的垂直对齐方式:
对于`inline`元素和`table-cell`元素，在 IE Standards Mode 下 vertical-align 属性默认取值为`baseline`。而当`inline`元素的内容只有图片时，如`table`的单元格`table-cell`。在 IE Quirks Mode 下，`table`单元格中的图片的 `vertical-align` 属性默认为`bottom`，所以，在图片底部会有几像素的空间。
（3）`<table>`元素中的字体:
CSS 中，描述`font`的属性有`font-family`，`font-size`，`font-style`，`font-weigh`,上述属性都是能够继承的。而在 IE Quirks Mode 下，对于`table` 元素，字体的某些属性将不会从`body`或其余封闭元素继承到`table`中，特别是 `font-size`属性。
（4）内联元素的尺寸:
在 IE Standards Mode 下，non-replaced inline 元素没法自定义大小，而在 IE Quirks Mode 下，定义这些元素的`width`和`height` 属性，可以影响该元素显示的大小尺寸。
（5）元素的百分比高度:
a、CSS 中对于元素的百分比高度规定以下，百分比为元素包含块的高度，不可为负值。若是包含块的高度没有显式给出，该值等同于“auto”（即取决于内容的高度）。因此百分比的高度必须在父元素有声明高度时使用。
b、当一个元素使用百分比高度时，在 IE Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。
（6）元素溢出的处理：
在 IE Standard Mode 下，`overflow`取默认值 `visible`，即溢出可见，这种状况下，溢出内容不会被裁剪，呈如今元素框外。而在 Quirks Mode 下，该溢出被当作扩展`box`来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容。

5三、说说你对边距折叠的理解?
外边距折叠： 相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻： 没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系
垂直方向外边距合并计算:
（1）参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。
（2）参与折叠的 margin 都是负值：取的是其中绝对值较大的，而后，从 0 位置，负向位移。
（3）参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，而后，和正 margin 值中最大的 margin 相加。

5四、内联与块级标签有何区别？
Html中的标签默认主要分为两大类型，一类为块级元素，另外一类是行内元素，许多人也把行内称为内联，因此叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别。

5五、说说隐藏元素的方式有哪些？
（1）使用CSS的display:none，不会占有原来的位置
（2）使用CSS的visibility:hidden，会占有原来的位置
（3）使用HTML5中的新增属性hidden="hidden"，不会占有原来的位置

5六、谈谈你对BFC与IFC的理解？(是什么，如何产生，做用)
(1)、什么是BFC与IFC
a、BFC（Block Formatting Context）即“块级格式化上下文”， IFC（Inline Formatting Context）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最多见的布局形态。一个框在常规流中必须属于一个格式化上下文，你能够把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生做用。
b、BFC是W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照必定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。好比浮动元素会造成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也能够说BFC就是一个做用范围。
c、在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型能够是 block ，或者是 inline ，但不能同时属于这二者。而且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 Inline Formatting Context(行内格式化上下文) 里格式化。
(2)、如何产生BFC
当一个HTML元素知足下面条件的任何一点，均可以产生Block Formatting Context：
a、float的值不为none
b、overflow的值不为visible
c、display的值为table-cell, table-caption, inline-block中的任何一个
d、position的值不为relative和static
CSS3触发BFC方式则能够简单描述为：在元素定位非static，relative的状况下触发，float也是一种定位方式。
(3)、BFC的做用与特色
a、不和浮动元素重叠，清除外部浮动，阻止浮动元素覆盖
若是一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个重叠的现象。常规流（也称标准流、普通流）是一个文档在被显示时最多见的布局形态，当float不为none时，position为absolute、fixed时元素将脱离标准流。

5七、说说你对页面中使用定位(position)的理解？
使用css布局position很是重要，语法以下：
position：static | relative | absolute | fixed | center | page | sticky
默认值：static，center、page、sticky是CSS3中新增长的值。
（1）static
能够认为静态的，默认元素都是静态的定位，对象遵循常规流。此时4个定位偏移属性不会被应用，也就是使用left，right，bottom，top将不会生效。
（2）relative
相对定位，对象遵循常规流，而且参照自身在常规流中的位置经过top，right，bottom，left这4个定位偏移属性进行偏移时不会影响常规流中的任何元素。
（3）absolute
a、绝对定位，对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，若是没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其余任何margin折叠。
b、元素定位参考的是离自身最近的定位祖先元素，要知足两个条件，第一个是本身的祖先元素，能够是父元素也能够是父元素的父元素，一直找，若是没有则选择body为对照对象。第二个条件是要求祖先元素必须定位，通俗说就是position的属性值为非static都行。
（4）fixed
固定定位，与absolute一致，但偏移定位是以窗口为参考。当出现滚动条时，对象不会随着滚动。
（5）center
与absolute一致，但偏移定位是以定位祖先元素的中心点为参考。盒子在其包含容器垂直水平居中。（CSS3）
（6）page
与absolute一致。元素在分页媒体或者区域块内，元素的包含块始终是初始包含块，不然取决于每一个absolute模式。（CSS3）
（7）sticky
对象在常态时遵循常规流。它就像是relative和fixed的合体，当在屏幕中时按常规流排版，当卷动到屏幕外时则表现如fixed。该属性的表现是现实中你见到的吸附效果。（CSS3）

5八、如何解决多个元素重叠问题？
使用z-index属性能够设置元素的层叠顺序
（1）语法：z-index: auto | <integer>
（2）默认值：auto
（3）适用于：定位元素。即定义了position为非static的元素
（4）取值：
auto： 元素在当前层叠上下文中的层叠级别是0。元素不会建立新的局部层叠上下文，除非它是根元素。
整数： 用整数值来定义堆叠级别。能够为负值。 说明：
检索或设置对象的层叠顺序。
（5）z-index用于肯定元素在当前层叠上下文中的层叠级别，并肯定该元素是否建立新的局部层叠上下文。当多个元素层叠在一块儿时，数字大者将显示在上面。

5九、页面布局的方式有哪些？
方式：双飞翼、多栏、弹性、流式、瀑布流、响应式布局
（1）双飞翼布局
经典三列布局，也叫作圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念，在国内最先是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有几点：
a、三列布局，中间宽度自适应，两边定宽；
b、中间栏要在浏览器中优先展现渲染；
c、容许任意列的高度最高；
d、要求只用一个额外的DIV标签；
e、要求用最简单的CSS、最少的HACK语句；
在不增长额外标签的状况下，圣杯布局已经很是完美，圣杯布局使用了相对定位，之后布局是有局限性的，并且宽度控制要改的地方也多。在淘宝UED（User Experience Design）探讨下，增长多一个div就能够不用相对布局了，只用到了浮动和负边距，这就是咱们所说的双飞翼布局。
（2）多栏布局
a、栏栅格系统：就是利用浮动实现的多栏布局，在bootstrap中用的很是多。
b、多列布局：栅格系统并无真正实现分栏效果（如word中的分栏），CSS3为了知足这个要求增长了多列布局模块
（3）弹性布局（Flexbox）
CSS3引入了一种新的布局模式——Flexbox布局，即伸缩布局盒模型（Flexible Box），用来提供一个更加有效的方式制定、调整和分布一个容器里项目布局，即便它们的大小是未知或者动态的，这里简称为Flex。
Flexbox布局经常使用于设计比较复杂的页面，能够轻松的实现屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变，同时减小了依赖于浮动布局实现元素位置的定义以及重置元素的大小。
Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你能够调节伸缩项目的相对大小和位置。例如，你能够确保伸缩容器中的多余空间平均分配多个伸缩项目，固然，若是你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据必定的比例减小伸缩项目的大小，使其不溢出伸缩容器。
综合而言，Flexbox布局功能主要具备如下几点：
a、屏幕和浏览器窗口大小发生改变也能够灵活调整布局；
b、能够指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
c、能够指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目以前、以后或之间；
d、能够指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
e、能够控制元素在页面上的布局方向；
f、能够按照不一样于文档对象模型（DOM）所指定排序方式对屏幕上的元素从新排序。也就是说能够在浏览器渲染中不按照文档流前后顺序重排伸缩项目顺序。
（4）瀑布流布局
瀑布流布局是流式布局的一种。是当下比较流行的一种网站页面布局，视觉表现为良莠不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最先采用此布局的网站是Pinterest，逐渐在国内流行开来。
优势
a、有效的下降了界面复杂度，节省了空间：咱们再也不须要臃肿复杂的页码导航连接或按钮了。
b、对触屏设备来讲，交互方式更符合直觉：在移动应用的交互环境当中，经过向上滑动进行滚屏的操做已经成为最基本的用户习惯，并且所须要的操做精准程度远远低于点击连接或按钮。
c、更高的参与度：以上两点所带来的交互便捷性可使用户将注意力更多的集中在内容而不是操做上，从而让他们更乐于沉浸在探索与浏览当中。
缺点
a、有限的用例：
无限滚动的方式只适用于某些特定类型产品当中一部分特定类型的内容。
例如，在电商网站当中，用户时常须要在商品列表与详情页面之间切换，这种状况下，传统的、带有页码导航的方式能够帮助用户更稳妥和准确的回到某个特定的列表页面当中。
b、额外的复杂度：
那些用来打造无限滚动的JS库虽然都自称很容易使用，但你总会须要在本身的产品中进行不一样程度的定制化处理，以知足大家本身的需求;另外这些JS库在浏览器和设备兼容性等方面的表现也良莠不齐，你必须作好充分的测试与调整工做。
c、再见了，页脚：
若是使用了比较典型的无限滚动加载模式，这就意味着你能够和页脚说拜拜了。
最好考虑一下页脚对于你的网站，特别是用户的重要性;若是其中确实有比较重要的内容或连接，那么最好换一种更传统和稳妥的方式。
千万不要耍弄你的用户，当他们一次次的浏览到页面底部，看到页脚，却由于自动加载的内容忽然出现而不管如何都没法点击页脚中的连接时，他们会变的愈加愤怒。
d、集中在一页当中动态加载数据，与一页一页的输出相比，究竟那种方式更利于SEO，这是你必须考虑的问题。对于某些以类型网站来讲，在这方面进行冒险是很不划算的。
e、关于页面数量的印象：
其实站在用户的角度来看，这一点并不是负面;不过，若是对于你的网站来讲，经过更多的内容页面展现更多的相关信息(包括广告)是很重要的策略，那么单页无限滚动的方式对你并不适用。
（5）流式布局（Fluid）
固定布局和流式布局在网页设计中最经常使用的两种布局方式。固定布局能呈现网页的原始设计效果，流式布局则不受窗口宽度影响，流式布局使用百分比宽度来限定布局元素，这样能够根据客户端分辨率的大小来进行合理的显示。
（6）响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站可以兼容多个终端——而不是为每一个终端作一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局能够为不一样终端的用户提供更加温馨的界面和更好的用户体验，并且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着愈来愈多的设计师采用这个技术，咱们不只看到不少的创新，还看到了一些成形的模式。
优势
a、面对不一样分辨率设备灵活性强
b、可以快捷解决多设备显示适应问题
缺点
a、兼容各类设备工做量大，效率低下
b、代码累赘，会出现隐藏无用的元素，加载时间加长
c、其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
d、必定程度上改变了网站原有的布局结构，会出现用户混淆的状况

60、overfloa:hidden是否造成新的块级格式化上下文？会造成，触发BFC的条件有：（1）float的值不为none。（2）overflow的值不为visible。（3）display的值为table-cell, table-caption, inline-block 中的任何一个。（4）position的值不为relative 和static。