CSS定位，background属性:(四)
还是要说一下，我不是主要学习前端的，但是要掌握一定的前端知识，所以总结的属性肯定不全面，都是比较常用 ，如果我能把我总结的知识点完全掌握了，那就已经满足我的需要了。（害怕一些专业前端人士对我进行吐槽。。。）
1：CSS基本语法及页面引用
2：CSS文本设置
3：CSS颜色表示
4：CSS选择器
5：CSS盒子模型
6：CSS元素溢出
7：CSS块元素、内联元素、内联块元素
8：CSS浮动
9：CSS定位
10：background属性
CSS定位
关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
相对的理解：
相对上级，如果上级或者上级的上级设置了position,相对于它。
如果都没有设置position，相对于body。
1.relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
2.absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
3.fixed 生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
4.static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性
5.inherit 从父元素继承 position 属性的值
定位元素特性
绝对定位和固定定位的块元素和行内元素会自动转化为行内块元素
定位元素层级
定位元素是浮动的正常的文档流之上的，可以用z-index属性来设置元素的层级
典型定位布局
1、固定在顶部的菜单
2、水平垂直居中的弹框
3、固定的侧边的工具栏
4、固定在底部的按钮
2.10background属性
background属性是css中应用比较多，且比较重要的一个属性，它是负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项：
1.background-color 设置背景颜色
2.background-image 设置背景图片地址
3.background-repeat 设置背景图片如何重复平铺
4.background-position 设置背景图片的位置
5.background-attachment 设置背景图片是固定还是随着页面滚动条滚动
实际应用中，我们可以用background属性将上面所有的设置项放在一起，而且也建议这么做，这样做性能更高，而且兼容性更好，比如：“background: #00FF00 url(bgimage.gif) no-repeat left center fixed”，这里面的“#00ff00”是设置background-color；“url(bgimage.gif)”是设置background-image；“no-repeat”是设置background-repeat；“left center”是设置background-position；“fixed”是设置background-attachment，各个设置项用空格隔开，有的设置项不写也是可以的，它会使用默认值。
下面做个例子
使用这张图片做为背景图：
1、“background:url(bg.jpg)”，默认设置一个图片地址，图片会从盒子的左上角开始将盒子铺满。
2、“background:cyan url(bg.jpg) repeat-x”，横向平铺盒子，盒子其他部分显示背景颜色“cyan”。
3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。
4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”
5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。
6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。
代码如下 效果图在代码下面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正道skr</title>
<style type="text/css">
.backshow{
width:320px;
height:160px;
border:3px solid #333;
float:left;
margin:10px;
}
.bg1{background:cyan url(./images/ING.png);}
.bg2{background:cyan url(./images/ING.png) repeat-x;}
.bg3{background:cyan url(./images/ING.png) repeat-y;}
.bg4{background:cyan url(./images/ING.png) no-repeat;}
.bg5{background:cyan url(./images/ING.png) no-repeat left center;}
.bg6{background:cyan url(./images/ING.png) no-repeat right center;}
</style>
</head>
<body>
<div class="backshow bg1"></div>
<div class="backshow bg2"></div>
<div class="backshow bg3"></div>
<div class="backshow bg4"></div>
<div class="backshow bg5"></div>
<div class="backshow bg6"></div>
</body>
</html>