kuiini前端学习笔记（假期版）-CSDN博客

本文链接：https://blog.csdn.net/kuiini/article/details/135851567

CSS高级技巧

一、定位

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

实现：

定位模式：position
边偏移：设置盒子的位置

left
right
top
bottom

1、相对定位

position: relative

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 
            1. 改变位置的参照物是：自己原来的位置
            2. 原来的位置不脱标，继续占位
            3. 标签显示模式特点不变
        */
        div {
            position: relative;
            top: 100px;
            left: 200px;

        }
    </style>
</head>
<body>
    <p>Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。</p>
    <p>Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。</p>
    <div><img src="./images/vue1.jpg" alt=""></div>
    <p>Vue由Evan You创建，于2014年发布。Vue使用model-view-viewmodel （MVVM）体系结构。 Evan You之前在Google研究过AngularJS，并提取了Angular的部分特性以提供一个更轻量级的框架。</p>
    <p>Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，核心库只关注视图层。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
</body>
</html>

效果：
在这里插入图片描述

2、绝对定位

position: absolute

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
        * {
            margin: 0;
        }
        img {
            width: 400px;
        }
        .news {
            position: relative;
            margin: 100px auto;
            width: 400px;
            height: 340px;
            background-color: #f8f8f8;
        }
        /* 
            1. 脱标：不占位
            2. 绝对定位的参照物：先找最近地已经定位的祖先元素；如果所有祖先元素都没有定位，参照浏览器窗口改变位置
            3. 绝对定位的盒子显示模式的特点改变：宽高生效（具备了行内块的特点）
        */
        .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>
    <div class="news">
        <img src="./images/news1.jpg" alt="">
        <span>展会活动</span>
        <h4>2020世界移动大会</h4>
    </div>
</body>
</html>

效果：
在这里插入图片描述

3、定位居中

实现步骤：

绝对定位
水平、垂直偏移为 50%
子级向左、上移动自身尺寸的一半

左、上的外边距为 - 尺寸的一半
transform: translate(-50%, -50%)

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -230px;
            margin-top: -110px; */
                /* 50% 就是自己宽高的一半 */
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <img src="./images/login.png" alt="">
</body>
</html>

效果：
在这里插入图片描述

4、固定定位

position: fixed

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 
            1. 脱标，不占位
            2. 改变位置的参照物：浏览器窗口
            3. 显示模式特点：具备行内块特点
        */
        div {
            position: fixed;
            top: 0;
            right: 0;
            width: 500px;
        }
    </style>
</head>
<body>
    <p>Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。</p>
    <p>Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建，是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web应用的场景，并且几乎不需要手动优化，并且Vue完全有能力处理大规模的应用。</p>
    <div><img src="./images/vue1.jpg" alt=""></div>
    <p>Vue由Evan You创建，于2014年发布。Vue使用model-view-viewmodel （MVVM）体系结构。 Evan You之前在Google研究过AngularJS，并提取了Angular的部分特性以提供一个更轻量级的框架。</p>
    <p>Vue.js是一套构建用户界面的渐进式框架，采用自底向上增量开发的设计，核心库只关注视图层。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。</p>
	...
</body>
</html>

效果：
在这里插入图片描述

5、堆叠层级 z-index

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

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

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           position: absolute;
           width: 200px;
           height: 200px;
       }
       .box1 {
           background-color: pink;
           /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
           z-index: 1;
       }
       .box2 {
           background-color: skyblue;
           left: 100px;
           top: 100px;
           /* z-index: 2; */
       }
   </style>
</head>
<body>
   <div class="box1">box1</div>
   <div class="box2">box2</div>
</body>
</html>

效果：
在这里插入图片描述

6、总结

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

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

二、CSS 精灵

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

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

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同
设置盒子背景图为精灵图
添加 background-position 属性，改变背景图位置
使用 PxCook 测量小图片左上角坐标
取负数坐标为 background-position 属性值（想左上移动图片位置的距离）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           width: 128px;
           height: 128px;
           background-color: pink;
           background-image: url(./images/characters.jpg);
           background-position: -260px -260px;
       }
   </style>
</head>
<body>
   <div></div>
</body>
</html>

效果：
在这里插入图片描述

三、字体图标

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点：

灵活性：灵活地修改样式，例如：尺寸、颜色等1、
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器
使用方便：先下载再使用

1、下载字体

iconfont 图标库：https://www.iconfont.cn/
下载字体
登录 → 素材库 → 官方图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地

2、使用字体

引入字体样式表（iconfont.css)
标签使用字体图标类名
1. iconfont：字体图标基本样式（字体名，字体大小等等）
2. icon-xxx：图标对应的类名
<span class="iconfont icon-xxx"></span>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* 如果要调整字体大小，注意：选择器的优先级 要高于 iconfont 类 */
        .iconfont {
            font-size: 200px;
            color: orange;
        }
    </style>
</head>
<body>
    <span class="iconfont icon-aixin"></span>
</body>
</html>

效果：
在这里插入图片描述

3、上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体。

四、垂直对齐方式

属性名：vertical-align

属性值：

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

示例:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       div {
           border: 1px solid #000;
       }
       img {
           vertical-align: middle;
               /* 顶对齐：最高内容得顶部 */
           /* vertical-align: top; */
               /* 底对齐:最高内容的底部 */
           /* vertical-align: bottom; */
               /* 因为浏览器把行内块和行内标签当作文字处理,默认按基线对齐 */
               /* 效果:图片img的底下有空白,转块级不按基线对齐,空白消失 */
           /* display: block; */
       }
   </style>
</head>
<body>
   <div>
       <img src="./images/纸盒人2.jpg" alt="">
       我是谁？我在哪？
   </div>
</body>
</html>

效果:
在这里插入图片描述

五、过渡属性

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

属性名：transition（符合属性）

属性值：过渡的属性花费时间（s）

提示：

过度的属性可以是具体的 CSS 属性
也可以为 all（两个状态属性值不同的所有属性，都产生过渡效果）
transition 设置给元素本身
img {
    width: 200px;
    height: 200px;
    transition: all 1s;
}
img:hover {
    width: 500px;
    height: 500px;
}

六、修饰属性

1、透明度 opacity

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

属性名：opacity

属性值：0 - 1

0：完全透明（元素不可见）
1：不透明
0-1之间小数：半透明

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            background-color: orange;
            /* opacity: 0;
            opacity: 1; */
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div>
        <img src="./images/phone.jpg" alt="">
    </div>
</body>
</html>

效果：
在这里插入图片描述

2、光标属性 cursor

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

属性名：cursor

属性值：

属性值	效果
default	默认值，通常是箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* cursor: pointer;
            cursor: text; */
            cursor: move;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>