面试之盒模型

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