一、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 相对定位
- 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>