盒子模型详细介绍---面试全面回答

1.基本概念：标准模型+IE模型 区别？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。


区别：设置元素宽度高度后，IE模型的宽高是包含border和padding的
2.css如何设置这两种模型？
语法box-sizing: content-box/border-box/inherit;
content-box:指的是标准模型，浏览器默认模型。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。加padding值会撑大元素
border-box :指的是IE模型，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。加padding值会挤到内容
inherit :规定应从父元素继承 box-sizing 属性的值。