JQuery 確定css方框模型（盒模型Box Model）
更新時(shí)間：2010年01月22日 10:27:43 作者：
做過前臺(tái)設(shè)置的都知道css存在兩種盒模型，W3C標(biāo)準(zhǔn)的方框模型和IE瀏覽器的方框模型。除IE以外的大多數(shù)瀏覽器只支持W3C方框模型。IE瀏覽器能夠根據(jù)頁(yè)面的呈現(xiàn)模式的定義而是用對(duì)性的方框模式。已用哪中呈現(xiàn)的模式取決于頁(yè)面上的DOCTYPE的聲明。
如果頁(yè)面包含有效的DOCTYPE聲明，則以嚴(yán)格模式呈現(xiàn)。
如果頁(yè)面沒有DOCTYPE聲明或沒有有效的DOCTYPE聲明，則以兼容模式呈現(xiàn)。
下面將一個(gè)兩種模式的區(qū)別，兩種呈現(xiàn)模式的主要差別是對(duì)元素width和height樣式的計(jì)算上。如下面的樣式
{
width:180px;
height:72px;
padding:10px;
bording-width:5px;
}
在W3C的嚴(yán)格模式下，元素的內(nèi)容顯示的范圍是180*72px。內(nèi)邊距和邊框在180*72像素的范圍之外。所以整個(gè)元素的覆蓋面積是：width:180 + 10*2 + 5*2 = 210px，height:72 +10*2 + 5*2 =102px。
在IE的兼容模式下整個(gè)元素的覆蓋面積為180*72像素。內(nèi)容的大小減小到寬度180 - 10*2 - 5*2=150px，高度72 - 10*2 - 5*2 =32px。
是用JQuery判斷Box Modal的方法很簡(jiǎn)單。是通過bool類型的$.boxModel標(biāo)志。如果頁(yè)面是用的是W3C標(biāo)準(zhǔn)的模型，返回true.否則返回false。
如果頁(yè)面沒有DOCTYPE聲明或沒有有效的DOCTYPE聲明，則以兼容模式呈現(xiàn)。
下面將一個(gè)兩種模式的區(qū)別，兩種呈現(xiàn)模式的主要差別是對(duì)元素width和height樣式的計(jì)算上。如下面的樣式
復(fù)制代碼 代碼如下:
{
width:180px;
height:72px;
padding:10px;
bording-width:5px;
}
在W3C的嚴(yán)格模式下，元素的內(nèi)容顯示的范圍是180*72px。內(nèi)邊距和邊框在180*72像素的范圍之外。所以整個(gè)元素的覆蓋面積是：width:180 + 10*2 + 5*2 = 210px，height:72 +10*2 + 5*2 =102px。
在IE的兼容模式下整個(gè)元素的覆蓋面積為180*72像素。內(nèi)容的大小減小到寬度180 - 10*2 - 5*2=150px，高度72 - 10*2 - 5*2 =32px。
是用JQuery判斷Box Modal的方法很簡(jiǎn)單。是通過bool類型的$.boxModel標(biāo)志。如果頁(yè)面是用的是W3C標(biāo)準(zhǔn)的模型，返回true.否則返回false。
相關(guān)文章
Jquery遍歷節(jié)點(diǎn)的方法有next、nextAll、prev、prevAll、siblings等等，大家可以根據(jù)自己的需求自由選擇2014-01-01
jQuery EasyUI API 中文文檔 - ComboGrid 組合表格
jQuery EasyUI API 中文文檔 - ComboGrid 組合表格,需要的朋友可以參考下。2011-10-10
可兼容IE的獲取及設(shè)置cookie的jquery.cookie函數(shù)方法
在使用IE來(lái)測(cè)試的時(shí)候，發(fā)現(xiàn)Discuz中的common.js里面的getcookie和setcookie這兩個(gè)方法子啊IE下不起作用，因此有了jquery.cookie.js的由來(lái)，感興趣的朋友可以參考下2013-09-09
原生js和jquery實(shí)現(xiàn)圖片輪播特效
本文給大家分享的是使用原生JS和JQ兩種方法分別實(shí)現(xiàn)相同的圖片輪播特效，十分的實(shí)用，也非常方便大家對(duì)比學(xué)習(xí)原生js和jQuery，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要為大家詳細(xì)介紹了jquery制做精致的倒計(jì)時(shí)特效的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
經(jīng)常使用jquery的朋友，需要測(cè)試下firefox的兼容性2008-10-10
javascript 開發(fā)之網(wǎng)頁(yè)兼容各種瀏覽器
這篇文章主要介紹了javascript 開發(fā)之網(wǎng)頁(yè)兼容各種瀏覽器的相關(guān)資料,這里提供了幾種方法幫助大家掌握這樣的功能，需要的朋友可以參考下2017-09-09
jQuery滿意度星級(jí)評(píng)價(jià)插件特效代碼分享
這篇文章主要介紹了jQuery滿意度星級(jí)評(píng)價(jià)插件特效,我們可以自定義每個(gè)五角星代表的分值，鼠標(biāo)滑過五角星時(shí)即可計(jì)算當(dāng)前的分值，這款jQuery評(píng)分插件非常簡(jiǎn)單而且實(shí)用。有需要的小伙伴可以參考下2015-08-08
得到j(luò)Query detach()后節(jié)點(diǎn)中的某個(gè)值實(shí)現(xiàn)代碼
需要jQuery -detach 后的dom 結(jié)構(gòu)或某個(gè)值，如何獲取到呢？一直困惑著我們，不過本文將為大家解開疑惑，感興趣的朋友可以了解下，或許本文對(duì)你有所幫助2013-02-02
這篇文章主要介紹了jQuery中:focus選擇器用法,以實(shí)例形式分析了:focus選擇器的功能、定義及匹配獲取焦點(diǎn)元素的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12