css盒子模型的理解：5分钟搞懂css盒子模型是啥？

首先，我们来看一看css盒子模型是什么？

从百度百科上我们可以知道，网页设计中常听的属性名：内容(content)、内边距(padding)、边框(border)、外边距(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模型。如下图：

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

那么，在知道了css盒子模型是什么之后，对于css盒子模型又该如何理解呢？

css盒子模型的理解

我们可以把css盒子模型当成日常中的一个盒子去理解。

content就是盒子里装的东西，它有高度（height）和宽度（width）,可以是图片，可以是文字或者小盒子嵌套，在现实中，内容不能大于盒子，内容大于盒子就会撑破盒子，但在css中，盒子有弹性的，顶多内容太大就会撑大盒子，但是不会损害盒子。

padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜，填充物有大有小，有软有硬，反应在网页中就是padding的大小了。

border就是再外一层的边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。

margin外边距，就是我们的盒子与其他的盒子或者其他东西的距离。假如有很多盒子，margin就是盒子之间直接的距离，可以通风，也美观同时方便取出。

css盒子模型有两种，一种是W3C盒模型也就是标准模型，另一种是IE盒模型

css两种盒子模型的设置方法：

/* 标准模型 */
box-sizing:content-box; 
/*IE模型*/
box-sizing:border-box;