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