css基础4内外边距与背景

1.内边距

1. padding    内边距  内补丁 内填充

padding-top    上内边距

padding-bottom   下内边距

padding-left    左内边距

padding-right   右内边距

缩写：

padding:值;               上下左右的内边距一样

padding:值1  值2;         值1代表上下内边距，值2代表左右内边距

padding:值1  值2  值3;    值1代表上内边距，值2代表左右内边距，值3代表下内边距

padding:值1  值2  值3  值4;      值1代表上内边距，值2代表右内边距，值3代表下内边距，值4代表左内边距，按照顺时针方向。

1. margin    外边距

margin-top    上外边距

margin-bottom  下外边距

margin-left      左外边距

margin-right     右外边距

缩写：

margin:       同padding

margin:0 auto;   块级元素居中显示

2.背景 

1. background   背景

1. background-color    背景颜色
2. background-image   背景图片

值：url(“图片的路径”)

1. background-repeat   背景图片是否平铺

值：a）repeat     默认   水平、垂直都平铺

b）no-repeat       水平、垂直都不平铺

c）repeat-x        水平平铺

d）repeat-y        垂直平铺

1. background-position    背景图片的位置

语法： x轴坐标  y轴坐标

值：a）表示位置的英文单词   例如：left center right top bottom

b）百分比

c）数字+单位

5）background-size        背景图片的大小

语法：背景图片的宽度   背景图片的高度

值：a）百分比    （盒子的百分比）

b）数字+单位

c）cover   背景图片等比例的扩展至足够大，以使它铺满整个区域，可能会引起图片裁剪。

d）contain  背景图片等比例地扩展至足够大，以使它的宽度或高度适应内容区域，可能会使区域留白。

1. background-origin     背景图片开始渲染的位置

值：a）padding-box     默认   从左上角内边距的位置开始渲染

b）content-box     从内容区域左上角开始渲染

c）border-box      从左上角边框区域开始渲染

1. background-attachment    背景图片是否固定

值：1）scroll     默认  图片随页面其余部分滚动而滚动

2）fixed     图片固定不动

缩写：

background : 背景颜色  背景图片   背景是否平铺  背景位置/背景大小 背景渲染位置  背景是否固定;