HTML5前端第八章节

一.定位

1.作用：

灵活地改变盒子在网页中的位置

2.实现：

（1）.定位模式：

position

（2）.边偏移：

设置盒子的位置（left，right，top，bottom）

3.相对定位：

（1）.特点：

①：改变位置的参照物是自己原来的位置

②：不脱离标准流的控制，仍然是占位的

③：标签显示模式的特点是不变的（原来是什么样的显示模式，之后仍然是这样的显示模式）

（2）.产生作用的方式

①：设置position:relative

②：设置边偏移

两者必须都进行设置，否则不会生效

4.绝对定位：

（1）.定位的使用场景：

子级设置绝对定位，父级设置相对定位

（2）.特点：

①：脱离标准流的控制，不占位

②：参照物：先找最近的已经定位的祖先元素，如果所有的祖先元素都没有定位，那么参照浏览器可视区域进行定位

③：绝对定位会使显示模式的特点改变为宽高生效的模式（具备了行内块的特点）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    img {
        width: 400px;
    }

    .news {
        /* 父级中设置相对定位 */
        position: relative;
        margin: 100px auto;
        width: 400px;
        height: 350px;
        background-color: #fff;
    }

    .news span {
        /* 在子级中设置绝对定位 */
        position: absolute;
        /* 不仅要设置position属性，还要设置边偏移 */
        right: 0;
        top: 0;
        display: block;
        width: 92px;
        height: 32px;
        background-color: rgba(0, 0, 0, 0.5);
        text-align: center;
        line-height: 32px;
        color: #fff;
    }

</style>
</head>
<body>
  <div class="news">
    <img src="./images/news.jpg" alt="">
    <span>展会活动</span>
    <h4>世界移动大会</h4>
  </div>
</body>
</html>

5.定位居中

（1）.实现步骤：

①：绝对定位

②：水平和垂直的边偏移为50%

③：子级向左，上移动自身尺寸的一半（可以把左，上的外边距设置为尺寸的一半，还可以设置transform属性为translate(-50%,-50%)）

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    img {
        position: absolute;
        left: 50%;
        top: 50%;

        /* 移动图片尺寸的一半 */
        /* margin-left: -149px;
        margin-top: -220px; */
        /* 两者皆可 */
        /* transform: translate(-50%, -50%); */
    }
</style>
</head>
<body>
    <img src="./images/4.jpeg" alt="">
</body>
</html>

6.固定定位

（1）.使用场景：

适用于元素的位置在网页滚动时不会改变的场景下

（2）.使用方式：

①：设置position属性为fixed

②：设置边偏移定位到我们想要的位置上

（3）.特点：

①：脱离标准流的控制，不占位

②：始终固定在相同的位置

③：参照物是浏览器窗口

④：显示模式特点会改变为行内块的特点

7.堆叠层级z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    div {
        /* 设置了定位之后两者之间的堆叠层级就出现了 */
        position: absolute;
        width: 200px;
        height: 200px;
    }

    .box1 {
        background-color: blue;
        /* z-index的取值是整数，默认是0，取值越大层级越靠上（可以参考权重的概念，取值越大
        权重越大） */
        z-index: 1;
    }

    .box2 {
        background-color: blueviolet;
        left: 100px;
        top: 100px;
    }
</style>
</head>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>
</html>

8.总结：

定位模式	属性值	是否脱标	显示模式	参照物
相对定位	relative	否	保持标签原有显示模式	自己原来的位置
绝对定位	absolute	是	行内块特点	已经定位的祖先元素或浏览器可视区域
固定定位	fixed	是	行内块特点	浏览器窗口
[定位总结]

二.CSS Sprites（精灵）

1.作用：

CSS Sprites是一种网页图片应用处理方式，把网页中一些背景图片整合到一张图片文件中，再通过background-position精确地定位出背景图片的位置

2.使用CSS Sprites的优点：

减少服务器被请求的次数，减轻服务器的压力，提高页面加载速度

3.实现步骤

（1）.创建盒子，盒子的尺寸要设计得与小图的尺寸相同

（2）.设置盒子背景图为Sprites图

（3）.添加background-position属性改变背景图的位置

①：使用PxCook测量小图片左上角的坐标

②：取负数坐标为background-position属性值（向左上移动图片的位置）