CSS基础复习第五天

这是我参与更文挑战的第30天，活动详情查看：更文挑战

background

background-color

背景颜色。
除了之前学习三种的色值表示法，还可以使用rgba()透明度

background-color: rgba(255,0,0,.5);
复制代码

background-image

背景图。（不能撑开盒子的大小）

url:相对绝对路径。

当背景图小于盒子大小时，默认将盒子铺满。

background-image: url(images/in_12.png);
复制代码

背景渲染区域：border以内，padding可以渲染背景。

背景图渲染在背景色之上。

background-image: url(images/in_12.png);
background-color: green;
复制代码

background-repeat

设置背景重复

默认值：重复repeat

不重复：（只渲染一次背景图）no-repeat

在水平方向重复： repeat-x;

在垂直方向重复： repeat-y

background-position

背景图位置：背景图在整个大背景（能够渲染背景区域）中的位置。

• 像素表示法： 水平方向偏移量 垂直方向偏移量

background-position: 100px 40px;
复制代码

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

第二个参数： 40px 表示背景图左上角相对于大背景左上角向下偏移40px（正方向）

精灵图

css sprite(css 精灵图技术)

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

精灵图制作：

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

精灵图使用：

1 限制盒子宽高

2 通过background-position 的到任何的小精灵图

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

diy文字：

div {
	/*限制盒子的宽和高*/
	width: 103px;
	height: 134px;
	float: left;
	margin-right: 5px;
	background-image: url(images/zimu.jpg);
	/*通过background-position的到任意精灵图*/
	background-position: -403px -17px;
}
.i {
	/*特殊的属性后面层叠*/
	width: 78px;
	height: 127px;
	background-position: -156px -189px;
}
.y {
	width: 101px;
	height: 125px;
	background-position: -477px -530px;
}
复制代码

• 单词表示法

水平方向：left right center

垂直方向：top bottom center

background-position: center center;
复制代码

应用：

大背景居中

background-image: url(images/anhei.jpg);
复制代码

通栏大banner居中

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

• 百分数表示法

居中：

background-position: 50% 50%;
复制代码

background-attachment

背景图是否卷动（只能应用在body中）

默认：scroll(背景图跟随页面滚动而卷动)

fixed(背景图不跟随页面的滚动而卷动) 固定

background-attachment: fixed;
复制代码

background是复合属性可以书写复合写法。每一个属性值用空格

属性值可以写全，也可以省略表示使用默认值。（background-position必须先写水平再写垂直）

应用

• 文字替换图片

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

.header .inner .logo {
	float: left;
	width: 157px;
	height: 35px;
	/*将a文字溢出隐藏*/
	overflow: hidden;
}
.header .inner .logo a {
	/*a行内元素 不能设置宽高*/
	display: block;
	height: 35px;
	background: url(images/logo2.png) no-repeat;
	/*文字是让爬虫看到不是给用户看的*/
	text-indent: -999em;
}
复制代码

用padding挤出小背景图区域。

无序列表一般都有先导符号，我们使用padding挤出先导符号位置

.box ul li {
	height: 50px;
	line-height: 50px;
	font-size: 20px;
}
.box ul li a {
	display: block;
	height: 50px;
	line-height: 50px;
	padding-left: 30px;
	/*background-position单词和像素可以结合使用*/
	background: url(images/s2.png) no-repeat 5px center;
}
.box ul li a:hover {
	color: orange;
}
复制代码

定位

position: 定位

属性值：

相对定位： relative
绝对定位： absolute
固定定位： fixed
复制代码

相对定位

position: relative;
复制代码

水平方向： left right

垂直方向： top bottom（水平和垂直各选一个）

.no2 {
	/*相对定位*/
        position: relative;
	left: 250px;
	top: 40px;
	background-color: orange;
}
复制代码

相对定位：

1相对定位的元素没有脱离标准文档流，原位置保留

2 新位置相对于原位置进行偏移（形影分离）

正数含义

left: 40px 表示新位置向右偏移40px
top: 40px   表示新位置向下偏移40px
right: 40px 表示新位置向左偏移40px
bottom: 40px 表示新位置向上偏移40px
复制代码

还可以书写负数：表示和正数方向相反

left: -40px 表示新位置向左偏移40px
top: -40px   表示新位置向上偏移40px
right: -40px 表示新位置向右偏移40px
bottom: -40px 表示新位置向下偏移40px
复制代码

.no3 {
	position: relative;
	向右偏移100px
	right: -100px;
	向上偏移50px
	top: -50px;
	background-color: orange;
}
等价写法：
.no3 {
	position: relative;
	left: 100px;
	bottom: 50px;
	background-color: orange;
}
复制代码

绝对定位

position: absolute;
复制代码

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

.no2 {
	/*绝对定位*/
	position: absolute;
	left: 250px;
	top: 40px;
	background-color: orange;
}
复制代码

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

不针对祖先元素的定位参考

不针对祖先元素（有可以没有祖先，也可能是祖先没有定位）

有top参与相对于页面的左上角/右上角进行偏移

.no2 {
	/*绝对定位*/
	position: absolute;
	right: 250px;
	top: 40px;
	background-color: orange;
}
复制代码

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

.no4 {
	/*有bottom参与参考首屏*/
	position: absolute;
	/*left: 250px;*/
	right: 250px;
	bottom: 40px;
	background-color: red;
}
复制代码

针对祖先元素定位参考

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

<div class="box1">    //绝对定位
	<div class="box2">//相对定位
		<p>盒子</p>  //绝对定位（定位参考元素是距离最近的且有定位的祖先box2）
	</div>
</div>
复制代码