css盒模型是頁面布局中經常會使用到的一種思維模型，將margin、border、padding、content等概念運用日常生活中的盒子來形容，因此稱之為「盒模型」。
我們首先來看一下在html中盒模型的樣子：
我們可以清楚的看出，盒模型由content（內容）、padding（內邊距）、border（邊框）、margin（外邊距）組成。
ie8以上瀏覽器預設使用w3c標準盒模型
在w3c標準下，我們定義元素的width值即為盒模型中的content的寬度值，height值即為盒模型中的content的高度值，因此有：
元素佔據的寬度 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right
元素佔據的高度 = margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom
這裡給大家舉個栗子：
盒模型內部元素
w3c盒模型各部分取值：
ie8及以下的瀏覽器預設使用ie盒模型
ie盒模型又稱「怪異盒模型」，在該標準下，我們定義元素的width值為盒模型中的border-left + padding-left + content的寬度值 + padding-right + border-right的總和，height值為盒模型中的border-top + padding-top + content的高度值 + padding-bottom + border-bottom的總和
元素佔據的寬度 = margin-left + width + margin-right
元素佔據的高度 = margin-top + height + margin-bottom
上述同樣的**，在ie盒模型下會有如下效果：
以下是mdn對box-sizing屬性的說明：
box-sizing 屬性可以被用來調整這些表現:我們可以簡單的理解，當content-box 是預設值。如果你設定乙個元素的寬為100px，那麼這個元素的內容區會有100px寬，並且任何邊框和內邊距的寬度都會被增加到最後繪製出來的元素寬度中。
border-box 告訴瀏覽器去理解你設定的邊框和內邊距的值是包含在width內的。也就是說，如果你將乙個元素的width設為100px,那麼這100px會包含其它的border和padding，內容區的實際寬度會是width減去border + padding的計算值。大多數情況下這使得我們更容易的去設定乙個元素的寬高。
box-sizing為content-box時，我們使用的是w3c盒模型，當box-sizing為border-box時，我們使用的是ie盒模型。
更多關於box-sizing屬性的使用，可以看這裡：box-sizing | mdn
盒模型概念無論是在實戰中或者面試中都是非常重要且基礎的知識點，因此需要熟練掌握，此文章對盒模型概念做了基本介紹，希望能給你帶來幫助。
基礎 CSS盒模型
元素的外邊距 margin 邊框 border 內邊距 padding 內容 content 就構成了css盒模型。css盒模型分為ie盒模型 圖2 和w3c盒模型 圖3 其實，ie盒模型是怪異模式 quirks mode 下的盒模型，而w3c盒模型是標準模式 standards mode 下的盒模...
css基礎盒模型
盒模型組成 內容 內邊距 內填充 邊框 外邊距邊框邊 border 1px solid 000 border 粗細 樣式 顏色 設定單獨的邊框線 border top border bottom border left border right取消邊框線 border none 0 邊框粗細 bor...
CSS基礎之盒模型
1.什麼是盒模型 html元素中的每個元素都被描繪成矩形盒子，也就是盛裝內容的容器，這些矩形盒子通過乙個模型來描述其 占用空間 這個模型成為 盒模型 盒模型 有外向裡分別為 marging 外邊距 padding 內邊距 border 邊框 content 內容 2.盒模型 外邊距 margin 元...