（前端开发）CSS高级开发

A宝呀

已于 2023-05-03 16:21:30 修改

阅读量272

点赞数

文章标签： css html 前端

于 2023-04-30 22:37:52 首次发布

本文链接：https://blog.csdn.net/m0_73254888/article/details/130451154

版权

定位

作用：灵活的改变盒子在网页中的位置

实现：

1.定位模式：position

2.边偏移：设置盒子的位置

left

right

top

bottom

相对定位

position: relative

特点：

1、不脱标，占用自己原来位置

2、显示模式特点保持不变

3、设置边偏移则相对自己原来位置移动

div {
  position: relative;
  top: 100px;
  left: 200px;
}

绝对定位

position: absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

特点：

1、脱标，不占位

2、显示模式具备行内块特点

3、设置边偏移则相对最近的已经定位的祖先元素改变位置

4、如果祖先元素都未定位，则相对浏览器可视区改变位置

.father {
  position: relative;
}

.father span {
  position: absolute;
  top: 0;
  right: 0;
}

定位居中

步骤

1、绝对定位

2、水平、垂直边偏移为 50%

3、子级向左、上移动自身尺寸的一半

～左、上的外边距为 –尺寸的一半

～transform: translate(-50%, -50%)

img {
  position: absolute;
  left: 50%;
  top: 50%;

  /* margin-left: -265px;
  margin-top: -127px; */

  /* 方便： 50% 就是自己宽高的一半 */
  transform: translate(-50%, -50%);
}

固定定位

position: fixed

场景：元素的位置在网页滚动时不会改变

特点：

1、脱标，不占位

2、显示模式具备行内块特点

3、设置边偏移相对浏览器窗口改变位置

堆叠定位（z-index）

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

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

属性名：z-index

属性值：整数数字（默认值为0，取值越大，层级越高）

.box1 {
  background-color: pink;
  /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
  z-index: 1;
}

.box2 {
  background-color: skyblue;
  left: 100px;
  top: 100px;

  z-index: 2;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 200px;
        height: 200px;
    }
    .box1 {
        background-color: pink;

        top: 100px;
        left: 100px;
        z-index: 1;
    }
    .box2 {
        background-color: purple;

        z-index: 2;
    }
</style>
<body>
    <div class="box1">box1</div>
    <div class="box2">box2</div>
</body>
</html>

总结

相对定位和绝对定位一般都是同时使用的（子绝父相）

固定定位使用在类似京东头部在滚动的时候不动

CSS精灵

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

步骤

1、创建盒子，盒子尺寸与小图尺寸相同

2、设置盒子背景图为精灵图

3、添加 background-position 属性，改变背景图位置

3.1 使用 PxCook 测量小图片左上角坐标

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

案例-京东服务

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li {
        list-style: none;
    }
    .banner {
        margin: 100px auto;
        width: 990px;
        height: 103px;
    }
    .banner ul {
        display: flex;
    }
    .banner li {
        width: 247px;
        height: 42px;
        display: flex;
    }
    .banner li h5 {
        margin-right: 10px;
        width: 36px;
        height: 42px;
        background-image: url(./sprite.png);
        background-position: 0 -192px;
    }
    .banner li:nth-child(2) h5{
        background-position: -41px -192px;
    }
    .banner li:nth-child(3) h5{
        background-position: -82px -192px;
    }
    .banner li:nth-child(4) h5{
        background-position: -123px -192px;
    }
    .banner li p {
        font-size: 18px;
        color: #444;
        font-weight: 700;
        line-height: 42px;
    }
</style>
<body>
    <div class="banner">
        <ul>
            <li>
                <h5></h5>
                <p>品质齐全，轻松购物</p>
            </li>
            <li>
                <h5></h5>
                <p>多仓直发，极速配送</p>
            </li>
            <li>
                <h5></h5>
                <p>正品行货，精致服务</p>
            </li>
            <li>
                <h5></h5>
                <p>天天低价，畅选无忧</p>
            </li>
        </ul>
    </div>
</body>
</html>

CSS修饰属性

垂直对齐方式

属性名：vertical-align

过度

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性花费时间 (s)

提示：

1、过渡的属性可以是具体的 CSS 属性

2、也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）

3、transition 设置给元素本身

img {
  width: 200px;
  height: 200px;
  transition: all 1s;
}

img:hover {
  width: 500px;
  height: 500px;
}

透明度opacity

作用：设置整个元素的透明度（包含背景和内容）

属性名：opacity

属性值：0 – 1

0：完全透明（元素不可见）

1：不透明

0-1之间小数：半透明

光标类型cursor

作用：鼠标悬停在元素上时指针显示样式

属性名：cursor

综合案例-轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    li {
        list-style: none;
    }
    .banner {
        position: relative;
        margin: 100px auto;
        width: 564px;
        height: 315px;
        overflow: hidden;
    }
    .banner img {
        width: 564px;
        border-radius: 15px;
        vertical-align: middle;
    }
    .banner ul {
        display: flex;
    }

        /* 箭头 */
    .banner .prev,
    .banner .next {
        /* 隐藏 */
        display: none;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);

        width: 20px;
        height: 30px;
        background-color: rgba(0,0,0, 0.3);

        text-decoration: none;
        color: #fff;
        line-height: 30px;
    }

    /* 鼠标滑到banner区域，箭头要显示 display:block */
    .banner:hover .prev,
    .banner:hover .next {
        display: block;
    }

    .banner .prev {
        left: 0;
        border-radius: 0 15px 15px 0;
    }

    .banner .next {
        right: 0;
        border-radius: 15px 0 0 15px;
        text-align: center;
    }

    /* 圆点 */
    .banner ol {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: rgba(255,255,255,0.3);

        display: flex;

        border-radius: 12px;
    }

    .banner ol li {
        margin: 3px;
        width: 8px;
        height: 8px;
        background-color: #fff;

        border-radius: 50%;
        cursor: pointer;
    }

    .banner ol .active{
        background-color: #ee6e2e;
    }
</style>
<body>
    <div class="banner">
        <ul>
            <li><a href="#"><img src="./banner1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./banner2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./banner3.jpg" alt=""></a></li>
        </ul>

        <!-- 箭头 -->
        <!-- 上一张 prev -->
        <a href="#" class="prev">
            <i class="iconfont icon-zuoce"></i>
        </a>
        <!-- 下一张 next -->
        <a href="#" class="next">
            <i class="iconfont icon-youce"></i>
        </a>

        <ol>
            <li></li>
            <li class="active"></li>
            <li></li>
        </ol>
    </div>
</body>
</html>