盒模型
盒模型就是把元素用一個矩形盒子表示，包括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{width:200px;background:red;float:left;} .right{background:blue;overflow:hidden;} //左邊左浮動，右邊加個margin-left; .left{width:200px;background:red;float:left;} .right{background:blue;margin-left:200px} //左邊絕對定位，右邊加個margin-left; .left{width:200px;background:red;position:absolute;} .right{background:blue;margin-left:200px} //左右兩邊絕對定位，右邊加個width,top,left,right .left{width: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