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