盒模型
盒模型就是把元素用一个矩形盒子表示，包括content，padding，border，margin，盒模型分为标准盒模型和IE盒模型
标准盒模型：width = content
IE盒模型：width = content+padding +border
//标准盒模型 box-sizing:content-box; //IE盒模型 box-sizing:border-box;
BFC
BFC是一个特殊的块，块内部元素和外部不会互相影响
形成BFC块的条件：
- float属性不为none
- overflow属性不为visible
- position：absolute｜fixed
- display:inline-block;
BFC的应用
- 清除浮动，BFC在计算高度的时候，浮动元素也会计算进去
- 解决margin重叠问题
- 自适应布局，消除文字环绕，BFC不与浮动元素重叠
清除浮动的方式
- 创建BFC块，给父元素添加属性，overfow：hidden | float:left .....
- 浮动元素后面添加空div，并设置属性clear：both
- 父元素添加伪类
.clearfix:after{display:block;clear:both;content:'';visibility:hidden;height:0;}
.clearfix{zoom:1}
多元素浮动参差不齐
利用clear属性，给最左一列元素增加属性clear:left
.left{clear:left}
利用display：inline-block
//最外层容器font-size设置为0，目的是去除inline-block元素间默认间距； // 内层元素设置display：inline-block，同时重置font-size，并且设置vertical-align:top向上对齐 .wrapper{font-size:0}; .item{float:left;dispaly:inline-clock;verticle-align:top;font-size:12px}
实现水平垂直居中
.box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
自适应布局
//左边左浮动，右边加个overflow:hidden; .left{200px;background:red;float:left;} .right{background:blue;overflow:hidden;} //左边左浮动，右边加个margin-left; .left{200px;background:red;float:left;} .right{background:blue;margin-left:200px} //左边绝对定位，右边加个margin-left; .left{200px;background:red;position:absolute;} .right{background:blue;margin-left:200px} //左右两边绝对定位，右边加个width,top,left,right .left{200px;background:red;position:absolute;} .right{background:blue;position:absolute;left:200px;top:0;right:0;}
弹性盒布局
任何一个容器都可以指定为Flex布局， 行内元素也可以使用Flex布局， Webkit内核的浏览器，必须加上-webkit前缀 .box{ display: -webkit-flex; /* Safari */ display: flex; } 注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 容器的属性 flex-direction 决定主轴方向 row（默认水平） | row-reverse | column | column-reverse flex-wrap 决定如何换行 nowrap（默认不换行） | wrap | wrap-reverse（换行，第一行在下方） flex-flow flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap justify-content 主轴对齐方式 flex-start（默认左对齐） | flex-end | center | space-between | space-around align-items 交叉轴对齐方式 flex-start | flex-end | center | baseline | stretch（默认沾满整个容器高度）; align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用 flex-item属性 order 排序 ，越小越靠前，默认0 flex-grow 放大比例，默认为0 flex-shrink 缩小比例，默认为1 flex-basis 占据的主轴空间 flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选 align-self 覆盖agn-items属性 auto（默认继承align-item） | flex-start | flex-end | center | baseline | stretch
H5新特性
1.新增语义化标签 header、footer、section、nav、article、aside、time、main
2.增强表单 新增input类型：number、tel、email、time、week、month、url、range 新增表单元素：datalist、progress、meter、keygen、output 新增表单属性：autofocus、required、placeholder、min/max、
3.视频和音频标签 音频：
<audio controls> //controls属性提供添加播放、暂停和音量控件。
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。 //浏览器不支持时显示文字
</audio>
视频：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
4.Canvas绘图 canvas学习地址
5.Svg绘图
6.地理定位
7.拖放API
8.webWorker Web Worker的基本原理就是在当前javascript的主线程中，使用Worker类加载一个javascript文件来开辟一个新的线程，起到互不阻塞执行的效果，并且提供主线程和新县城之间数据交换的接口：postMessage、onmessage。
9.webStoreage localStorage、sessionStorage
10.webSoket WebSocket协议为web应用程序客户端和服务端之间提供了一种全双工通信机制。 特点： （1）握手阶段采用HTTP协议，默认端口是80和443 （2）建立在TCP协议基础之上，和http协议同属于应用层 （3）可以发送文本，也可以发送二进制数据。 （4）没有同源限制，客户端可以与任意服务器通信。 （5）协议标识符是ws（如果加密，为wss），如ws://localhost:8023
CSS3新特性
//边框 border-radius box-shadow border-image不支持IE //背景 background-size : width height/百分比/contain/cover background-origin: padding-box|border-box|content-box;//背景定位区域 background-clip: border-box|padding-box|content-box;//背景裁剪区域 //文本 text-shadow: 5px 5px 5px #FF0000; word-wrap:break-word；长单词换行 //字体 @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } //2D转换 Chrome 和 Safari 需要前缀 -webkit-。 Internet Explorer 9 需要前缀 -ms- 火狐加需要前缀-moz- 欧朋需要前缀-o- transform translate(x,y)x,y轴平移 translateX()、translateY() rotate(angle)正时针旋转 scale(x,y)收缩 scaleX() scaleY() skew(x-angle,y-angle)倾斜角度 //3D转换 transform Opera 不支持 3D 转换（它只支持 2D 转换） translate3d(x,y,z) scale3d（x-angle,y-anlge,z-angle） rotate3d(x,y,z,angle) 过渡（元素从一个状态到另一个状态的过程） Safari 需要前缀 -webkit-。 trnasition-property过渡的属性名 trnasition-duration过渡时间 transition-timing-function过渡时间曲线 transition-delay过渡延迟，默认0 transition:all 1s linear 0;简写 //动画 //定义动画 @keyframes name动画名称{ from{属性} 为动画开始 to{属性} 动画结束 } @keyframes name动画名称{ 0%{}动画开始 25%{} 50%{} 75%{} 100%{}动画结束 } //引用动画 animation： animation-name @keyframs规定的动画名称 animation-duration 规定动画完成时间 animation-timing-function动画速度曲线 animation-delay 规定动画开始时间 animation-iteration-count规定动画播放次数，默认1，infinite无限 animation-direction规定动画是否在下一周期逆向播放，默认nomal alternate逆向播放 //简写 animation:name 2s linear 2s infinite alternate