盒子模型

1、标准盒子模型(W3C)

　　我们设置的盒子的width与height就是内容区所占的宽度与高度，而padding与margin是另外计算的

　　所以，盒子的总高度=margin+border+padding+height

2、怪异盒子模型(IE)

　　width=content+padding+border，就是说我们设置的width、height包括内容区与内边距、边框

3、CSS3中的box-size属性指定盒子模型的种类

　　*content-box：在宽度和高度之外绘制元素的内边距和边框

　　*border-box：为元素设置任何的内边距和边框都将在已经设置好的高度和宽度内绘制，在已经设定好的宽度和高度中减去需要设置的padding和border

　　*inherit：从父元素中继承box-size的属性值

4、怪异盒子模型应用的小技巧

　　　　

 

 可以通过设置父元素的box-size从而使其增加内边距而不变形

转载于:https://www.cnblogs.com/qqinhappyhappy/p/11524366.html