元素的外邊距（margin）、邊框（border）、內邊距（padding）、內容（content）就構成了css盒模型。
css盒模型分為ie盒模型（圖2）和w3c盒模型（圖3）。其實，ie盒模型是怪異模式（quirks mode）下的盒模型，而w3c盒模型是標準模式（standards mode）下的盒模型。 ie6及其更高的版本，還有現在所有標準的瀏覽器都遵循的是w3c盒模型，ie6以下版本的瀏覽器遵循的是ie盒模型。
ie盒模型: width包括content,padding,border
w3c盒模型:width只包括content
如果計算乙個盒子的長寬高，我們一般都是盒子本身的厚度加上盒子裡的空間大小，所在在ie盒模型和w3c盒模型，我們會覺得ie盒模型更符合邏輯。 不同的人有不同的習慣，所以css3新增了乙個屬性box-sizing: content-box | border-box | inherit，預設值為content-box。如果值為content-box，那元素遵循的是w3c盒模型；如果值為border-box，那元素遵循的是ie盒模型；如果值為inherit，該屬性的值應該從父元素繼承。
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 元...
css盒模型 標準盒模型 怪異盒模型
css 盒子模型 box model 每個html元素都可以看作是乙個盒子，父元素和子元素的關係就行大盒子裡放了個小盒子，兄弟元素就像在大盒子平放了兩個小盒子。盒模型包括 外邊距 margin 邊框 border 內邊距 padding 實際內容 content 四個屬性。由於目前大部分主流的瀏覽器...