1.关于BFC
bfc（block formatting context），块级格式化上下文，是页面css渲染的一部分，用于决定块盒子的布局以及浮动相互影响的一个区域。可以理解成：创建了bfc的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素。
特性：
(1).内部的box会在垂直方向一个接一个排列；
(2).box垂直方向的距离由margin决定，属于同一个bfc的两个相邻的margin会发生重叠，不同的bfc不会发生折叠
(3).每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
(4).BFC的区域不会与float的元素区域重叠
(5).计算BFC的高度时，浮动子元素也参与计算
如何生成bfc：
(1).根元素，即html元素（最大的一个bfc）
(2).float的值不为none
(3).position的值为absolute或fixed
(4).overflow的值不为visible（默认值。内容不会被修剪，会呈现在元素框之外）
(5).display的值为inline-block、table-cell、flex、inline-flex、table-caption
2.HTML5的新特性
(1).语义化标签
更好理解标签的作用，让页面内容结构化，常用的语义化标签如下：
<header>：定义了文档的头部区域
<main>：定义页面的主要内容
<footer>：定义了文档的尾部区域
<nav>：定义文档的导航
<section>：定义文档中的节（section、区段）
<article>：定义页面独立的内容区域
<aside>：定义页面的侧边栏内容
<detailes>：用于描述文档或文档某个部分的细节
<summary>：标签包含 details 元素的标题
<dialog>：定义对话框，比如提示框
(2).增强型表单
HTML5 拥有多个新的表单 Input 输入类型。这些新特性提供了更好的输入控制和验证。
输入类型 描述
color 主要用于选取颜色
date 从一个日期选择器选择一个日期
datetime 选择一个日期（UTC 时间）
datetime-local 选择一个日期和时间 (无时区)
email 包含 e-mail 地址的输入域
month 选择一个月份
number 数值的输入域
range 一定范围内数字值的输入域
search 用于搜索域
tel 定义输入电话号码字段
time 选择一个时间
url URL 地址的输入域
week 选择周和年
HTML5新增的表单属性：
placehoder 属性：简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性：是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性：描述了一个正则表达式用于验证<input> 元素的值。
min 和 max 属性：设置元素最小值与最大值。
step 属性：为输入域规定合法的数字间隔。
height 和 width 属性：用于 image 类型的 <input> 标签的图像高度和宽度。
autofocus 属性：是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性：是一个 boolean 属性。规定<input> 元素中可选择多个值。
(3).新的多媒体标签
新增了<audio>和<video>标签
HTML5 提供了播放音频文件的标准，即使用 <audio> 元素
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持Video标签。
</audio>
control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件
目前, <audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
control 提供了 播放、暂停和音量控件来控制视频。也可以使用dom操作来控制视频的播放暂停，如 play() 和 pause() 方法。
同时 video 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
video 元素支持多个source 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式（ MP4, WebM, 和 Ogg）
(4).SVG绘图
什么是SVG?
● SVG指可伸缩矢量图形
● SVG用于定义用于网络的基于矢量的图形
● SVG使用XML格式定义图形
● SVG图像在放大或改变尺寸的情况下其图形质量不会有损失
● SVG是万维网联盟的标准
SVG的优势
● SVG图像可通过文本编译器来创建和修改
● SVG图像可被搜索、索引、脚本化或压缩
● SVG是可伸缩的
● SVG图像可在任何的分辨率下被高质量的打印
● SVG可在图像质量不下降的情况下被放大
SVG和Canvas两者的区别
● SVG 是一种使用 XML 描述 2D 图形的语言。
● Canvas 通过 JavaScript 来绘制 2D 图形。
● SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
● 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
● Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
(5).Canvas绘图
(6).地理定位
HTML5 Geolocation（地理定位）用于定位用户的位置。
window.navigator.geolocation {
getCurrentPosition: fn 用于获取当前的位置数据
watchPosition: fn 监视用户位置的改变
clearWatch: fn 清除定位监视
}
navigator.geolocation.getCurrentPosition(
function(pos){
console.log('用户定位数据获取成功')
//console.log(arguments);
console.log('定位时间：',pos.timestamp)
console.log('经度：',pos.coords.longitude)
console.log('纬度：',pos.coords.latitude)
console.log('海拔：',pos.coords.altitude)
console.log('速度：',pos.coords.speed)
}, //定位成功的回调
function(err){
console.log('用户定位数据获取失败')
//console.log(arguments);
} //定位失败的回调
)
(7).拖放API
拖放是一种常见的特性，即捉取对象以后拖到另一个位置。
在html5中，拖放是标准的一部分，任何元素都能够拖放。
(8).Web Worker
Web Worker可以通过加载一个脚本文件，进而创建一个独立工作的线程，在主线程之外运行。
基本使用：
Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新线程之间数据交换的接口：postMessage、onmessage。
(9).Web Storage
客户端存储数据有两个对象，其用法基本是一致。
localStorage：没有时间限制的数据存储
sessionStorage:在浏览器关闭的时候就会清除。
(10).WebSocket
WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。
特点：
● 握手阶段采用HTTP协议，默认端口是80和443
● 建立在TCP协议基础之上，和http协议同属于应用层
● 可以发送文本，也可以发送二进制数据。
● 没有同源限制，客户端可以与任意服务器通信。
● 协议标识符是ws（如果加密，为wss），如ws://localhost:8023
3.盒模型
盒子模型分为标准盒子模型和IE盒子模型
标准盒模型（W3C）：content（内容）+ padding（内边距）+ border（边框）+ margin（外边距），宽高是指content的宽高。
image.png
IE盒子模型（怪异盒模型）：content（内容）+ padding（内边距）+ border（边框）+ margin（外边距），宽高是指content + padding + border的宽高。
4.简述CSS3新特性
(1).布局方面增加了flex布局
(2).选择器新增了first-of-type，nth-child等选择器
(3).新增transition过渡和animation动画，2D转换，3D转换
(4).新增了box-sizing属性来改变盒模型
(5).在颜色方面添加透明，rgba等；字体方面允许嵌入字体和设置字体阴影，同时当然也有盒子的阴影
(6).媒体查询
网友评论