JavaScript 盒模型 尺寸深入理解
概念
引自維基百科：根據(jù)由萬維網(wǎng)聯(lián)盟（W3C）于1996年發(fā)行并于1999年修訂的CSS1所指定的，當(dāng)任意一個塊級元素的寬度或高度被顯式指定，它應(yīng)當(dāng)只確定這個可見元素自身(內(nèi)容區(qū))的寬度或高度，而padding, border和margin隨后被應(yīng)用。Internet Explorer在“怪異模式” 則把內(nèi)容，內(nèi)邊距（padding）和邊框（border）全部包括在一個指定的寬度或高度之內(nèi)；這導(dǎo)致它呈現(xiàn)出一個比遵從標(biāo)準(zhǔn)行為的結(jié)果更窄或者更短的盒子。如下圖：
理解盒模型，不管是對于設(shè)置一個元素外邊據(jù)、邊框、內(nèi)邊距，高寬CSS樣式的準(zhǔn)確應(yīng)用，還是對于使用JavaScript去計(jì)算盒子的寬度、高度都有很大的幫助。比方說jQuery中提供的outerWidth，innerWidth，width，有了上面那個圖，隨時都可以很清楚的了解這個值的準(zhǔn)確信息，在計(jì)算一個元素的位置和尺寸時都很有用處。
在彈出層中的應(yīng)用，動態(tài)調(diào)整彈出層尺寸，以及拖拽過程中計(jì)算最大范圍邊距時都有用到。
一張圖理解：
相關(guān)文章
ECMAScript6的新特性箭頭函數(shù)（Arrow Function）詳細(xì)介紹
這篇文章主要介紹了ECMAScript6的新特性箭頭函數(shù)（Arrow Function）詳細(xì)介紹,ECMAScript6其實(shí)就是JavaScript,它的新特性就是JS的新特性,引入只是時間問題,需要的朋友可以參考下2014-06-06
本文主要是給大家簡單介紹了Array的相關(guān)基礎(chǔ)知識，到這里也算是能對Array有更全面的理解了，希望大家能夠喜歡，后續(xù)我們將繼續(xù)介紹關(guān)于array的內(nèi)容。2021-11-11
javaScript面向?qū)ο罄^承方法經(jīng)典實(shí)現(xiàn)
很多人都說JavaScript不能算是面向?qū)ο蟮淖兂烧Z言。但是JavaScript的類型非常松散，也沒有編譯器,但是我們可以模仿著其他語言實(shí)現(xiàn)面向?qū)ο蟮姆绞絹韺?shí)現(xiàn)JavaScript的面向編程2013-08-08
這篇文章介紹了js中值類型和引用類型的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
JavaScript中幾個重要的屬性(this、constructor、prototype)介紹
this表示當(dāng)前對象，如果在全局作用范圍內(nèi)使用this，則指代當(dāng)前頁面對象window，prototype本質(zhì)上還是一個JavaScript對象，constructor始終指向創(chuàng)建當(dāng)前對象的構(gòu)造函數(shù)2013-05-05
在JavaScript中this變量是一個令人難以摸清的關(guān)鍵字，this可謂是非常強(qiáng)大，在本文將為大家詳細(xì)介紹下JavaScript中this的使用，感興趣的朋友可以參考下2013-10-10
ArrayList類（增強(qiáng)版）...2007-04-04
xmlHttp是一套在JavaScript腳本語言中通過Http協(xié)議傳送或者接收XML及其他數(shù)據(jù)的API。2011-01-01
圖解prototype、proto和constructor的三角關(guān)系
在javascript中，prototype、constructor以及__proto__之間有著“著名”的剪不斷理還亂的三角關(guān)系，樓主就著自己對它們的淺顯認(rèn)識，來粗略地理理以備忘，有不對之處還望斧正。2016-07-07
總結(jié)javascript三元運(yùn)算符知識點(diǎn)
這是一篇關(guān)于javascript三元運(yùn)算符的相關(guān)基礎(chǔ)知識點(diǎn)內(nèi)容，大家可以學(xué)習(xí)一下鞏固基礎(chǔ)知識。2018-09-09