CSS的背景和布局(三)

背景和布局
1、background-color:背景颜色
2、opacity表示透明度（0~1 0表示完全透明，1完全不透明，越大越不透明）
rgba

opacity和rgba的区别：
1、rgba的透明度，主要是针对颜色，背景颜色，边框颜色，文字颜色，但是他不进行透明度的传递
2、opacity，它能改变文字颜色，边框颜色、但是他会进行一个透明度的传递，不能改变背景颜色的透明度。
3、background-image：背景图片
格式：background-image：url（‘地址’）；
4、background-repeat：表示背景图片的重复方式
值：
默认值 repeat
不重复 no-repeat
x轴（水平）repeat-x
y轴（垂直）repeat-y
5、background-attachment，背景图片是否固定
值：
scroll，默认值，表示他会随滚动条滚动而滚动
fixed，表示固定
6、background-position：xpx ypx
值：
第一个代表水平方向
第二个代表垂直方向
值可以为负
7、连写方式：
background：color  image repeat attachement  position

8、display：改变元素的类型
值：
block，块状元素
inline，行内元素
none，不显示元素
table-cell，以表格的样式显示
9、float：浮动
文档流：浮动层   
left：向左浮动
right：像右浮动
注意：1、没有上下的浮动
  2、浮动元素只对下面的元素有影响
  3、浮动的元素会自动变成块状元素
10、清除浮动clear
值：
left：清除左浮动
right：清除右浮动
both：清除左右浮动
none：允许浮动 默认值

11、定位 position
格式：position：值

值：
1、static，默认值，没有定位，默认在文档流中
2、absolute：生成绝对定位，其他文档流的元素就当他不存在了
3、relative：相对定位，相对于他在html中原来的文档流的位置，相对定位之后，相当于留下了一个大窟窿，别的元素不能用。
4、fixed:绝对定位，相对于浏览器窗口的。

注意：
1、如果一个标签的位置是绝对定位，他又不在其他任何设定里面，absolute、relative、fixed，都是相对于浏览器窗口进行的定位
2、如果一个标签的位置是绝对定位，他的父元素存在定位，他的定位会相对于父元素

12、设置元素的位置
top：规定元素的上边距，定义了元素在外边距与包含上边界之间的距离
bottom：
left：
right：
13、设置元素的堆叠顺序
格式：z-index
注意：
1、必须使用在定位的元素上
2、默认值为0 ，显示值最大的

14、居中问题
1、行内元素居中 水平居中 text-align
2、块状元素居中 水平居中 margin：0 auto;
3、表格居中，div内文字的垂直居中  
1、设置以表格的形式去显示：display：table-cell
2、vertical-align：middle；

还可以使用：line-height：高度；
4、块状元素
步骤：
1、设置父元素的定位方式：相对定位 position:relative
2、设置子元素的定位方式：绝对定位 position：absolute
3、设置子元素：top：50%;
4、设置子元素的上边距：margin-top：’-‘子元素高度的一半
5、设置子元素：left：50%；
6、设置子元素的左边距：margin-left：’-‘子元素宽度的一半