1.background :
background-image : ul(链接的图片地址);默认横向平铺,纵向平铺.
background-repeat : repeat ; 默认;
no-repeat : 不平铺;
repeat-x : 横向平铺;
repeat-y : 纵向平铺;
background-position : x y ;
如果为正值,那么表示调整图片的位置; 如果为负值, 精灵图切图;
background-attachment : fixed ; 不会随着父盒子的滚动而滚动;
background-position : center top; 让图片居中显示;
background : ul(图片地址) no-repeat x y;
实例 :
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
height:2000px;
/*background-image:url(1.gif)*/
}
.box{
25px;
height:13px;
border:1px solid red;
/*background-image:url(1.gif);*/
/*background-repeat:no-repeat;*/
/*background-position 如果为正值相当于调整位置图的位置*/
/*background-position: 20px 30px;*/
/*background-position:-25px -60px;*/
background:url(1.gif) no-repeat -25px -60px;
/*让背景图居中显示*/
/*background-position:center top;*/
}
.广告{
100%;
height:120px;
background-image:url(../day48代码练习/cms_15331133395269_fKTMV.jpg);
background-repeat:no-repeat;
background-position:center top;
}
.active{
132px;
height:132px;
background-image:url(1.gif);
background-repeat:no-repeat;
background-attachment:fixed;/*不会随着页面的滚动而滚动*/
border:1px solid red;
/*如果为负值 在一张大图上扣小图 这就是精灵图技术*/
background-position:0 200px;
}
</style>
</head>
<body>
<div class="box">
<img src="" alt="">
</div>
<div class="广告"></div>
<div class="active"></div>
</body>
</html>
2.定位
四种定位 :
position : static : 静态定位;
relative : 相对定位;
作用: 1.微调元素;
2.可以做"父相子绝"参考;
3.如果当前这个标准流的盒子设置相对定位,那么他跟标准流下的盒子是一样的;
相对定位的参考点 : 相对于原来的位置调整位置;
记住 :
1.不要用相对定位做压盖现象,因为相对定位会留坑;
2.设置定位之后,它的层级大于标准流的盒子;
3.相对的盒子不脱离标准流;
absolute : 绝对定位;
现象 : 1.脱标 2.做压盖 , 层级高;
1.绝对定位参考点 :
单独设置绝对定位 : top描述;
参考点 : 页面的左上角(跟浏览器的左上角区分);
单独设置绝对定位 : buttom描述;
参考点 : 浏览器的左下角;
2.当有父子盒子嵌套时参考点 :
父辈元素设置相对定位 , 子元素设置绝对定位 , 那么子元素是以最近父辈元素(必须设置相对定位)的左上角为参考点来调整位置 .
绝对定位的盒子居中 : left : 50%;
margin-left : 负的该盒子宽度的一半 ;
实例 :
绝对定位的盒子居中
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
100%;
height:400px;
position:relative;
background-color:red;
}
.wrap{
500px;
height:400px;
position:absolute;
background-color:green;
/*margin:0 auto;不起作用
left:50%;
margin-left:-宽度的一半;
*/
left:50%;
margin-left:-250px;
}
</style>
</head>
<body>
<div class="box">
<div class="wrap"></div>
</div>
</body>
</html>
fixed : 固定定位.
1.脱标;
2.层级提高;
参考点 : 浏览器的左上角;
应用 : 固定导航栏 , 广告 , 回到顶部;
固定定位的示例 :
固定定位
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
padding-top:100px;
}
.header{
100%;
height:100px;
background-color:red;
position:fixed;
top:0;
left:0;
z-index:9999;
}
.wrap{
100%;
height:1000px;
background-color:green;
/*margin-top:100px;*/
}
.top{
100px;
height:100px;
background-color:yellow;
position:fixed;
right:0;
bottom:100px;
line-height:100px;
text-align:center;
}
.wrap a{
position:relative;
z-index:99;
}
</style>
</head>
<body style="height:2000px;">
<div class="header"></div>
<div class="wrap">
<a href="#">百度一下</a>
</div>
<div class="top">回到顶部</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$('.top').click(function() {
$('html,body').animate({
scrollTop:0
},2000)
});
</script>
</body>
</html>
只要盒子设置浮动了 , 固定定位 , 绝对定位了;
1.脱标; 2.可以设置任意宽高;
3.z-index :
前提条件 : 必须设置定位;
1.z-index值表示谁压着谁 , 数值大的压着数值小的 ;
2.只有定位了的元素,才能有z-index , 也就是说,不管 相对定位 , 绝对定位 , 固定定位 都可以使用z-index;
3.z-index值没有单位,就是一个正整数,默认的z-index值为0,如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了的元素,永远压住没有定位的元素;
4.从父现象 : 父亲的z-index小 , 儿子的z-index再大也没有用;
实例 :
父的z-index小,子不过多大都会被覆盖,如果z-index一样大,谁是后面的是的为大
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.ti{
300px;
height:300px;
background-color:green;
position:relative;
z-index:2;
border-radius:50%;
}
.ha{
300px;
height:300px;
background-color:yellow;
position:relative;;
z-index:2;
}
.ni{
100px;
height:100px;
background-color:red;
position:absolute;
top:280px;
left:350px;
z-index:2;
}
.fa{
100px;
height:100px;
background-color:black;
position:absolute;
top:-50px;
left:350px;
}
</style>
</head>
<body>
<div class="ti">
<div class="ni"></div>
</div>
<div class="ha">
<div class="fa"></div>
</div>
</body>
</html>