一夫偶、盒模型
1.標(biāo)準(zhǔn)盒子模型:范圍包括 margin、border、padding汇恤、content;
width = content? ?; 所占位置 margin*2+border*2+padding*2+content; 實(shí)際大小 border*2+padding*2+content;
2.IE盒子模型:范圍包括 margin拔恰、border因谎、padding、content颜懊;
width = border + padding + content? ; 所占位置 margin*2+content; 實(shí)際大小 content;
注:添加DOCTYPE聲明财岔,使包括IE的所有瀏覽器使用‘標(biāo)準(zhǔn)盒子模型’;否則IE678會(huì)使用怪異模式
注:margin疊加合并:兩個(gè)上下相鄰的div河爹,margin會(huì)合并匠璧,取較大的那個(gè)margin。(除 行內(nèi)咸这、浮動(dòng)夷恍、定位 外)
二、box-sizing (IE7不支持)
box-sizing: content-box(默認(rèn)) | padding-box(只有firefox支持) | border-box | inherit(繼承自父集)
應(yīng)用:1.有邊框的盒子正常使用百分比
? ? ? ? ? 2.全局設(shè)置border-box,省去加減計(jì)算
三媳维、flex布局
1.display: flex | inline-flex;? (則float酿雪、clear、vertical-align失效)
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
注:可使用‘flex’侄刽,定義伸縮項(xiàng)目的根據(jù)容器剩余空間來(lái)決定伸縮項(xiàng)目的寬度.
flex于對(duì)應(yīng)的空間成正比指黎,如果左邊f(xié)lex:1,右邊f(xié)lex:2州丹,伸縮容器將剩余的空間按比例分配給左邊和右邊醋安。
四、作用域
js的作用域僅存在于函數(shù)范圍內(nèi)墓毒。變量提升:所有的?函數(shù)?和?變量聲明?會(huì)被提升到最前面吓揪,并且變量聲明永遠(yuǎn)在最前面。賦值在聲明變量之后所计。
例1:var x=10; function x (){}; console.log(x); ----->? var x; function x(){}; x=10; console.log(x);
例2:foo();bar();var foo = function(){};function bar(){};---->var foo; var bar; bar = function(){};foo()? !error!; bar();foo = function(){};
五磺芭、
instanceof? 運(yùn)算符用來(lái)測(cè)試一個(gè)對(duì)象object 在其 原型鏈 中是否存在一個(gè) 構(gòu)造函數(shù)的prototype屬性。?
object(對(duì)象)? instanceof? constructor(構(gòu)造函數(shù))
例1:function C(){};? var o = new C();? ?o instanceof C;//true? ? o instanceof Object; //true
hasOwnProperty(): 判斷對(duì)象是否具有指定的屬性作為自身(不繼承)的屬性醉箕。該方法會(huì)忽略掉繼承自原型鏈的屬性钾腺。
Obj.hasOwnProperty(prop)
例1:o = new Object();? o.prop = 'exists';? o.hasOwnProperty('prop')? ?//true?