框模型/盒子模型

一、margin（外边距）

1.四个值margin：1px 2px 3px 4px (顺序上右下左）

   三个值：上右下（第四个值同对边也就是左）

   两个值： 上下，左右

   一个值：上下左右一样

 2.margin的值可为px，也可为%，可为正，可为负，可为0，也可为auto

 如：margin：10px auto（居中） 

 3.单边：margin-top/right/bottom/left

 4.当上下外边距相遇时，大的值生效。 

 5.行级元素只有左右具有margin，上下不具有margin。

 二、padding

 1.padding会将容器撑大，计算宽高的时候不要忽略。

 2.只有块级元素和本身具有高度属性的元素有宽高，行级元素没有宽高，此时一般使用padding.

三、背景图

 1.background-color:red;(背景色）

 2.background-image:url();（背景图）

 3.background-repeat:repeat/no-repeat/repeat-x/repeat-y

 4.background-position：left bottom；

  两种定义方式：

(1)关键词 水平方向：left center right  垂直方向：top center bottom

(2)数值  水平 ：正值向右负值向左   垂直：正值向下，负值向上

 5.background-size:宽 高/ % %/contain(保证图片的一边撑满容器）/cover（背景图撑大到盖满容器，图像失真）(此条用的少，了解）

 6.background-attachment：fixed；（拉滚动条的时候，网页的内容往下拉，背景图不动。）

 7.简写：background：color  url() repeat position  attachment ,无所谓顺序，中用空格隔开，不设置则为默认值。