標準盒子模型的尺寸為:“內容的寬高兩側內邊距padding的大小兩側邊框border的大小”;而IE盒子模型的尺寸直接就為:“內容的寬高” ,盒子設定的寬/高屬性就是盒子本身的整體尺寸,如果帶有內邊距或邊框,則透過縮小內容區域來實現。
本教學操作環境:windows7系統、css3版本,此方法適用於所有品牌電腦。
(推薦教學:CSS影片教學)
盒子模型(Box Modle)可以用來對元素進行佈局,包括實際內容(content)、內邊距(padding)、邊框(border)與外邊距(margin)這幾個部分。
一、盒子模型的分類
盒模型分為兩種:ie盒子模型(怪異盒子模型)和標準w3c盒模型。
#
二、標準模型與IE 模型的尺寸計算
1、標準盒子的尺寸計算
盒子本身的尺寸:內容的寬高兩側內邊距的大小兩側邊邊框的大小
盒子在頁面中佔位的尺寸:內容的寬高兩側內邊距兩側邊框兩側外邊距
2、 IE盒子的尺寸計算
盒子本身的尺寸:內容的寬高
盒子在頁面中佔位的尺寸:內容的寬高兩側外邊距
IE盒子直接將寬/高屬性設定為盒子本身的整體尺寸,如果帶有內邊距或邊框,則透過縮小內容區域來實現
更多編程相關知識,請訪問:編程入門! !
以上是css盒子模型尺寸如何計算的詳細內容。更多資訊請關注PHP中文網其他相關文章!