理解box-sizing屬性border-box,content-box,其實也是理解正常盒模型與異常盒模型。
正常盒模型
正常盒模型,是指塊元素box-sizing屬性爲content-box的盒模型。一般在現代瀏覽器中使用的都是正常盒模型content-box,它也是標準 w3c 盒子模型。
參見 CSS盒模型
正常盒模型是指:盒模型的大小包括content,padding,border,並且先做content.。
正常盒模型的大小會以內容優先自動擴展,內部子元素超過父元素給定的大小,會將父元素撐大。
怪異盒模型
怪異盒模型,是指塊元素box-sizing屬性爲border-box的盒模型。一般在IE瀏覽器中默認爲這種怪異盒模型,但是由於其自身的特殊性,手機頁面中也有使用怪異盒模型。
怪異盒模型是先做盒。然後添加border,padding,最後做content。即保證盒模型優先,先做盒再放內容,不管內容是否放得下,一般手機上用的更多。
更通俗的說,怪異盒模型中,父元素的盒模型確定,子元素是無法撐開父元素的盒模型,只能在盒模型剩餘空間展示。
怎麼樣纔算是選擇了“標準 w3c 盒子模型”呢?
很簡單,就是在網頁的頂部加上 doctype 聲明。假如不加 doctype 聲明,那麼各個瀏覽器會根據自己的行爲去理解網頁,
即 ie 瀏覽器會採用 ie 盒子模型去解釋你的盒子,而 ff 會採用標準 w3c 盒子模型解釋你的盒子。所以網頁在不同的瀏覽器中就顯示的不一樣了。
反之,假如加上了 doctype 聲明,那麼所有瀏覽器都會採用標準 w3c 盒子模型去解釋你的盒子,網頁就能在各個瀏覽器中顯示一致了