box-sizing: content-box|border-box|inherit;值
描述content-box
這是由 css2.1 規定的寬度高度行為。
寬度和高度分別應用到元素的內容框。
在寬度和高度之外繪製元素的內邊距和邊框。
border-box
為元素設定的寬度和高度決定了元素的邊框盒。
就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。
通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
inherit
規定應從父元素繼承 box-sizing 屬性的值。
這裡頭的問題在於，css2.1規定預設是content-box,即w3c標準模型，另一種為ie傳統模型也叫怪異模型border-box。
當然現實是很殘酷的，看看現在的bootstrap或foundation，都又使用了border-box模式，這說明什麼？說明ie一開始幹對了，w3c把這事給搞錯了。遵循w3c的布局，帶來了很多潛在問題，這是乙個巨大的災難，雖然沒有人指出這一點。
這兩者的差異主要是，w3c的width（height)計算，不包含padding和border，border-box模式，width包括內容，padding，border。
後者的好處是非常明顯的，比如我定義乙個width：200px的div，後來我又要給加個1px邊框，這下好了，w3c標準下，布局亂了，要不就得重新調整width等，變成了
width:199px;border:1px，計算起來相當麻煩，這在多個巢狀div裡，加邊框及改變padding的時候尤其麻煩。
使用傳統模式：就明顯的分布了盒內和盒外，外邊就是margin，裡邊就是width，這樣計算起來簡單多了。
另乙個問題是form表單元素多使用border-box模式。
那麼，使用border-box模式來布局，就需要注意瀏覽器相容性，考慮到bootstrap等的應用，及移動應用，應該選擇全站border-box模式。
遺憾的是，現在的絕大多數**使用了預設的content-box模式，而新型的bootstrap等使用了全域性的border-box模式。
如何修復兩者的不相容？
當然全部改正也是應該的，但不想大改的情況下，在引入bootstrap等框架後，把原來布局出錯的部分，加上：box-sizing:content-box屬性。
CSS 盒模型 基本
盒模型就是把html元素看成乙個矩形盒子，是盛放內容的容器。盒模型包括 邊框border 外邊距margin 內邊距padding 實際內容content。邊框寬度 粗細 border width 常用px作單位。邊框樣式 border style 常用 solid實線 dashed虛線 dotte...
CSS基本知識4 CSS行模型
display inline block inline blockblock元素的特點是 總是在新行上開始 高度，行高以及頂和底邊距都可控制 寬度預設是它的容器的100 除非設定乙個寬度 inline元素的特點是 和其他元素都在一行上 高，行高及頂和底邊距不可改變 寬度就是它的文字或的寬度，不可改變...
CSS基本知識
選擇符表示要定義樣式的物件，可以是元素本身，也可是一類元素或制定名稱的元素 在css選擇符中，大致可有10種 類選擇符 id選擇符 class選擇符 萬用字元 群組選擇符 包含選擇符 偽類選擇符 偽物件選擇符 關於選擇符的權重問題，css中用四位數來表示權重，權重的表示式如0000 在這裡特別要注意...