CSS盒子模型

css盒子模型是由内容区    内边距    外边距    边框组成的：

内容区：

内容区是css盒子模型中放制内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。

如果没有为元素设置内边距和边框， 则内容区大小默认和盒子大小是一致的。

当内容过多超出width和height时，可以使用overflow属性来指定溢出处理方法。

通过width和height两个属性可以设置内容区的大小    width和height两个属性只适合用于块元素。

内边距：

内边距就是指内容区到边框之间的空白。

默认情况下width和height不包含padding的大小。

内边距分为四个方向：padding--top    padding--right  padding--bottom和padding--left.

边框：

可以在元素周围创建边框，边框是元素可见框的最外部。

可以使用border属性来设置盒子的边框：

border：1px  solid  red;

和padding一样，默认width和height并包括边框的宽度。

边框样式：

none (没有边框)

dotted（点线）

dashed（虚线）

solid（实线）

double（双线）

groove（槽线）

ridhe（脊线）

inset（凹线）

outset（凸线）

外边距：

外边距是元素边框与周围元素相距的空间。

使用margin属性可以设置外边距。

padding和margin的区别在于：padding体现的是元素的“内部结构”，而margin体现的是元素之间的相互关系。