box-sizing

box-sizing的问题在一次面试的时候被问到，当时只解释了个大概；

 

box-sizing:content-box : 标准盒子模型

　　此时元素的实际占用文档的宽度为  width + padding + border ；如果改变了padding和border的值，则元素所占文档的大小会变；

 

box-sizing:border-box : 怪异模式

　　此时元素实际占用文档的宽度为  width = widht； 如果改变了padding和border，则元素的实际内容的width将收影响。占文档位置不变。

box-sizing:padding-box

　　实际width = border + width； 此时padding和width的值相互制约

使用场景：当同一行内放置两个内联元素，为了让元素始终在同一行，则不能让padding和border影响到实际的宽度 ，此时可以用box-sizing来控制元素实际的所占用文档的宽度。