CSS盒模型

盒模型是CSS中一個重要的概念，一般來說，分為IE盒模型和W3C盒模型，我們只需看兩張圖即可。

標準盒模型

標準盒模型

IE盒模型

IE盒模型

實際上，標準與IE盒模型都是包括了margin，border，padding與content，不同點在于IE的content是包括border和padding部分。
　　要計算盒子所占用的空間，對于標準盒模型來說為：
　　寬：width+2×padding+2×border+2×margin
　　高：height+2×padding+2×border+2×margin
　　對于IE盒模型為：
　　寬：width+2×margin
　　高：height+2×margin

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1贊 92
  • CSS盒模型 在CSS中盒模型被分為兩種，第一種是W3C的標準模型，第二種是IE怪異盒模型。兩種盒子模型都包括pa...
    _空空閱讀 3,406評論 0贊 3
  • 一，什么是CSS盒模型？ CSS盒模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。形象的來說，一張網...
    大春春閱讀 961評論 0贊 2
  • 超悲傷，但是不知道自己在堅持什么，其實說來說去就是幾千塊錢的問題，又不止這些。試問自己，是被欲望與虛榮束縛住了，還...
    ccccj閱讀 115評論 0贊 0
  • OnTheRoad8閱讀 185評論 0贊 0