一、題目：談?wù)勀銓?duì)CSS盒模型的認(rèn)識(shí)

1. 基本概念？

????????有標(biāo)準(zhǔn)模型和IE模型兩種，由margin、padding、content、border組成。

2. 標(biāo)準(zhǔn)模型和IE模型區(qū)別？

????????寬和高的計(jì)算方式不同。標(biāo)準(zhǔn)模型的寬度指的就是content的寬度，不包含padding和border。

標(biāo)準(zhǔn)：width = content + padding + border；

IE：width = content；

3. CSS如何設(shè)置這兩種模型？

? ? 這是css3新屬性，box-sizing: content-box; 是指盒模型的寬高就是content的寬高，是標(biāo)準(zhǔn)盒模型下設(shè)置的，瀏覽器默認(rèn)設(shè)置；box-sizing: border-box; 是IE下的設(shè)置。

4. JS如何設(shè)置獲取盒模型對(duì)應(yīng)的寬和高？

????????a) dom.style.width/height

?? ? ? ? 這種方式不能拿到所有元素的寬和高，只能拿到這個(gè)dom節(jié)點(diǎn)的內(nèi)聯(lián)屬性的，即元素內(nèi)嵌的css寬高。

????????var elWidth = document.getElementById('box').style.width;

? ? ? ? b) dom.currentStyle.width/height

? ? ? ? ? ? 不管是哪種css樣式寫法，運(yùn)行后產(chǎn)生的樣式在currentStyle（渲染后的樣式）上，但這是IE屬性。

? ? ? ? c) window.getComputedStyle(dom).width/height

? ? ? ? ? ? 這個(gè)是所有瀏覽器都支持的。

? ? ? ? d) dom.getBoundingClientRect().width/height

? ? ? ? ? ? 該方法可以拿到運(yùn)行后的屬性。一般用于計(jì)算一個(gè)元素的絕對(duì)位置，根據(jù)視窗，也就是viewport的左上角定點(diǎn)，拿到top、right、bottom、left四個(gè)值。