CSS（5）背景/定位

一、background

1.1 background-position
背景图位置：背景图在整个大背景（能够渲染背景区域）中的位置。
 像素表示法： 水平方向偏移量 垂直方向偏移量

1	background-position: 50px 100px;

第一个参数：50px 表示背景图左上角相对于大背景左上角向右偏移50px(正方向)
第二个参数： 100px 表示背景图左上角相对于大背景左上角向下偏移100px（正方向）

1.2 精灵图
css sprite(css 精灵图技术)
网页中有很多小图片，每一个图片都会发起一次http请求，我们通常将这些小图片整合在一张图片上，只需要发送一次http请求，提高网页加载速度。

精灵图制作：
1 精灵图保存格式必须是png.
2 精灵图尺寸尽可能小
3 精灵图摆放，尽量靠上，靠左

精灵图使用：
1 限制盒子宽高
2 通过background-position 的到任何的小精灵图

1	.box2 {
2		/*1 限制盒子的大小*/
3		width: 97px;
4		height: 68px;
5		border: 1px solid #000;
6		margin: 50px 0px;
7		background-image: url(images/9.jpg);
8		background-position: -211px -27px;	}

 单词表示法
水平方向：left right center
垂直方向：top bottom center

1	background-position: center center;
 

应用：
大背景居中

1	background-image: url(images/anhei.jpg);
 

通栏大banner居中

1	.banner {
2		/*div块级元素 不设置宽度自动盛满父盒子*/
3		width: 100%;
4		height: 500px;
5		background-color: lightblue;
6		background-image: url(images/banner.jpg);
7		background-position: center top;	}

 百分数表示法

居中：

1	background-position: 50% 50%;

1.3 background-attachment
背景图是否卷动（只能应用在body中）
默认：scroll(背景图跟随页面滚动而卷动)
fixed(背景图不跟随页面的滚动而卷动) 固定

1	background-attachment: fixed;
 

background是复合属性可以书写复合写法。每一个属性值用空格
属性值可以写全，也可以省略表示使用默认值。（background-position必须先写水平再写垂直）

1	background: lightblue url(images/9.jpg) no-repeat 0px 0px fixed;

1.4 应用
 文字替换图片
logo使用h1渲染，并且logo一般使用图片显示的，为了SEO将文字替换图片。

1	.header .inner .logo {
2		float: left;
3		width: 157px;
4		height: 35px;
5		/*将a文字溢出隐藏*/
6		overflow: hidden;
7	}
8	.header .inner .logo a {
9		/*a行内元素 不能设置宽高*/
10		display: block;
11		height: 35px;
12		background: url(images/logo2.png) no-repeat;
13		/*文字是让爬虫看到不是给用户看的*/
14		text-indent: -999em;	}

用padding挤出小背景图区域。
无序列表一般都有先导符号，我们使用padding挤出先导符号位置

1	.box ul li {
2		height: 50px;
3		line-height: 50px;
4		font-size: 20px;
5	}
6	.box ul li a {
7		display: block;
8		height: 50px;
9		line-height: 50px;
10		padding-left: 30px;
11		/*background-position单词和像素可以结合使用*/
12		background: url(images/s2.png) no-repeat 5px center;
13	}
14	.box ul li a:hover {
15		color: orange;	}
 

二、定位

position: 定位
属性值：
相对定位： relative
绝对定位： absolute
固定定位： fixed
2.1 相对定位

1. position: relative;
   水平方向： left right
   垂直方向： top bottom（水平和垂直各选一个）

1	.no2 {
2		/*相对定位*/
3		position: relative;
4		left: 250px;
5		top: 40px;
6		background-color: orange;	}
 

相对定位：
1相对定位的元素没有脱离标准文档流，原位置保留
2 新位置相对于原位置进行偏移（形影分离）

正数含义
1 left: 40px 表示新位置向右偏移40px
2 top: 40px 表示新位置向下偏移40px
3 right: 40px 表示新位置向左偏移40px
4 bottom: 40px 表示新位置向上偏移40px

还可以书写负数：表示和正数方向相反
5 left: -40px 表示新位置向左偏移40px
6 top: -40px 表示新位置向上偏移40px
7 right: -40px 表示新位置向右偏移40px
8 bottom: -40px 表示新位置向下偏移40px

1	.no3 {
2		position: relative;
3		向右偏移100px
4		right: -100px;
5		向上偏移50px
6		top: -50px;
7		background-color: orange;
8	}
9	等价写法：
10	.no3 {
11		position: relative;
12		left: 100px;
13		bottom: 50px;
14		background-color: orange;15	}

2.2 绝对定位

1 position: absolute;

也是有四个方向偏移，用法相同

1	.no2 {
2		/*绝对定位*/
3		position: absolute;
4		left: 250px;
5		top: 40px;
6		background-color: orange;7	}

绝对定位的元素脱离标准文档流，相对偏移有两种情况。

2.2.1 不针对祖先元素的定位参考
不针对祖先元素（有可以没有祖先，也可能是祖先没有定位）
有top参与相对于页面的左上角/右上角进行偏移

有bottom参与首屏左下角/右下角

2.2.2 针对祖先元素定位参考
参考元素：距离（html结构）最近，且有定位的祖先元素。

1	<div class="box1">    //绝对定位
2		<div class="box2">//相对定位
3			<p>盒子</p>  //绝对定位（定位参考元素是距离最近的且有定位的祖先box2）
4		</div>
5	</div>