什么是盒模型

什么是盒模型（逆战班学习总结）
盒模型是CSS技术中使用的一种，可以比喻成平常生活中里的盒子，能够装入一些东西进去。
盒模型具有的属性如：内容(content)、填充(padding)、边框(border)、空白边(margin)
内容(content)就是它的中心，来显示盒模型的主要内容，填充(padding)是内容区域和边框之间的空间；边框(border)是围绕内容区域和填充的边界；空白边(margin)处于盒模型的最外围，是添加在边框外周围的空间。

你可以利用CSS给盒模型添加样式来达到所想要的效果。
盒模型的属性包括四部分：上，右，下，左，可以给四个部分都设置样式，也可以分别设置，

填充（padding)是内容区域和边框之间的空间
给盒模型设置填充（padding），就像给包裹着易碎品的箱子里放泡沫，
在设置padding：20px;后就会在盒模型的内容区域和边框之间的四个部分都添加了20像素的空间，

当然也可以分别进行设置，，如果想要分别设置，那么顺序就很重要了。
使用的方法其一如下：
padding-top:20px; 上填充
padding-right:20px; 右填充
padding-bottom:20px; 下填充
padding-left:20px; 左填充

使用方法二：
padding：属性1、属性2、属性3、属性4 如：padding：5px 10px 15px 20px
属性分别代表了属性1是上，属性2是右，属性3是下，属性4是左，
padding：属性1、属性2、属性3 1是上 2是左和右 3是下
padding：属性1、属性2 1是上和下 2是左和右
padding：属性1 、1是上右下左四个部分

在添加padding值之后，padding值会把元素原有的大小撑大； 如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding，以及padding属性对背景图是不起作用的，背景色也会延展到padding区域。

空白边(margin),处于盒模型的最外围，是添加在边框外周围的空间
空白边(margin)使用方法和填充（padding）是一样的，但不同的是margin 是可以写负值的，padding不可以写负值， margin不会影响元素的实际宽高，但是也会曾加的他的所占区域，

加入margin-top: 20px;后可以看见中心内容与紫色区域有了一个20像素的空白区域，这就是添加在盒子的外边框。


CD逆战班 刁明军