所有的文件元素（標籤）都會生成乙個矩形框，我們稱為元素框（element box），它描述了乙個文件元素在網頁布局彙總所佔的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。
標準盒模型中 width 指的是內容區域 content 的寬度；height 指的是內容區域 content 的高度，即padding 和 border 不被包含在定義的 width 和 height 之內。物件的實際寬度等於設定的 width 值和 border、padding 之和，即 ( element width = width + border + padding )，設定元素的 box-sizing：content-box，即可設為標準盒模型，這也是預設盒模型。這裡是標準盒模型
元素的實際寬度 = 內容 + 內邊距 + 邊框 = 100 + 20 + 20 = 140
元素的實際高度 = 內容 + 內邊距 + 邊框 = 100 + 20 + 20 = 140
怪異盒模型中的 width 指的是內容、邊框、內邊距總的寬度（content + border + padding）；height 指的是內容、邊框、內邊距總的高度，即 padding 和 border 被包含在定義的 width 和 height 之內。物件的實際寬度就等於設定的 width 值，即使定義有border 和 padding也不會改變物件的實際寬度，即 ( element width = width )，設定該元素的 box-sizing：border-box，即可設為怪異盒子模型。
這裡是怪異盒模型
元素實際寬度和實際高度始終是一開始所設定的寬高，定義了 border 和 padding 也不會改變元素的實際寬高。
這裡是標準盒模型
這裡是怪異盒模型
盒子模型 標準盒模型，怪異盒模型
當你的瀏覽器展現乙個元素時，這個元素會佔據一定的空間。這個空間由四部分組成。中間是元素呈現內容的區域。這個區域的外面是內邊距。再外面是邊框。最外面的是外邊距，外邊距將該元素與其它元素分開。內邊距，邊框和外邊距在元素的上 右 下 左都可以有不同的大小。所有這些大小值都可以為0。顏色 內邊距總是跟元素的...
CSS標準盒子模型和IE怪異盒子模型
css中的盒子模型 box model 分為兩種 w3c標準盒子模型和ie標準盒子模型。大多數的瀏覽器都採用w3c標準，而ie採用的是ie標準。而怪異模式是指 部分瀏覽器在支援w3c標準的同時還保留了原先的解析模式 怪異模式主要表現在ie核心的瀏覽器中。通過對比來分析標準模式和怪異模式對於塊大小的定...
CSS 標準盒子模型和怪異盒子模型的區別
一 什麼是盒子模型 box model 盒子想必大家都是知道的吧！生活中我們的快遞有盒子包裝著，買的蛋糕也是有盒子包裝著，我們的禮品也是被盒子包裝著。模型是什麼呢？它是主觀意識借助實體或者虛擬表現構成客觀闡述形態結構的一種表達目的的物件 css中的盒子模型它是可以對元素進行布局，設定距離的大小，這裡...