正常盒模型
正常盒模型，是指塊元素box-sizing屬性為content-box的盒模型。一般在現代瀏覽器中使用的都是正常盒模型content-box，它也是標準 w3c 盒子模型。
正常盒模型的大小會以內容優先自動擴充套件，內部子元素超過父元素給定的大小，會將父元素撐大。
怪異盒模型
怪異盒模型，是指塊元素box-sizing屬性為border-box的盒模型。一般在ie瀏覽器中預設為這種怪異盒模型，但是由於其自身的特殊性，手機頁面中也有使用怪異盒模型。
怪異盒模型中，父元素的盒模型確定，子元素是無法撐開父元素的盒模型，只能在盒模型剩餘空間展示。
那應該選擇哪中盒子模型呢？
當然是「標準 w3c 盒子模型」了。
怎麼樣才算是選擇了「標準 w3c 盒子模型」呢？
很簡單，就是在網頁的頂部加上 doctype 宣告。假如不加 doctype 宣告，那麼各個瀏覽器會根據自己的行為去理解網頁，
即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子，而 ff 會採用標準 w3c 盒子模型解釋你的盒子。所以網頁在不同的瀏覽器中就顯示的不一樣了。
反之，假如加上了 doctype 宣告，那麼所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子，網頁就能在各個瀏覽器中顯示一致了
box sizing指定盒子模型
box sizing有兩個值可指定為content box,border box,這樣我們計算盒子大小的方式發生了改變 分為兩種情況 box sizing content box盒子大小width padding border 這也是預設的 box sizing border box盒子大小為wid...
盒子模型及box sizing的理解
部落格 盒子模型 標準盒子模型和怪異 ie 盒模型 寬度 width content內容區寬度 width 高度 height 也是內容區的高度 width 盒子的大小 margin paading border width 兩個盒子的之間的padding值的計算 上面盒子的padding bott...
css 盒子模型 以及 box sizing屬性
在標準的盒子模型下，css中 width，padding以及border的關係 關於css中的width和padding以及border的關係。在css中，width和height指的是內容區域的寬度和高度，增加padding,border,和margin不會影響內容區域的尺寸，但是會增加元素框的總...