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ù)頁面的呈現(xiàn)模式的定義而是用對(duì)性的方框模式。已用哪中呈現(xiàn)的模式取決于頁面上的DOCTYPE的聲明。
如果頁面包含有效的DOCTYPE聲明，則以嚴(yán)格模式呈現(xiàn)。
如果頁面沒有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的方法很簡單。是通過bool類型的$.boxModel標(biāo)志。如果頁面是用的是W3C標(biāo)準(zhǔn)的模型，返回true.否則返回false。
如果頁面沒有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的方法很簡單。是通過bool類型的$.boxModel標(biāo)志。如果頁面是用的是W3C標(biāo)準(zhǔn)的模型，返回true.否則返回false。
相關(guān)文章
這篇文章主要介紹了JQuery屬性操作與循環(huán)用法,結(jié)合實(shí)例形式分析了jQuery屬性讀取、設(shè)置,以及針對(duì)頁面元素循環(huán)遍歷相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
jQuery使用手冊(cè)之一...2007-03-03
jquery 判斷selection range 是否在容器中的簡單實(shí)例
下面小編就為大家?guī)硪黄猨query 判斷selection range 是否在容器中的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
使用jQuery實(shí)現(xiàn)購物車結(jié)算功能
這篇文章主要為大家詳細(xì)介紹了使用jQuery實(shí)現(xiàn)購物車結(jié)算功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
jQuery插件FusionCharts實(shí)現(xiàn)的MSBar2D圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件FusionCharts實(shí)現(xiàn)的MSBar2D圖效果,結(jié)合實(shí)例形式分析了jQuery使用FusionCharts插件結(jié)合xml數(shù)據(jù)載入實(shí)現(xiàn)繪制MSBar2D圖的相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載,需要的朋友可以參考下2017-03-03
jQuery照片伸縮效果，不是單純的圖片放大縮小，不影響其他元素的布局,需要的朋友可以參考下2014-05-05
jQuery實(shí)現(xiàn)用戶信息表格的添加和刪除功能
這篇文章主要介紹了jQuery實(shí)現(xiàn)用戶信息表格的添加和刪除功能,代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-09-09
沒有關(guān)閉按鈕，但是點(diǎn)擊其他地方的時(shí)候，彈出框消失，必須用js給彈出框的父元素加上更高的層次，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下2013-08-08
基于Jquery和CSS3制作數(shù)字時(shí)鐘附源碼下載(CSS3篇)
數(shù)字時(shí)鐘在web倒計(jì)時(shí)，web鬧鐘效果以及基于html5的web app中，本文給大家介紹基于jquery和css3制作數(shù)字時(shí)鐘附源碼下載，感興趣的朋友來看看吧2015-11-11
jquery 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query 將當(dāng)前時(shí)間轉(zhuǎn)換成yyyymmdd格式的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考2016-06-06