css盒子模型尺寸如何計算

標準盒子模型的尺寸為：“內容的寬高兩側內邊距padding的大小兩側邊框border的大小”；而IE盒子模型的尺寸直接就為：“內容的寬高” ，盒子設定的寬/高屬性就是盒子本身的整體尺寸，如果帶有內邊距或邊框，則透過縮小內容區域來實現。

本教學操作環境：windows7系統、css3版本，此方法適用於所有品牌電腦。

（推薦教學：CSS影片教學）

盒子模型（Box Modle）可以用來對元素進行佈局，包括實際內容（content）、內邊距（padding）、邊框（border）與外邊距（margin）這幾個部分。

一、盒子模型的分類

盒模型分為兩種：ie盒子模型（怪異盒子模型）和標準w3c盒模型。

 

# 

二、標準模型與IE 模型的尺寸計算

1、標準盒子的尺寸計算

盒子本身的尺寸：內容的寬高兩側內邊距的大小兩側邊邊框的大小

盒子在頁面中佔位的尺寸：內容的寬高兩側內邊距兩側邊框兩側外邊距

2、 IE盒子的尺寸計算

盒子本身的尺寸：內容的寬高

盒子在頁面中佔位的尺寸：內容的寬高兩側外邊距

IE盒子直接將寬/高屬性設定為盒子本身的整體尺寸，如果帶有內邊距或邊框，則透過縮小內容區域來實現

更多編程相關知識，請訪問：編程入門！ ！

以上是css盒子模型尺寸如何計算的詳細內容。更多資訊請關注PHP中文網其他相關文章！