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).语义化标签
优点：
(1). 让HTML结构更清晰
(2). 代码可读性更强，利于维护
(3). 更好理解标签的作用，让页面内容结构化
(4). 利于SEO
常用的语义化标签如下：
<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
关于WebSocket
3.盒模型
盒子模型分为标准盒子模型和IE盒子模型
标准盒模型（W3C）： content（内容）+ padding（内边距）+ border（边框）+ margin（外边距），宽高是指content的宽高。
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).媒体查询
5.说一说css尺寸设置的单位
px(pixel)
- 绝对单位，像素px是相对于显示器屏幕分辨率而言的，是虚拟长度单位
- 是固定的像素，一旦设置了就无法改变
em
- 相对长度单位，相对于当前对象内文本的字体尺寸
- 通常是相对于父元素的font-size为基准
- 如果当前行内文本的字体尺寸未被人为设置。则相对于浏览器的默认字体尺寸，它会继承父级元素的字体大小，因此并不是一个固定的值
rem
- 相对长度单位，相对于根元素
<html>的字体大小 - 若根元素字体大小未设置，使用浏览器默认字体大小
vw
- 相对长度单位，相对于视窗宽度的1%
vh
- 相对长度单位，相对于视窗高度的1%
6.sass、scss、less、stylus之间的区别
相同处： 都是css预处理器，可以让我们在css中使用变量、简单的程序逻辑、函数，让css更加简洁，代码更加直观。
不同处：
sass: 使用了缩排语法，不直观，声明变量时使用$开头；不存在全局变量的概念；需要安装Ruby环境，在服务器端处理
scss: sass的升级，改良了缩排语法，用｛｝来代替
less: 使用@来定义变量，逐级向上查找变量
stylus: 直接使用=来定义变量
7.如何实现垂直居中
html部分
<div class="father">
<div class="son">我是垂直居中的div</div>
</div>
（1）绝对定位（方式1）
// css部分
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;（-盒子一半宽度）
margin-top: -150px;（-盒子一半高度）
width: 300px;
height:300px;
background-color: blue;
}
（2）绝对定位（方式2）
.father {
position: relative;
width: 500px;
height: 500px;
background-color: red;
}
.son {
position:absolute;
margin:auto;
top:0;
left:0;
bottom:0;
right:0;
width: 300px;
height:300px;
background-color: blue;
}
（3）定位（宽高未知）
.son {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: blue;
}
（4）grid布局（父元素设置，宽高未知）（兼容性ie 10以上支持）
.father {
display: grid;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
background-color: red;
}
（5）flex布局（父元素设置，宽高未知）（兼容性ie 11以上支持）
.father {
display: flex;
align-items: center;
justify-content: center;
width: 500px;
height: 500px;
background-color: red;
}
（6）表格布局（父元素设置，宽高未知）（兼容性较好）
.father {
display:table-cell
text-align: center;
vertical-align: middle
width: 500px;
height: 500px;
background-color: red;
}
.son {
display: inline-block;
}
8.两栏布局左边固定右边自适应
html部分
<div class="father">
<div class="left"></div>
<div class="right"></div>
</div>
（1）float布局
.left {
width: 200px;
height: 200px;
float: left;
background-color: blue;
}
.right {
margin-left: 200px;
height: 200px;
background-color: red;
}
（2）绝对定位
.father {
position: relative;
height: 200px;
}
.left {
position:absolute;
width: 200px;
height: 100%;
float: left;
background-color: blue;
}
.right {
position:absolute;
height: 100%;
left:200px;
right: 0;
background-color: red;
}
（3）flex布局
.father {
height: 300px;
width: 100%;
display: flex;
}
.left {
width: 300px;
height: 100%;
background-color: blue;
}
.right {
flex: 1;
height: 100%;
background-color: red;
}
9.三栏布局左右固定中自适应
html部分
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="main"> </div>
</div>
（1）float布局
.father{
height: 50px;
div{
height: 100%;
}
}
.left {
width: 200px;
float: left;
background-color: red
}
.main {
margin-left: 200px;
margin-right: 200px;
background-color: blue
}
.right {
float: right;
width: 200px;
background-color: yellow
}
（2）绝对定位
.father{
position: relative;
height: 50px;
div{
position: absolute;
height: 100%;
}
}
.left {
left: 0;
width: 200px;
background-color: red
}
.main {
left: 200px;
right: 200px;
background-color: blue
}
.right {
right: 0;
width: 200px;
background-color: yellow
}
（3）flex布局
html部分
<div class="father">
<div class="left"></div>
<div class="main"> </div>
<div class="right"></div>
</div>
css部分
.father {
display: flex;
height: 50px;
div{
height: 100%;
}
}
.left {
width: 200px;
background-color: red
}
.main {
flex: 1;
background-color: blue
}
.right {
width: 200px;
background-color: yellow
}
10.CSS实现一个三角形
向上
div {
width:0;
height:0;
border-left:30px solid transparent;
border-right:30px solid transparent;
border-bottom:30px solid red;
}
（未完待续，有空再写）
