CSS定位

已于 2024-03-18 10:08:04 修改
阅读量889 收藏 15
点赞数 22
分类专栏： web 文章标签： css 前端 javascript
于 2024-03-14 22:50:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73701759/article/details/136724284
版权

定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位</title>
</head>
<body>
    <h3>定位</h3>
    <strong>作用：</strong>灵活的改变盒子在网页中的位置<br>
    <strong>实现：</strong>
    <li>定位模式: position</li>
    <li>边偏移:设置盒子的位置
        <li>left</li>
        <li>right</li>
        <li>top</li>
        <li>bottom</li>
    </li>
</body>
</html>

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            position: relative;
            /* 和原来的位置上面差100px，实现重叠了 */
            top: 100px;
            left: 200px;
        }
    </style>
</head>
<body>
    <h3>相对定位</h3>
    <li><strong>改变位置的参照物是原来的位置</strong></li>
    <li><strong>原来位置保存，不被其他占领，不脱标</strong></li>
    <li><strong>position:relative标签显示模式不变（块级还是块）</strong></li>
    <li><strong>工作中一般不使用相对定位</strong></li>
    <strong>position:relative</strong><br><br>
    <hr>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <div><img src="./images/1.webp" alt=""></div>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>

</body>
</html>

绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        * {
      margin: 0;
      padding: 0;
    }

    img {
      width: 400px;
    }

    .news {
        position: relative;
        margin: 100px auto;
        width: 400px;
        height: 350px;
        background-color: #f8f8f8;
    }
    .news span {
        position: absolute;
        
        top: 0;
        right: 0;
        /* display: block; */
        width: 92px;
        height: 32px;
        background-color: rgba(0,0,0,0.6);
        text-align: center;
        line-height: 32px;
        color: #fff;
    }
    </style>
</head>
<body>
    <h3>绝对定位</h3>
    <strong>使用场景：</strong>子级绝对定位，父级相对定位（子绝父相） <br>
    <strong>特点：</strong>
    <li>脱标，不占位，悬浮啦</li>
    <li>父级不加position: relative;，就会浏览器窗口的相对位置（body的位置）</li>
    <li>参照物: 先找最近的已经定位的祖先元素</li>
    <li>绝对定位的显示模式改变，宽高生效，（具有行内块特点）（不知道啥意思，注释掉display: block;之后，宽高没变，还是原来定义的</li>
    <strong>position: absolute</strong><br>
    <br><hr>
    <div class="news">
        <img src="./images/news.jpg" alt="">
        <span>展会活动</span>
        <h4>2222世界移动大会</h4>
      </div>
</body>
</html>

定位居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位居中</title>
    <style>
        .img {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -265px;
            margin-top: -127px; */
            transform: translate(-50%, -50%);
            /* 这种方法不用自己计算 */
        }
        div {
            height: 1000px;
            position: relative;
        }
    </style>
</head>
<body>
    <h3>定位居中</h3>
    <strong>实现步骤:</strong>
    <li>1.绝对定位</li>
    <li>2.水平、垂直边偏移为 50%</li>
    <li>3.子级向左、上移动自身尺寸的一半
        <li>左、上的外边距为-尺寸的一半</li>
        <li>transform: translate(-50%, -50%)</li>
    </li>
    <strong>经过第二部，如果只left：50%</strong>如图所示<br>
    <img src="./img/left50%.png" alt=""><br>
    <strong>然后经历第三步 （左、上的外边距为-尺寸的一半）或（transform: translate(-50%, -50%)）</strong><br>
    <img src="./img/居中后.png" alt=""><br>
    <br><hr>

    <div><img src="./images/login.webp" class="img"></div>
</body>
</html>

固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <h3>固定定位</h3>
    <strong>属性值：</strong>position: fixed; <br>
    <li>脱标，不占位，悬浮啦</li>
    <li>div标签的位置不变</li>
    <li>如果加top 0之类的，参照物是路浏览器窗口（界面的body）</li>
    <li>固定定位会改变显示模式，会改为行内块元素（加宽度生效）</li>
    <br>
    <hr>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <div><img src="./images/1.webp" alt=""></div>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>
    <p>Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。</p>

</body>
</html>

堆叠层级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>堆叠层级 z-index</title>
    <style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
        }
        .box1 {
            background-color: pink;
            z-index: 1;
        }
        .box2 {
            background-color: skyblue;
            z-index: 2;
            left: 100px;
            top: 100px;
        }
    </style>
</head>
<body>
    <h3>堆叠层级 z-index</h3>
    <strong>默认效果:</strong> 按照标签书写顺序，后来者居上<br>
    <strong>作用:</strong> 设置定位元素的层级顺序，改变定位元素的显示顺序<br>
    <li>取值是整数，默认是0，取值越大显示顺序越靠 上</li>
    <br><hr>
    <div class="box1">1</div>
    <div class="box2">2</div>
</body>
</html>

定位总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位总结</title>
</head>
<body>
    <h3>定位总结</h3>
    <img src="./img/定位总结.png" alt="">
    <hr>
</body>
</html>

CSS精灵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS精灵</title>
    <style>
        div {
            width: 112px;
            height: 110px;
            background-color: pink;
            background-image: url(./images/abcd.jpg);
            background-position: -256px -276px;
        }
    </style>
</head>
<body>
    <h3>CSS精灵</h3>
    <p><strong>CSS 精灵，</strong>也叫 CSS Sprites，是一种网页图片应用处理方式,把网页中一些背景图片整合到一张图片文件中，再background-position 精确的定位出背景图片的位置。</p>
    <li><strong>优点:</strong>减少服务器被请求次数减轻服务器的压力提高页面加载速度</li>
    <strong>实现步骤：</strong>
    <ol>
        <li>创建盒子，盒子尺寸与小图尺寸相同</li>
        <li>设置盒子背景图为精灵图</li>
        <li>添加 background-position 属性，改变背景图位置
            <ul>
                <li>3.1使用 PxCook 测量小图片左上角坐标</li>
                <li>3.2 取负数坐标为background-position 属性值(向左上移动图片位置)</li>
            </ul>
        </li>
    </ol>
    <br><hr>
    <div></div>
</body>
</html>

字体图标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .iconfont {
            font-size: 200px;
            color: red;
        }
    </style>
</head>
<body>
    <h3>字体图标</h3>
    <strong>字体图标:</strong> 展示的是图标，本质是字体<br>
    <strong>作用:</strong> 在网页中添加简单的、颜色单一的小图标
    <strong>优点：</strong>
    <ul>
        <li>灵活性:灵活地修改样式，例如：尺寸、颜色</li>
        <li>轻量级:体积小、渲染快、降低服务器请求次数</li>
        <li>兼容性:几乎兼容所有主流浏览器</li>
        <li>使用方便:先下载再使用</li>
    </ul>
    <br> <hr>
    <span class="iconfont icon-icon-test2"></span>
</body>
</html>

字体图标-下载字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标-下载字体</title>
</head>
<body>
    <li>iconfont 图标库: https://www.iconfont.cn/</li>
    <li>下载字体
        <ul><li>登录 素材库 一 官方图标库 进入图标库 选图标，加入购物车 购物车，添加至项目，确定 下载至本地</li></ul>
    </li>

</body>
</html>

字体图标-使用字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标-使用字体</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .iconfont {
            font-size: 200px;
            color: red;
        }
    </style>
</head>
<body>
    <h3>字体图标-使用字体</h3>
    <li>引入字体样式表 (iconfont.css)</li>
     <img src="./img/字体图标-使用字体.png" style="padding: 5px;">
    <li>标签使用字体图标类名
        <ul>
            <li>iconfont: 字体图标基本样式(字体名，字体大小等等)</li>
            <li>icon-xxx:图标对应的类名</li>
            <li><img src="./img/字体图标-使用字体2.png" alt=""></li>
        </ul>
    </li>
    <li>如果要调整字体大小。注意 选择器的优先级 要高于 iconfont 类</li><br><hr>
    <span class="iconfont icon-icon-test3"></span>
</body>
</html>

字体图标-上回矢量图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标-上传矢量图</title>
</head>
<body>
    <h3>字体图标 - 上传矢量图</h3>
    <strong>作用:</strong>项目特有的图标上传到iconfont 图标库，生成字体<br>
</body>
</html>

垂直对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>垂直对齐方式（vertical-align）</title>
    <style>
        div {
            border: 1px solid #000;
        }
        img {
            /* vertical-align: baseline; */
            /* vertical-align: top; */
            vertical-align: middle;
            /* vertical-align: bottom; */
        }
    </style>
</head>
<body>
    <h3>垂直对齐方式（vertical-align）</h3>
    <strong>属性名：</strong>vertical-align <br>
    <strong>属性值：</strong>
    <ul>
        <li> baseline 基线对齐(默认)</li>
        <li> top 顶部对齐</li>
        <li> middle 居中对齐</li>
        <li> bottom 底部对齐</li>
    </ul>
    <li>因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐</li>
    <li>效果: 图片img的底下有空白，转块级不按基线对齐，空白就消失了</li>
    <br><hr>
    <div>
        <strong>基线对齐</strong><img src="./img/基线对齐.png" alt="">
        <strong>顶部对齐</strong><img src="./img/顶部对齐.png" alt="">
    </div>
    <div>
        <strong>居中对齐</strong><img src="./img/居中对齐.png" alt="">
        <strong>底部对齐</strong><img src="./img/底部对齐.png" alt="">
    </div><br>

    <img src="./images/1.webp" >
    小猫🐱
</body>
</html>

过渡transition

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过渡 transition</title>
    <style>
        img {
            display: block;
            margin: 0 auto;
            width: 200px;
            height: 150px;
            transition: all 1s;
        }
        img:hover {
            width: 500px;
            height: 400px;
        }
    </style>
</head>
<body>
    <h3>过渡 transition</h3>
    <strong>作用:</strong> 可以为一个元素在不同状态之间切换的时候添加过渡效果<br>
    <strong>属性名:</strong> transitior复合属性<br>
    <strong>属性值:</strong> 过渡的属性 花费时间(S) <br>
    <strong>提示</strong>
    <li>过渡的属性可以是具体的 CSS 属性</li>
    <li>也可以为 all(两个状态属性值不同的所有属性，都产生过渡效果)</li>
    <li>transition 设置给元素本身</li>
    <br><hr>
    <img src="./images/huawei.jpg" alt=""> 
</body>
</html>

透明度opacity

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>透明度 opacity</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: pink;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <strong>作用:</strong>设置整个元素的透明度(包含背景和内容) <br>
    <strong>属性名:</strong> opacity
    <strong>属性值:</strong> 0-1
    <li>0:完全透明 (元素不可见)</li>
    <li>1:不透明</li>
    <li>0-1之间小数:半透明</li>
    <br><hr>
    <div>
        <img src="./images/phone.png" alt="">
    </div>
</body>
</html>

光标类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光标类型 cursor</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* cursor: pointer; */
            /* cursor: text; */
            cursor: move;
        }
    </style>
</head>
<body>
    <h3>光标类型 cursor</h3>
    <strong>作用:</strong>鼠标悬停在元素上时指针显示样式<br>
    <strong>属性名:</strong> cursor
    <strong>属性值:</strong> 
    <li>default 默认值，通常是箭头</li>
    <li>pointer 小手效果，提示用户可以点击</li>
    <li>text 工字型，提示用户可以选择文字</li>
    <li>move 十字光标，提示用户可以移动</li>
    <img src="./img/光标类型.png" alt="">
    <br><hr>
    <div></div>
</body>
</html>

案例

CSS精灵

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-CSS精灵</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        .service {
            margin: 300px auto;
            width: 1190px;
            height: 42px;
            /* background-color: pink; */
        }
        .service ul {
            display: flex;
        }
        .service li {
            display: flex;
            width: 297px;
            height: 42px;
            /* background-color: skyblue; */
            padding-left: 40px;
        }
        .service li h5 {
            height: 42px;
            width: 36px;
            /* background-color: pink; */
            /* background: url(./images/sprite.png) left bottom; */
            background: url(./images/sprite.png) 0px -192px;
            margin-right: 10px;
        }
        .service li:nth-child(2) h5 {
            height: 42px;
            width: 36px;
            /* background-color: pink; */
            background: url(./images/sprite.png) -41px -192px;
            margin-right: 10px;
        }
        .service li:nth-child(3) h5 {
            height: 42px;
            width: 36px;
            /* background-color: pink; */
            background: url(./images/sprite.png) -82px -192px;
            margin-right: 10px;
        }
        .service li:nth-child(4) h5 {
            height: 42px;
            width: 36px;
            /* background-color: pink; */
            background: url(./images/sprite.png) -123px -192px;
            margin-right: 10px;
        }
        .service li p {
            font-size: 18px;
            color: #444;
            font-weight: 700;
            line-height: 42px;
        }
    </style>
</head>
<body>
    <div class="service">
        <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>

案例-轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例-轮播图</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        li {
            list-style: none;
        }
        .banner {
            position: relative;
            margin: 100px auto;
            /* background-color: pink; */
            width: 564px;
            height: 315px;
            overflow: hidden;
            /* 溢出内容隐藏 */
        }
        /* 图片 ul>li */
        .banner img {
            width: 564px;
            border-radius: 12px;
            vertical-align: middle;
        }
        .banner ul {
            display: flex;
        }
        .banner .next,
        .banner .prev {
            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:hover .next,
        .banner:hover .prev {
            display: block;
        }
        .banner .prev {
            left: 0;
            /* text-align: center; */
            border-radius: 0 15px 15px 0;
        }
        .banner .next {
            right: 0;
            border-radius: 15px  0px 0px 15px;
            text-align: center;
        }
        .banner ol {
            display: flex;
            position: absolute;
            border-radius: 10px;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            height: 13px;
            background-color: rgba(255, 255 , 255, 0.3);
        }
        .banner ol li {
            margin: 3px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #fff;
            cursor: pointer;
        }
        .banner ol .active {
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="banner">
        <!-- 图 -->
        <ul>
            <li><a href="#"><img src="./images/banner1.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/banner2.jpg" alt=""></a></li>
            <li><a href="#"><img src="./images/banner3.jpg" alt=""></a></li>
        </ul>
        <!-- 箭头 -->
        <a href="#" class="prev">
            <i class="iconfont icon-zuoce"></i>
        </a>
        <a href="#" class="next">
            <i class="iconfont icon-youce"></i>
        </a>
        <ol>
            <li></li>
            <li class="active"> </li>
            <li></li>
        </ol>
    </div>
</body>
</html>

在这里插入图片描述

鷇韩
关注
  • 22
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
CSS笔记01：margin 和 padding
一今今天也很忙
04-19 138
1.margin：外边距。元素与界面的距离 2.padding：内边距。元素与其内部元素的距离 3.案例说明 <style> *{ padding: 0; margin: 0; } #big{ width: 500px; height: 500px; border: solid 1px red; }
CSS定位.pdf
04-12
CSS定位是网页设计中至关重要的一个概念，它允许开发者精确控制元素在页面上的位置。CSS定位主要有四种方式，分别是默认定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。 1. **...
css中{margin:0; padding:0;}有什么用以及*{margin: 0; padding: 0}的作用与利弊？（转载自慕课网）...
热门推荐
bafanhe0703的博客
09-14 1万+
*{margin: 0; padding: 0}的作用 *{margin: 0; padding: 0}作用是Reset（重置）浏览器默认样式，对于各浏览器样式统一的话有着简单粗暴的效果。这东西叫“通配符”用来匹配页面上所有元素。 *{margin:0; padding:0;}代表了网页中所有元素，包括body ,ul, li列表标签 ,p,H标题标签,dd,dt 等……都有默认的m...
css中{margin:0；padding:0；}的作用和利弊（转载自慕课网）
yoig_的博客
10-21 5317
1、{margin:0;padding:0;}作用 {margin:0;padding:0;}主要用于重置浏览器默认样式。 由于不同浏览器对html标签的默认外边距和内边距的值不同，为了在主流浏览器中统一标准让布局显示相同，需要将html所有标签的padding,margin都设置为0 *{margin:0;padding:0} [点击并拖拽以移动] 2.{margin:0;padding:0;}利处 可一次性重置所有HTML网页元素的浏览器样式，简介，方便。
* {margin:0;padding:0;}
yanzhibo的专栏IlgawME)Y*Ml
01-20 4188
* 是表示针对HTML的所有元素。 margin表示边框外面留的空白，后面的0表示不留空白。 padding表示边框内部带内容之间填充，后面的0表示不留空白。 border表示边框，后面的0px表示边框宽度为0像素，边框绘制方式none表示不绘制边框。 原文：http://guanjy0129.blog.163.com/blog/static/111549445
C语言margin的作用是,*{margin: 0; padding: 0}的作用与利弊
weixin_39528219的博客
05-16 1113
*{margin: 0; padding: 0}的作用*{margin: 0; padding: 0}作用是Reset(重置)浏览器默认样式，对于各浏览器样式统一的话有着简单粗暴的效果。* 这东西叫“通配符”用来匹配页面上所有元素。*{margin:0; padding:0;}代表了网页中所有元素，包括body ,ul, li列表标签,p,H标题标签,dd,dt 等……都有默认的margin 或...
前端css定位.pdf
07-28
本人整理的css定位
css 定位应用实例
09-25
本篇将深入探讨CSS定位的应用实例，特别是如何利用`position`属性来实现灵活的页面布局。 首先，理解`position`属性至关重要。`position`属性有四个主要值：`static`、`relative`、`absolute`和`fixed`。默认情况下...
CSS教程 CSS定位属性
09-25
CSS定位属性是网页布局设计的关键，它允许开发者精确控制元素在页面上的位置，从而实现复杂的网页布局。在CSS中，有三种主要的定位机制：普通流、浮动和绝对定位。 普通流是元素默认的布局方式，块级元素从上到下...
html+css定位练习
08-05
总的来说，HTML+CSS定位是网页设计中的关键技能，熟练掌握它能让你创建出更加灵活和精细的网页布局。通过这个练习集，希望你能深入理解定位的概念，提升你的网页设计能力。记得多实践、多尝试，理论与实践相结合才能...
详解css 定位与定位应用
12-01
在CSS中关于定位的内容是：position:relative | absolute | static | fixed static 没有特别的设定，遵循基本的定位规定，不能通过z-index进行层次分级。relative 不脱离文档流，参考自身静态位置通过 top,bottom,...
深入理解CSS定位与层叠
09-24
下面小编就为大家带来一篇深入理解CSS定位与层叠。小编觉得挺不错的，现在分享给大家，也给大家做个参考
有关CSS定位、隐藏的案例分享
04-08
本篇文章将深入探讨两个关键概念：CSS定位和元素的隐藏与显示，通过具体的案例来阐述这些知识点。 一、CSS定位 定位是CSS中用于控制元素在页面上精确位置的重要技术。主要的定位机制有以下几种： 1. 静态定位...
CSS定位相关
06-21
### CSS定位相关知识点详解 #### 一、CSS定位概述 CSS定位是网页布局的一个核心概念，主要用于控制元素在页面中的位置。CSS提供了多种定位方式，包括`static`、`relative`、`absolute`和`fixed`等。这些定位方式...
css定位学习小结.md
02-24
*定位分为静态定位，绝对定位，相对定位，固定定位，粘性定位* （1）static 静态定位： position的默认值，默认文本流的状态。 不会识别left right top bottom指定的坐标 （2）absolute 绝对定位: a : ...
* { padding: 0; margin: 0; }是什么意思？
小宝
06-16 1005
所有的层之间都没有层边距，层与内容之间也没有内边距，即body  form  p  h1-h7  ul li  凡是默认有外边距和内边距的~~,全部把边距设为0 了,你就不用body{margin:0px;padding:0px;}这样一个一个的设了...
html padding的作用,*{margin: 0; padding: 0}的作用与利弊
weixin_35701696的博客
06-17 2708
*{margin: 0; padding: 0}的作用*{margin: 0; padding: 0}作用是Reset(重置)浏览器默认样式，对于各浏览器样式统一的话有着简单粗暴的效果。*{margin: 0; padding: 0}的作用与利弊这东西叫“通配符”用来匹配页面上所有元素。*{margin:0; padding:0;}代表了网页中所有元素，包括body ,ul, li列表标签 ,p,...
*{ Margin:0; Padding:0; }
yuanxu21的博客
03-16 608
*{ Margin:0; Padding:0; }作用是帮助你重置不同的浏览器默认样式，达到显示网页的结果不会差太远。
网页CSS中*{margin:0; padding:0;}有什么用
setsunadoudou的博客
09-10 1万+
* 这东西叫“通配符”用来匹配页面上所有元素。 *{margin:0; padding:0;} 像 2L 所说，body ,ul, li ,p,h1~h6,dd,dt 等……都有默认的margin ...
playwright css 定位
最新发布
07-19
对于CSS定位，它本身并不直接提供对CSS定位语法的支持，如`position`, `left`, `top`, `relative`, `absolute`, 或者`fixed`等。然而，当你通过Playwright控制浏览器元素（例如通过`page.$`或`page.selectElement`...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

鷇韩

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值