【CSS】【盒子模型】css中的盒子模型，box-sizing属性，background-clip属性，background-origin属性

?首先来介绍下，什么是盒子模型
在没有内边距，外边距，边框的情况下，一个最简单的控件是这样的

橙色边框为控件的边界，控件里面要显示的内容正好铺满整个整个边界区域
但实际应用中的情景，往往比这个复杂，可能需要设置以下属性
内边距：padding，内容和控件边界要保持一定距离
外边距：margin，控件要和其它控件保持一定距离
边框：border，控件边界外面，要套上一个用于装饰的边框
于是最终变形成了下面这样的盒子模型

?当我们要给控件指定width和height属性时，可能有时我们想要指定是content的宽高，而另外一些时候，我们想要的又是包含padding和border的宽高，这时我们就可以通过box-sizing属性来指定，我们设置的宽高，是包含哪些区域之后的宽高。
同理，当我们要给控件设置background时，也可能会遇到类似问题，背景是显示在content区域，还是显示在包含padding的区域？这时我们就可以通过background-clip属性来指定背景位置。

?margin区域是控件和控件之间的间隔，一般被视为父容器的空白部分，不被视为控件的一部分

?box-sizing的取值包括：content-box（default），padding-box，border-box

?background-clip的取值包括：content-box，padding-box，border-box（default）

?background-origin属性可以设置背景绘制的起始位置，我们可以从border区域的左上角开始绘制背景，然后通过background-clip进行裁剪，使其只显示content区域的部分。
大多时候，background-origin和background-clip的取值是一样的，这样显示的背景才是一个完整的图片