1、html5的新特性
（1）新增的语义/结构化标签，如 footer nav main article等
（2）新增input的type类型和属性，如email,tel,number等
（3）HTML5专有的API地理位置 本地存储 缓存等
（4）新的图形标签svg canvas
（5）新的多媒体标签，如video audio source
（6）废弃的一些元素标签font
（7）自定义元素标签data-name
（8）DOCTYPE 和字符编码charset声明
2、z-index的使用
答：z-index是用于设置标签的层次关系，使用z-index的时候需要设置标签的postion属性（如relative或者absolute或者fixed都可），标签的默认z-index为0，可以设置负数，值越大，越在顶部
3、position的属性以及使用方式
position是css的定位属性，其主要包括以下几个不同的属性值，具体如下：
（1）absolute
绝对定位，相对于static定位以外的第一个父元素进行定位。
元素通过left top right bottom属性进行调整位置
（2）relative
相对定位，相当于正常位置进行定位
（3）fixed
绝对定位元素，相对于浏览器窗口进行定位。
素通过left top right bottom属性进行调整位置
（4）static
默认值。没有定位，元素出现在正常的流中。
4、flex弹性布局
设置盒子的display属性为flex，或者line-flex,其对应还有6个属性，分别为
（1）flex-direction:设置子元素的排列方式（row,column,row-reverse,column-reverse）(重点)
（2）flex-warp：设置子元素是否换行（nowarp,warp,warp-reverse）(重点)
（3）flex-flow:flex-direction和flex-warp的缩写，默认为row nowarp
（4）justify-content:设置子元素的水平排列方式（flex-start,flex-end,center,stretch,baseline）(重点)
（5）allign-items:设置子元素垂直方式（flex-start,flex-end,center,stretch,baseline）(重点)
（6）align-content：设置多个轴线的排列方式（flex-start，flex-end，center，spand-around，spand-between，stretch）
5、常用的居中方案
（1）行内元素水平居中：直接使用text-align:center;
（2）行内元素垂直居中：vertical-align:middle并设置父级元素的行高为父级元素的高度
（3）固定宽度的元素，水平居中使用：margin:0 auto;
（4）flex弹性布局：设置justify-content:center;水平居中 align-items:垂直居中
（5）设置父级元素 display:table-cell,vertical-align:middle
（6）高度确定，绝对定位+margin 垂直居中
（7）高度不确定，绝对定位+transform，具体为：设置垂直居中元素:position:absolute,top:50%,transform:translateY(-50%)
6、水平垂直居中
（1）绝对定位+transform
.father{
width: 100%;
height: 100%;
position: relative;
}
.son{
width: 500px;
height: 500px;
background: pink;
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
}
（2）弹性布局
.father{
width: 100%;
height: 100%;
display: flex;
align-items:center;
justify-content: center;
}
.son{
width: 500px;
height: 500px;
background: pink;
}
（3）position 定位（适用于子盒子有宽度和高度的时候）
.father{
width: 100%;
height: 100%;
position: relative;
}
.son{
width: 500px;
height: 500px;
background: pink;
position: absolute;
top:50%;
left: 50%;
/* 子元素宽的一半 */
margin-left: -250px;
/* 子元素高的一半 */
margin-top:-250px;
}
（4）position定位 margin:auto;
.father{
width: 100%;
height: 100%;
position: relative;
}
.son{
width: 500px;
height: 500px;
background: pink;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
7、三列布局，左右固定，中间自适应
（1）浮动布局
body,html{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.box1{
width: 100%;
height: 100%;
}
.box2,.box4{
width: 300px;
height: 100%;
}
.box2{
float: left;
background: red;
}
.box3{
background: #000;
margin:0 300px 0 300px;
height: inherit;
}
.box4{
float: right;
background: pink;
}
<div class="box1">
<!-- 左 -->
<div class="box2"></div>
<!-- 右 -->
<div class="box4"></div>
<!-- 中 -->
<div class="box3"> </div>
</div>
(2)flex布局
body,html{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.box{
display: flex;
width: 100%;
height: 100%;
}
.box1,.box3{
height: 100%;
width: 300px;
flex:0 0 300px;
/* flex:0 0 300px; 不扩展、不收缩、固定宽度300px*/
}
.box1{
background: red;
}
.box2{
background: #000;
flex: auto;
/* flex:auto; 等同于 flex:1 1 auto */
}
.box3{
background: pink;
}
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
(3)定位布局
body,html{
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.box{
position: relative;
width: 100%;
height: 100%;
}
.box>div{
position: absolute;
}
.box1,.box3{
height: 100%;
width: 300px;
}
.box1{
background: red;
}
.box2{
background: #000;
right: 300px;
left:300px;
height: inherit;
}
.box3{
background: pink;
right: 0;
}
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
