面试之盒模型

标准的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;就会发现滚动条没了，头部也很美观。