盒模型的属性

盒模型属性
首先，我们要明确什么是盒模型。我们可以将所有的HTML元素都看成一个一个的盒子，CSS的具体工作可以理解为将这一个一个盒子摆放到各自正确的位置上，盒模型即是CSS布局中使用的一个专业术语。
盒模型就像一个盒子一样将HTML元素封装起来，其中包括：margin（外边距）、border（边框）、padding（内边距）、content（元素内容）。
如：

内容部分就像在装在一个由border包装的月饼，padding是包装内的填充物，而这一个由border构成的独立包装的月饼会有很多个，这时我们想要把这些独立包装的月饼打包成一个月饼礼盒，就需要在一个更大的盒子里装上好几个独立包装的月饼，这一个一个独立包装的月饼之间的距离就是margin。
了解了盒模型中几个属性的意思，我们再在实际的代码中运用一下他们。
1、margin（外边距）
a.我们先看一个div，在给margin之后的变化：


可以看出当我们加上margin: 50px;之后元素移动了，在打开检查元素之后我们能更直观发现这个div四周都多了50px的距离。
当两个div并排显示时，给其中一个div加上margin属性之后，便会有如下的变化：

因为第一个红色的div有了大小为50px的“外包装”，所以黄色的div只能被放在离第一个div50px的地方。
当我们有两个嵌套的元素时，如果将margin给父元素时，子元素相对于父元素的位置是不会改变的，当我们将margin给子元素时，子元素就将父元素推开了。
除了同时改变元素四周的“外包装”厚度，我们还可以任意选择想要改变哪一边的外边距，使用margin-top、margin-right、margin-bottom、margin-left，或者就使用一个margin，根据其之后值的数量有不同的含义，至少一个值，最多四个值，分别是：
Margin:一个值（上右下左）
Margin：两个值（上下 左右）
Margin:三个值（上 左右 下）
Margin：四个值（上 右 下 左）
他们是按照顺时针的顺序来排列。
2、Border（边框）
Border就是边框，可以从他的名字直观看出来，就是框柱内容的一条线，如：

图中绿色区域就是红色元素的边框了。
Border的语法如下：
Border:边框大小 边框样式 边框颜色;
也可以分开写：border-width、border-style、border-color。
3、Padding（内边距）
Padding就是控制元素内容与边框之间的填充范围。例如：

黄色的部分就是红色方块的内容部分，绿色是红色方块的边框，当我们给红色方块加上padding: 30px;时，会发现黄色的方块移动了。

而这之中我们需要注意的是，padding需要加给父元素，但当我们将padding加给中间的黄色方块时，其就会被撑大，说明padding依旧生效了，这主要因为黄色div又相对于其中内容又是一个父元素，即使这里面我们现在并没有加上内容。
另外一个需要明确的地方是，padding和margin在具体运用上的区别，在很多地方我们使用这两个的效果是一样的，他们只是实现方法不同，因此并不需要我们刻意纠结到底使用哪个，比如在以上例子中，黄色的方块都是离开了红色方块的边框，但是margin主要是子元素主动离开父元素，他将自己推开了，因此margin是给子元素的，padding是父元素推开了子元素，因此padding是给了父元素，但在一些地方他们还是有区别的：
A、padding不能写负值，margin可以写负值，这就说明margin能够让元素上移，但padding不能做到。
B、Margin不会改变元素的原本宽高，但会影响元素所占地盘的大小；padding会改变元素的宽高，因此也会改变元素所占地盘的大小。
Padding的语法同margin是一样的。

BY逆战班 李雨莲