CSS盒模型
標準模型與IE模型的區(qū)別
標準盒模型的width 是以盒模型的content 來計算的計算高度寬度不同
IE盒模型的width 是以盒模型的border + padding + content 來計算的
CSS如何設(shè)置這兩種模型
通過設(shè)置元素的box-sizing 屬性
標準盒模型設(shè)置為box-sizing: content-box
IE盒模型設(shè)置為box-sizing: border-box
JS如何設(shè)置獲取盒模型對應(yīng)的寬和高
// 獲取內(nèi)聯(lián)樣式
dom.style.width / height
// 獲取渲染后的屬性 IE 支持
dom.currentStyle.width / height
// 獲取元素渲染后計算完畢的樣式画恰，所有瀏覽器支持
window.getComputedStyle(dom).width / height
// 計算元素的絕對位置
dom.getBoundingClientRect().width / height
dom.getBoundingClientRect() 函數(shù)不僅可以得到元素的寬高還能獲得此元素在頁面中的位置彭谁。[圖片上傳失敗...(image-a1291e-1516628501105)]
BFC
什么是BFC
BFC(block formatting context) 是一個塊級格式化上下文，它形成了一個獨立的布局環(huán)境允扇。
怎么創(chuàng)建一個BFC
1 設(shè)置float缠局，值不為”none”
2 設(shè)置overflow，值不為”visible”（hidden考润，auto狭园，scroll）
3 設(shè)置display的值為 “table-cell”, “table-caption”,或 “inline-block”
4 設(shè)置position，值不為 “static” 或 “relative”（absolute糊治，fixed）
BFC 有什么特點
1 BFC 元素內(nèi)的各元素會在垂直方向上從頂部一個接一個的放置唱矛。
2 BFC中的元素的布局是不受外界的影響,內(nèi)外元素不會互相影響。
3 BFC元素不會與浮動元素的區(qū)域重疊
4 計算BFC元素高度的時候浮動元素也會參與計算 代碼
5 屬于同一個BFC的兩個相鄰Box的margin會發(fā)生疊加 代碼
BFC 的使用場景
DOM
DOM事件的級別
// DOM0級
el.onclick=function(){}
// DOM2級
el.addEventListenter('click', function(){}, '是否捕獲階段觸發(fā)': boolean)
// DOM3級 區(qū)別DOM2級增加了更多的事件類型
el.addEventListenter('keyup', function(){}, '是否捕獲階段觸發(fā)': boolean)
DOM事件模型
- 事件捕獲
- 事件冒泡
DOM事件流
DOM事件流(event flow)三階段
事件觸發(fā)(觸發(fā)元素) => 事件捕獲階段(事件下傳) => 處于目標階段(達到目標元素) => 事件冒泡階段(事件上傳)
描述DOM事件捕獲的具體流程
// IE 只有冒泡流程
window => document => html(document.documentElement) => body => ... => 目標元素
如何自定義事件
Event 對象
// 創(chuàng)建
var event = new Event('custome')
// 注冊
el.addEventListener('custome', function(){
console.log('custome')
})
el.dispatchEvent(event) // 觸發(fā)
CustomEvent 對象
var event = new CustomEvent('build', { 'detail': elem.dataset.time });
function eventHandler(e) {
console.log('The time is: ' + e.detail);
}
el.addEventListener('custome', eventHandler)
el.dispatchEvent(event) // 觸發(fā)
Event對象的常見應(yīng)用
event.preventDefault() // 阻止默認
event.stopPropagation() // 阻止冒泡
event.stopImmediatePropagation() // 按鈕綁定兩個click井辜，A點擊時候不出發(fā)B绎谦，A會成功阻止B, 事件響應(yīng)優(yōu)先級
event.target // 可以用于事件委托，由父級注冊事件
event.currentTarget
currentTarget vs target
target在事件流的目標階段粥脚；currentTarget在事件流的捕獲窃肠，目標及冒泡階段。只有當事件流處在目標階段的時候刷允，兩個的指向才是一樣的冤留， 而當處于捕獲和冒泡階段的時候，target指向被單擊的對象而currentTarget指向當前事件活動的對象（一般為父級）树灶。
類型轉(zhuǎn)換
-
數(shù)據(jù)類型
- 原始類型
Boolean, String, Number, Null, Undefined, Symbol
- 復雜類型(對象)
Object
-
顯式類型轉(zhuǎn)換
Number函數(shù)簡單類型: 直接轉(zhuǎn)換end
復雜類型: valueOf() => 簡單類型 => 直接轉(zhuǎn)換end || 復雜類型 => toString() => 簡單類型 =>
直接轉(zhuǎn)換endString函數(shù)
簡單類型: 直接轉(zhuǎn)換end
復雜類型: toString() => 簡單類型 => 直接轉(zhuǎn)換end || 復雜類型 => valueOf() => 簡單類型 =>
直接轉(zhuǎn)換end || 復雜類型errorBoolean函數(shù)
空字符串纤怒、Null、undefined破托、false肪跋、0 轉(zhuǎn)化為false
