面試之盒模型

標準的CSS的盒子模型與低版本IE的盒子模型有什麼不一樣的？

標準盒子模型：寬度=內容的寬度（content）+ border + padding + margin

(border與padding向內容外填充)

低版本IE盒子模型：寬度=內容寬度（content+border+padding）+ margin

(border與padding向內容內填充)

標準盒子模型

IE盒子模型

上刺刀


box1

box2
能夠看出咱們設置了box-sizing

box-sizing屬性？
用來控制元素的盒子模型的解析模式，默認爲content-box
context-box：W3C的標準盒子模型，設置元素的 height/width 屬性指的是content部分的高/寬，定義的寬度和高度以外繪製元素的內邊距和邊框
border-box：IE傳統盒子模型。設置元素的height/width屬性指的是border + padding + content部分的高/寬

適用場景
好比咱們在寫一個頭部，background：gray，咱們須要兩邊有10px的距離，若是設margin：0 10px的話，會發現兩邊有了間距，可是間距不是灰色背景，並且出現了滾動條，這個時候就須要咱們的padding：0 10px,完美解決了兩邊留白的尷尬，可是滾動條還在，這就須要上大刀box-sizing:border-box;就會發現滾動條沒了，頭部也很美觀。