JavaScript 盒模型 尺寸深入理解
概念
引自維基百科：根據(jù)由萬維網(wǎng)聯(lián)盟（W3C）于1996年發(fā)行并于1999年修訂的CSS1所指定的，當(dāng)任意一個(gè)塊級元素的寬度或高度被顯式指定，它應(yīng)當(dāng)只確定這個(gè)可見元素自身(內(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é)果更窄或者更短的盒子。如下圖：
理解盒模型，不管是對于設(shè)置一個(gè)元素外邊據(jù)、邊框、內(nèi)邊距，高寬CSS樣式的準(zhǔn)確應(yīng)用，還是對于使用JavaScript去計(jì)算盒子的寬度、高度都有很大的幫助。比方說jQuery中提供的outerWidth，innerWidth，width，有了上面那個(gè)圖，隨時(shí)都可以很清楚的了解這個(gè)值的準(zhǔn)確信息，在計(jì)算一個(gè)元素的位置和尺寸時(shí)都很有用處。
在彈出層中的應(yīng)用，動態(tài)調(diào)整彈出層尺寸，以及拖拽過程中計(jì)算最大范圍邊距時(shí)都有用到。
一張圖理解：
相關(guān)文章
常用一些Javascript判斷函數(shù),都是一些js基礎(chǔ)知識，學(xué)習(xí)js的朋友可以看下2012-08-08
js中g(shù)etBoundingClientRect( )方法案例詳解
這篇文章主要介紹了js中g(shù)etBoundingClientRect( )方法案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-07-07
解析DHTML,JavaScript,DOM,BOM以及WEB標(biāo)準(zhǔn)的描述
本篇文章是對DHTML,JavaScript,DOM,BOM以及WEB標(biāo)準(zhǔn)進(jìn)行了詳細(xì)的描述介紹，需要的朋友參考下2013-06-06
javascript設(shè)計(jì)模式之對象工廠函數(shù)與構(gòu)造函數(shù)詳解
這篇文章主要介紹了javascript設(shè)計(jì)模式之對象工廠函數(shù)與構(gòu)造函數(shù)詳解，使用對象字面量，或者向空對象中動態(tài)地添加新成員，是最簡單易用的對象創(chuàng)建方法，除了這兩種常用的對象創(chuàng)建方式，JavaScript還提供了其他方法創(chuàng)建對象,需要的朋友可以參考下2015-07-07
本篇文章主要介紹了js學(xué)習(xí)筆記之事件處理模型，對初學(xué)這具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-10-10
JavaScript中用toString()方法返回時(shí)間為字符串
這篇文章主要介紹了JavaScript中用toString()方法返回時(shí)間為字符串的方法,是JS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
js中slice()方法的使用說明...2007-03-03
js腳本學(xué)習(xí) 比較實(shí)用的基礎(chǔ)
js腳本學(xué)習(xí) 比較實(shí)用的基礎(chǔ)...2006-09-09
javascript 繼承學(xué)習(xí)心得總結(jié)
下面小編就為大家?guī)硪黄猨avascript 繼承學(xué)習(xí)心得總結(jié)。小編覺得挺不錯(cuò)的?，F(xiàn)在分享給大家。給大家做個(gè)參考2016-03-03
這篇文章主要介紹了JavaScript中的語句，包括條件分支語句、循環(huán)語句、迭代語句、Lable語句、break和continue語句、with語句、swith語句，十分全面細(xì)致，推薦給小伙伴們。2015-01-01