Jquery中文網 www.uhadif.co
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 JQuery 確定css方框模型(盒模型Box Model)

JQuery 確定css方框模型(盒模型Box Model)

發布時間:2013-08-31   編輯:www.uhadif.co
做過前臺設置的都知道css存在兩種盒模型,W3C標準的方框模型和IE瀏覽器的方框模型。除IE以外的大多數瀏覽器只支持W3C方框模型。IE瀏覽器能夠根據頁面的呈現模式的定義而是用對性的方框模式。已用哪中呈現的模式取決于頁面上的DOCTYPE的聲明。
做過前臺設置的都知道css存在兩種盒模型,W3C標準的方框模型和IE瀏覽器的方框模型。除IE以外的大多數瀏覽器只支持W3C方框模型。IE瀏覽器能夠根據頁面的呈現模式的定義而是用對性的方框模式。已用哪中呈現的模式取決于頁面上的DOCTYPE的聲明。 如果頁面包含有效的DOCTYPE聲明,則以嚴格模式呈現。
如果頁面沒有DOCTYPE聲明或沒有有效的DOCTYPE聲明,則以兼容模式呈現。
下面將一個兩種模式的區別,兩種呈現模式的主要差別是對元素width和height樣式的計算上。如下面的樣式
復制代碼 代碼如下:

{
  width:180px;
  height:72px;
  padding:10px;
  bording-width:5px;
}

在W3C的嚴格模式下,元素的內容顯示的范圍是180*72px。內邊距和邊框在180*72像素的范圍之外。所以整個元素的覆蓋面積是:width:180 + 10*2 + 5*2 = 210px,height:72 +10*2 + 5*2 =102px。
在IE的兼容模式下整個元素的覆蓋面積為180*72像素。內容的大小減小到寬度180 - 10*2 - 5*2=150px,高度72 - 10*2 - 5*2 =32px。
是用jquery判斷Box Modal的方法很簡單。是通過bool類型的$.boxModel標志。如果頁面是用的是W3C標準的模型,返回true.否則返回false。

您可能感興趣的文章:
JQuery 確定css方框模型(盒模型Box Model)
淺析jQuery1.8的幾個小變化
php實現mvc模式的例子
基于JQuery的Select選擇框的華麗變身
CSS實現兩端對齊的3種方法
jQuery Superbox!
jQuery學習筆記(2)--用jquery實現各種模態提示框代碼及項目構架
從零開始學習jQuery (九) jQuery工具函數
簡單介紹MVC思想與PHP實現MVC的方法
Laraverl Eloquent查詢作用域和模型事件

[關閉]
北京pk赛车历史 pk10 如何炒金 北京赛车pk10 吉林十一选五 腾讯模拟炒股 e球彩 东方财富网股票行情 20选5 云南快乐10分 山西11选5 私募基金配资合法吗 模拟炒股游戏 山西快乐十分 基金配资申请 188足球比分网 629足球比分网