前端知识总结 1-CSS的两种盒模型

          在HTML中，元素由content、padding、border、margin构成。万般变化，都不离其中，所有的css属性基本上都是围着这四部分服务。由这四部分构成的盒模型在不同的浏览器中，标准也不一样。现在主要分为两种。

           一种是大部分浏览器都遵守的W3C盒模型。对元素设置的width，height指的就是content部分，而padding与border不计入元素width，height的实际计量范围。

            另一种这是IE的盒模型，通常又叫怪异盒模型，在怪异盒模型中，对元素设置的width，height指的是content+border+padding共同组成的部分。

         这两种模型一般可通过对元素设置box-sizing切换，box-sizing的值content-box是标准盒模型,也就是W3C盒模型，而另一个值border-box，就是IE的怪异盒模型了。这个属性的应用场景一般在表单宽度的时候有用。或者需要计算元素在布局中真实所占的空间时。可以通过切换box-sizing获取真实宽高。