html laber上下居中,H5新增标签、样式，手写tab切换 水平垂直居中

H5新增标签

1.header : 头部信息

2.footer ：页脚

3.nav：导航链接的部分。

4.main: 主体

5.section：独立的内容区块

6.aside:侧边栏导航

7.article:文章标签

8.mark:标记，内容显示背景颜色，可以修改

9.address:地址标签

10.time: 表示日期或时间，也可以同时表示两者，相当于span

11.figure+figcaption：表示一段独立的内容，一般表示文档主体流内容中的一个独立单元。figcaption表示 figure 的标题。从属于 figure ， 并且， figure 中只能放置一个 figcaption。

12.video/audio

CSS3样式

1.color：rgba(R,G,B,A) ：

以上R、G、B三个参数，正整数值的取值范围为：0 - 255。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

2.text-shadow:文本阴影。

指定多个阴影：(参数形式为X坐标 Y坐标 阴影的模糊程度 阴影颜色)

text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;

3.box-shadow：盒子阴影。

注意：inset 可以写在参数的第一个或最后一个，其它位置是无效的。

4.word-break：自动换行。

normal:使用浏览器默认换行规则。

keep-all:只能在半角空格或连接字符处换行。

break-all:允许在单词内换行(对于标点符号来说，允许标点符号位于行首，不过在IE中是不可以的)。

5.word-wrap：让长单词与URL地址自动换行。

word-wrap:break-word;

6.border-radius:圆角。

7. 引用的一些服务端字体。

8.box-sizing:border-box 怪异盒模型。

9.transform ：2D转换

rotate() 旋转函数 取值度数 Transform-origin 旋转的基点

skew() 倾斜函数 取值度数 (扭曲) skewX() skewY()

scale() 缩放函数 取值 正数、负数和小数 scaleX()scaleY()

translate() 位移函数 translateX()translateY()

10.transform： rotate3d()/ translate3d()/scale3d() 3D转换

rotate3d(x,y,z,angle)：旋转

translate3d(x,y,z)：平移

scale3d(x,y,z) 缩放

11.transition：过渡

transition-property 要运动的样式 (all || [attr] || none)

transition-duration 运动时间

transition-delay 延迟时间

transition-timing-function 运动形式

ease：(逐渐变慢)默认值

linear：(匀速)

ease-in：(加速)

ease-out：(减速)

ease-in-out：(先加速后减速)

手写tab切换

1.利用JS写

(参考二阶段考试题)

2.vue 动态组件写。

(参考昨天鹏哥讲的动态组件)

水平垂直居中

1.position:absolute/fixed;top:50%;left:50%;margin-left:-(width/2);margin-top:-(height/2);

2.position:absolute/fixed;top:0;left:0;right:0;bottom:0;margin:auto;

3.display:flex;justify-content:center;align-items:center;如果写的父元素为body，加上html,body{height:100%}