主要内容:
1.background
2.定位
3.z-index
概要解释:
1.background-image: url('链接的图片地址'); 默认是横向平铺 纵向平普
background-repeat:
repeat:默认
no-repeat:不平铺
repeat-x:
repeat-y:
background-position:x y;
如果为正值 那么表示调整图片的位置
如果为负值 精灵图切图
background-attachment:fixed;
不会随着父盒子的滚动而滚动
background: url('') no-repeat x y;
2.定位
四种定位:
position
static:静态定位
relative:
相对定位
作用:
1)微调元素
2)可以做"父相子绝"参考
3)如果当前这个标准流的盒子设置了相对定位,那么他跟标准流下的盒子是一样的
参考点:
(1)相对于原来的位置调整位置
记住:
1)不要用相对定位做压盖现象,因为相对定位会"留坑" 占着茅房布拉斯
2)设置定位之后,它的层级大于标准流的盒子
3)相对的盒子不脱离标准流
absolute:绝对定位
现象:
1)脱标
2)做压盖 层级高
(1)参考点
单独设置绝对定位: top描述
参考点: 页面的左上角 (跟浏览器的左上角区分)
单独设置绝对定位: bottom描述
参考点: 浏览器的左下角
(2)当有父子盒子嵌套时参考点:
父辈元素设置相对定位 子元素设置绝对定位 那么子元素是以最近父辈元素(必须设置相对定位)的左上角为参考点来调整位置
绝对定位的盒子居中:
left:50%;
margin-left:负的该盒子宽度的一半
fixed:固定定位
1.脱标
2.层级提高
参考点:浏览器的左上角
应用:固定导航栏 广告 回到顶部
只要盒子 设置浮动了 固定定位 绝对定位了
1.脱标
2.可以任意宽高
3.z-index
前提条件:必须设置定位
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父亲怂了，儿子再牛逼也没用
下面是详细的解释:
1 background
下面是背景图的详细解释:
注意工作中通常是用快捷用法:
background: url('images/timg.jpg') no-repeat 10px 20px;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-img</title> <style> *{ padding: 0; margin: 0; } .box{ background-image: url('./images/love.jpg'); width: 100%; height: 150px; background-repeat: no-repeat; background-position: center top; /* 这个包括设置背景图,以及不多行平铺,只单行平铺,以及设置背景图居中 */ } .container{ width: 300px; height: 400px; background-color: red; background-image: url('images/timg.jpg'); background-repeat: no-repeat; background-position: 10px 20px; /* 这个是设置在div中微调背景图的位置 */ } .koutu{ width: 20px; height: 30px; /* background-color: green; */ background-image: url("images/timg.jpg"); background-repeat: no-repeat; background-position: 0 -20px; /* 这个是对背景图进行切割.获取想要的图片 */ } </style> </head> <body> <div class = "box"></div> <div class = "container"> </div> <div class = "koutu"></div> </body> </html>
2.定位
1)相对定位
示例如下:
相对定位要注意的是相对的偏移是相对原位置的偏移.
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 200px; height: 200px; } .child1{ background-color: red; } .child2{ background-color: green; position: relative; top: -30px; /* 相对于原位置向上偏移30px */ left: 100px;/* 相对于原位置向右偏移100px */ } .child3{ background-color: blue; } </style> </head> <body> <div class = "child1"></div> <div class = "child2"></div> <div class = "child3"></div> <div class = "child4"></div> </body> </html>
相对偏移的微调数据:
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> a{ text-decoration:none; color:#172c45; position: relative; top: -6px; /* 这里是根据web上设置的微调 */ } input{ font-size: 30px; } </style> </head> <body> <a href="#">百度一下</a> <input type="text"> </body> </html>
相对偏移的重要应用:父相子绝
父相子绝里的边界是父亲的相对定位.
示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .father1{ position: relative; width: 600px; height: 200px; background-color: red; } .father2{ position: relative; width: 400px; height: 100px; background-color: green; } .child1{ width: 50px; height: 50px; background-color: blue; position: absolute; } .child2{ width: 50px; height: 60px; background-color: gray; position: absolute; top: 30px; left: 40px; } </style> </head> <body> <div class = "father1"> <div class = "father2"> <div class = "child1"></div> <div class = "child2"></div> </div> </div> </body> </html>
绝对定位:
绝对定位里要注意是:
如果没有父相子绝,那么也就是单独用绝对定位,那么参考点是页面的左上角(这里注意和浏览器的左上角区别开.)
如果用的是bottom的话,那么参考点是浏览器左下面.
绝对定位还有一点要注意到的是,绝对定位怎么使自己居中父盒子.需要如下操作:
left:50%;
margin-left:负的该盒子宽度的一半
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } .box{ width: 200px; height: 200px; position:absolute; left: 40px; bottom: 10px; background-color: green; /* 注意这里的bottem设置是相对于浏览器的底部距离 */ } .test{ width: 500px; height: 1200px; background-color: red; position: absolute; top: 30px; left: 30px; /* top这里是相对于页面左上角来说的,不管你有没有父标签,只要父标签没有设置父相子绝的话,那么就是相对于页面. */ } .body_test{ width: 1000px; height: 1000px; margin: 40px; background-color: gray; } </style> </head> <body> <div class = "body_test"> <div class = "test"></div> <div class = "box"></div> </div> </body> </html>
固定定位:
固定定位要注意的是,一定要有top和left.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } div{ width: 800px; } .box{ background-color: red; height: 800px; } .box1{ background-color: green; height: 50px; position:fixed; top: 30px; left: 20px; width: 50px; } </style> </head> <body> <div class = "box"></div> <div class = "box1"></div> </body> </html>
3.z-index
前提条件必须设置定位,设置定位后所有默认值为0.
前提条件:必须设置定位
1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的
4.从父现象：父亲怂了，儿子再牛逼也没用
下面是从父现象的代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .father1{ width: 400px; height: 400px; position: relative; background-color: gray; z-index: 1; } .father2{ width: 400px; height: 400px; position: relative; background-color: green; z-index: 2; } .child1{ width: 50px; height: 50px; background-color: red; position: absolute; top: 200px; left: 450px; z-index: 3; } .child2{ width: 50px; height: 50px; background-color: blue; position: absolute; top: -220px; left: 450px; } </style> </head> <body> <div class = "father1"> <div class = "child1"></div> </div> <div class = "father2"> <div class = "child2"> </div> </div> </body> </html>