HTML 盒模型 逆战班

对于前端项目是css布局的基石，它主要作用是控制元素和元素之间，或者元素和内容之间的位置关系，是重要的组成部分。

一个盒子主要有五大属性分别为width、height、padding、border、margin。
分别含义：
width指的是内容的宽度；
height指的是内容的高度；
padding内边距；
border边框 ；
margin是外边距。

盒模型是由组成：content+padding+border+margin几大板块组成
盒模型他也分为标准盒模型和怪异盒模型;
首先是标准盒模型：

标准盒模型的

宽度为：宽（width）+左右padding+左右border+左右margin

高度为：高（height）)+上下padding+上下border+上下margin

padding和margin作为盒模型的五大属性，也起到了重要的作用：
1：padding的作用：用来控制父元素和子元素之间的位置关系;padding是在盒子里面，在盒子与内容之间，他会把内容撑开，如果想让盒子保存原有大小，需要在原有基础上减去，当然如果一个元素没有添加宽高，而是被其内容撑开的，那么就不需要减了。
2；margin的作用：控制同辈元素之间的位置关系。margin在元素外围，不会撑大元素的大小
3；padding和margin的写法：他们都可以分别给单个方向或者多个方向添加；例如：padding-top/bottom/left/right和margin-left/right/top/bottom。除此之外还可以综合来表示，我们用padding来举例：padding:30px; 四周
padding:10px 30px; 上下 左右
padding:10px 30px 50px 上 左右 下
padding:10px 30px 50px 100px 上右下左。（margin的使用方法和padding一样。）

从他们的写法上看他们很相似，但是他们也各有各的特点：
padding除了上面说的会把元素撑开之外他还有padding属性对背景图片是不起作用的，可以说背景图片的位置是不受padding值影响的，背景色会延展到padding区域。
margin不会影响元素实际宽高，但是也会影响他的所占区域。上下两个元素之间的margin会重叠显示。谁的值大，就显示谁的margin值。margin可以写负值的，而padding不可以写负值。