CSS基础必备知识点04

1、display属性

display，显示，用来进行行内元素与块级元素之间的相互转换。将隐藏的元素显示或者将显示的元素进行隐藏。

display这个属性取值有：inline（行内）、block（块级）、none（无）

将一个行内元素的display属性的值设置为block以后，这个元素就会被转换成块级元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>display属性</title><style type="text/css">span{width: 100px;height: 100px;background-color: #f00;display: block;margin-bottom: 20px;}</style>
</head>
<body><span>看看</span><span>看看</span>
</body>
</html>

将一个块级元素的display属性的值设置为inline，这个元素就会从块级元素转换成行内元素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>块级元素转换成行内元素</title><style type="text/css">h2{width: 100px;height: 100px;background-color: #f00;display: inline;}</style>
</head>
<body><h2>看看</h2><h2>听听</h2>
</body>
</html>

注意：
- 如果将行内元素转换成了块级元素，那么这个元素就会拥有块级元素的特点。
- 如果将块级元素转换成了行内元素，那么这个元素就会拥有行内元素的特点。

元素的显示与隐藏（这两个功能主要是JS的使用）

display:none;(将一个显示的元素进行隐藏)

display:block;(将一个隐藏的元素显示出来)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>将显示的元素隐藏</title><style type="text/css">.box{width: 100px;height: 100px;background-color: #f00;/*将显示的元素进行隐藏*/display: none;}</style>
</head>
<body><div class="box"></div>
</body>
</html>

一个将行内元素转换成块级元素的完整案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>display综合案例</title><style type="text/css">*{margin: 0;padding: 0;}body{background-image: url(./img/wofeng.jpg);}ul{list-style: none;}.nav{width: 960px;height: 40px;margin: 100px auto;}.nav ul li{float: left;width: 120px;height: 40px;line-height: 40px;text-align: center;background-image: url(./images/title_bg.jpg);}.nav ul li a{width: 120px;height: 40px;display: block; /*将行内元素转换成块级元素*/}.nav ul li a:link,.nav ul li a:visited{text-decoration: none;color: rgb(228, 33, 140);}.nav ul li a:hover{background-image: url(./images/pic1.jpg);}</style>
</head>
<body><div class="nav"><ul><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li></ul></div>
</body>
</html>

2、position属性

position，位置，主要用于实现对元素的定位。
CSS中的定位有3种：
- position:fixed;固定定位
- position:relative;相对定位
- position:absolute;绝对定位
注意：在使用定位属性的时候，一定要配合定位的坐标来使用。
- left：表示定位的元素离左边多远
- right：表示定位的于是怒离右边多远
- top：表示定位的元素离上边多远
- bottom：表示定位的元素离下边多远

固定定位

语法：position:fixed;
含义：固定定位是相对于浏览器窗口进行定位的，不管页面如何滚动，固定定位元素显示的位置不会改变。
特点：
- 固定定位元素脱离了标准文档流
- 固定定位元素的层级比标准文档流里面的元素要高，所以固定定位元素会压盖住标准文档流里面的元素
- 固定定位元素不再占用空间
- 固定定位元素显示的位置不会随着浏览器滚动而滚动
案例1：使用固定定位元素来实现返回顶部的按钮

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>固定定位实现返回顶部</title><style type="text/css">*{margin: 0;padding: 0;}a{width: 60px;height: 60px;display: block;/*将行内元素转换为块级元素*/background-color: #ccc;text-align: center;line-height: 30px;text-decoration: none;/*去掉下划线*/color: white;font-weight: bold;/*字体加粗*//*使用固定定位*/position:fixed; right: 30px;/*离右边30px*/bottom: 100px;/*离下边30px*/}</style></head><body><a href="#">返回<br />顶部</a><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""></body></html>

案例2：使用固定定位来实现顶部的导航栏

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>固定定位实现顶部的导航栏</title><style type="text/css">*{margin: 0;padding: 0;}.nav{width: 100%;height: 60px;background-color: #473002; /*可以使用火狐浏览器的取色器*//*使用固定定位*/position: fixed;}.nav .inner_c{width: 1000px;height: 60px;margin: 0px auto;}ul{list-style: none;}ul li{float: left;width: 100px;height: 60px;line-height: 60px;text-align: center;}ul li a{display: block;width: 100px;height: 60px;text-decoration: none;color: white;}ul li a:hover{background-color: gold;}body .img{padding-top: 60px;}</style></head><body><div class="nav"><div class="inner_c"><ul><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li></ul></div></div><img src="./img/th.jpg" alt="" class="img"><br><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""></body></html>

相对定位
- 相对定位是相对于“原来的自己”进行定位的。
- 特点：
  - 相对定位元素没有脱离标准文档流
  - 相对定位元素如果没有设置定位的坐标，那么相对定位元素还会在原来的位置
  - 相对定位元素如果设置了定位坐标，那么他会在原来的位置上留下一个相同大小的“坑”
  - 相对定位元素会将标准文档流中的元素压盖住
  - 相对定位元素的定位坐标值可以是负数
- 注意：相对定位元素会在老家留下一个“坑”，所以一般情况下它很少单独使用，相对定位元素主要是配合“绝对定位”元素来使用。
```
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>相对定位案例</title><style type="text/css">/*使用属性选择器来匹配元素*/input[type="text"]{font-size: 36px;}input[type="button"]{position: relative;top: 6px;}</style></head><body><input type="text"><input type="button" value="检测用户名"></body></html>
```
绝对定位
- 语法：position:absolute;
- 什么是绝对定位？
  - 绝对定位是相对于“祖先定位元素”来定位的
- 什么是祖先定位元素？
  - 绝对定位元素会先去查找其父元素是否设置了定位的属性，如果有设置定位的属性，那么它就会相对于其父元素来进行定位；但是，如果它的父元素没有设置定位属性，那么它就会去查找其父元素的上一级元素是否设置了定位的属性，如果有设置就相对于其父元素的上一级元素进行定位，但是如果设置，那么就会继续往上一级进行查找，如果其所有的祖先元素都没有设置定位的属性，那么它就会相对于“浏览器窗口”进行定位。
- 特点：
  - 绝对定位元素脱离了标准文档流
  - 绝对定位元素不再占用空间
  - 绝对定位元素会压盖住标准文档流中的元素
  - 绝对定位元素会相对于其“祖先定位元素”进行定位，这里的祖先定位元素可以是相对定位，也可以是固定定位，还可以是绝对定位，但是，我们一般只会对祖先定位元素设置相对定位，遵循“子绝父相”（子元素设置绝对定位，父元素设置相对定位）。
```
案例1：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>绝对定位</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 600px;border: 1px solid #000;margin: 100px auto;}.box div{width: 100px;height: 100px;}.div1{background-color: #f00;   }.div2{background-color: rgb(163, 45, 163);/*绝对定位*/position: absolute;left: 0;  /*其祖先元素没有设置定位，所以相对于浏览器窗口定位*/}.div3{background-color: rgba(42, 119, 207, 0.747);}</style></head><body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></body></html>
```
以上案例表明，.div2是一个绝对定位元素，它会去查找其父元素.box是否设置了定位的属性，此处.box没有设置定位属性，则继续向.box的上一级查找，body也没有设置定位属性，所以，此处是相对于body也就是浏览器窗口的位置进行定位。
对比以下设置了父元素定位属性的情况.此处.div2是绝对定位元素，会去查找其父元素.box是否设置了定位属性，.box设置了定位属性为相对定位，此时，.div2这个元素就会相对于.box元素进行定位：离.box这个元素的右边0px，离上边0px
```
案例2：
<!DOCTYPE html>`<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>绝对定位</title><style type="text/css">*{margin: 0;padding: 0;}.box{width: 600px;border: 1px solid #000;margin: 100px auto;/*设置一个相对定位*/position: relative;}.box div{width: 100px;height: 100px;}.div1{background-color: #f00;   }.div2{background-color: rgb(163, 45, 163);/*绝对定位*/position: absolute;right: 0; top:0;}.div3{background-color: rgba(42, 119, 207, 0.747);}</style></head><body><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></body></html>
```
```
案例3：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>绝对定位</title><style type="text/css">*{margin: 0;padding: 0;}.boxp{width: 800px;border: 3px solid rgb(35, 163, 223);margin: 100px auto;/*设置一个相对定位*/position: relative;}.box{width: 600px;border: 1px solid #000;margin: 100px auto;}.box div{width: 100px;height: 100px;}.div1{background-color: #f00;   }.div2{background-color: rgb(163, 45, 163);/*绝对定位*/position: absolute;right: 0;  top:0;}.div3{background-color: rgba(42, 119, 207, 0.747);}</style></head><body><div class="boxp"><div class="box"><div class="div1"></div><div class="div2"></div><div class="div3"></div></div></div></body></html>
```
案例3表明：.div2是一个绝对定位元素，其父元素.box没有设置定位属性，则继续向上一级查找，发现.box的上一级元素.boxp设置了相对定位，此时，.div2将会相对于.boxp元素进行定位，即：离.boxp这个元素的右边0px，离上边0px。
- 注意一个问题：如果当前元素的父元素与其爷爷元素（指的是其父元素的上一级元素）都设置了相对定位，那么当前的绝对定位元素会相对于谁来进行定位？
  - 当前的绝对定位元素会相对于其父元素进行定位，也就是说，当绝对定位元素查找到了其祖先元素已经设置了定位的属性就不会再向上一级查找。

3、案例：使用绝对定位实现拉手网上的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>使用绝对定位实现拉手网上的压盖效果</title><style type="text/css">/*清除内填充与外边距*/*{margin: 0;padding: 0;}.box{width: 700px;height: 350px;border:1px solid #f00;margin: 100px auto;position: relative;/*相对定位*/}.box span{position: absolute;/*绝对定位*/right: 10px;top: -80px;}</style>
</head>
<body><div class="box"><span><img src="./images/1.png"></span><div><img src="./images/hb.jpg"></div></div>
</body>
</html>

4、z-index属性

z-index表示谁压盖着谁，数值大的会压盖住数值小的
只有定位的元素才有z-index值，只有设置了固定定位、相对定位、绝对定位了的元素才会拥有z-index值
z-index值没有单位，它的值是一个正整数，默认的z-index值是0

如果多个定位元素没有设置z-index值，或者z-index值一样，那么写在HTML后面的定位元素会压盖住前面的定位元素。

案例1：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>z-index属性</title><style type="text/css">div{width: 200px;height: 200px;}.div1{background-color: #f00;/*绝对定位*/position: absolute;/*定位坐标*/left: 100px;top: 100px;}.div2{background-color: #0f0;/*绝对定位*/position: absolute;/*定位坐标*/left: 200px;top: 200px;}</style></head><body><div class="div2"></div><div class="div1"></div></body></html>

上上述案例1中，.div1和.div2都设置了绝对定位，所以他们就拥有了z-index属性，但是并没有给z-index设置对应的值，即此时默认为0，观察HTML中的结构发现.div1这个元素写在.div2元素的后面，所以.div1会压盖住.div2

案例2：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>z-index属性</title><style type="text/css">div{width: 200px;height: 200px;}.div1{background-color: #f00;/*绝对定位*/position: absolute;/*定位坐标*/left: 100px;top: 100px;z-index: 1;}.div2{background-color: #0f0;/*绝对定位*/position: absolute;/*定位坐标*/left: 200px;top: 200px;z-index: 3;}</style></head><body><div class="div2"></div><div class="div1"></div></body></html>

上述案例2中，.div1和.div2都设置绝对定位属性，所以就拥有了z-indexde zhi属性，并且它们都设置了z-index值，值大的会压盖住值小的，.div2的值比.div1的值大，所以.div2会压盖住.div1.

z-index属性在工作上的应用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>固定定位实现顶部的导航栏</title><style type="text/css">* {margin: 0;padding: 0;}.nav {width: 100%;height: 60px;background-color: #473002;/*使用固定定位*/position: fixed;z-index: 9999;  /*使导航栏压盖住后面的p标签*/}.nav .inner_c {width: 1000px;height: 60px;margin: 0px auto;}ul {list-style: none;}ul li {float: left;width: 100px;height: 60px;line-height: 60px;text-align: center;}ul li a {display: block;width: 100px;height: 60px;text-decoration: none;color: white;}ul li a:hover {background-color: gold;}body .img {padding-top: 60px;}p{width: 100px;height: 30px;line-height: 30px;text-align: center;background-color: rgb(40, 176, 218);/*相对定位*/position: relative;}</style>
</head>
<body><div class="nav"><div class="inner_c"><ul><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li><li><a href="#">网站栏目</a></li></ul></div></div><img src="./img/th.jpg" alt="" class="img"><br><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""><br><p>看看我在哪里</p><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt=""><br><img src="./img/th.jpg" alt="">
</body>
</html>