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代表左内边距,按照顺时针方向。
- margin 外边距
margin-top 上外边距
margin-bottom 下外边距
margin-left 左外边距
margin-right 右外边距
缩写:
margin: 同padding
margin:0 auto; 块级元素居中显示
2.背景
- background 背景
- background-color 背景颜色
- background-image 背景图片
值:url(“图片的路径”)
- background-repeat 背景图片是否平铺
值:a)repeat 默认 水平、垂直都平铺
b)no-repeat 水平、垂直都不平铺
c)repeat-x 水平平铺
d)repeat-y 垂直平铺
- background-position 背景图片的位置
语法: x轴坐标 y轴坐标
值:a)表示位置的英文单词 例如:left center right top bottom
b)百分比
c)数字+单位
5)background-size 背景图片的大小
语法:背景图片的宽度 背景图片的高度
值:a)百分比 (盒子的百分比)
b)数字+单位
c)cover 背景图片等比例的扩展至足够大,以使它铺满整个区域,可能会引起图片裁剪。
d)contain 背景图片等比例地扩展至足够大,以使它的宽度或高度适应内容区域,可能会使区域留白。
- background-origin 背景图片开始渲染的位置
值:a)padding-box 默认 从左上角内边距的位置开始渲染
b)content-box 从内容区域左上角开始渲染
c)border-box 从左上角边框区域开始渲染
- background-attachment 背景图片是否固定
值:1)scroll 默认 图片随页面其余部分滚动而滚动
2)fixed 图片固定不动
缩写:
background : 背景颜色 背景图片 背景是否平铺 背景位置/背景大小 背景渲染位置 背景是否固定;