盒模型

css将页面所有元素都设置为了一个矩形的盒子，将各个元素设置为盒子后，就对页面的布局变成了将不同的盒子摆放到不同的位置。

每一个盒子都由以下几部分组成：
1.内容区（content）
2.内边距（padding）
3.边框（border）
4.外边框（margin）

盒子的大小由上面四部分共同组成
content，border，padding决定盒子的大小，而margin决定盒子的位置。

1.content里面是盒子的内容，由width，heigh组成。
2.padding是盒子的内边距，用来清除内容周围的区域。
其中：
padding区的颜色和内容区一样，要想让他们不一样，则需创建一个子元素，将子元素的宽高设置为100%，然后改变子元素的颜色就可以了。
padding也有简写属性，用法和border-width一样。
3.border包含了多种样式，但至少写三个样式，如：border-width，border-color，border-style。
其中：
border-width：表示的是框的宽度，例如：border-width：1px 2px 3px 4px；前后分别代表上，右，下，左；若为三个值，则分别表示上，左右，下；若为两个值，则分别表示上下，左右。
border-style：常用的有solid单实线，dash分段的线，double双线）等。
border以上的属性可以简写为：border：width color style；（顺序无关，属性间用空格隔开）。
4.margin是外边距，清除外边框区域，外边距不会影响盒子可见框的大小，但会影响盒子的位置。
其中：
设置margin-top和margin-left是移动本盒的位置；
而设置margin-right和margin-bottom是移动盒外的元素。
margin由margin-top，margin-right，margin-bottom，margin-left组成，顺序也是上，右，下，左，margin同样也可以简写，用法和border-width一样。

---

由于浏览器有默认样式，所有我们在用盒模型布置页面前需要对浏览器的默认样式进行消除。
方法：
在style区域中执行body{
margin：0；
padding：0；
}
可以清除大部分默认样式。