首頁 > web前端 > js教程 > JQuery確定css方框模型(盒子模型Box Model)

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

巴扎黑
發布: 2017-07-08 13:09:15
原創
1206 人瀏覽過

做過前台設定的都知道css存在兩種盒子模型,W3C標準的方格模型和IE瀏覽器的方格模型。除IE以外的大多數瀏覽器只支援W3C方框模型。 IE瀏覽器能夠根據頁面的呈現模式的定義而是用對性的方框模式。已用哪中呈現的模式取決於頁面上的DOCTYPE的聲明。

如果頁麵包含有效的DOCTYPE聲明,則以嚴格模式呈現。

如果頁面沒有DOCTYPE宣告或沒有有效的DOCTYPE聲明,則以相容模式呈現。

下面將一個兩種模式的區別,兩種呈現模式的主要差異是對元素width和height樣式的計算上。如下面的樣式

{

  width:180px;

  height:72px;

#  padding:10px;

#  

padding

:10px;

#  padding:10px;

#  

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)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板