CSS（五）

CSS（五）

一、定位

灵活的改变盒子在网页中的位置，可以实现将两个标签的内容压在一起。

如下图：箭头和轮播图在一起

定位的实现

1. 定位模式：position

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

   • left
   • right
   • top
   • bottom

   属性值：数字+px

相对定位

position:relative

relative改变位置的参照物是自己原来的位置。

• 属性top、right、left、bottom的值的大小是表示原来的位置到改变后位置的距离。（有点类似于margin）

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

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

• 不脱标，占位，原来的位置不会被替代
• 盒子的显示模式不会被改变

注意：相对定位不会改变原来标签的宽高，相当于多加了长（宽）度，但不被标签包含在内

• 工作当中一般不会单独使用relative，与其他配合使用

绝对定位

position:absolute;

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

子级的边偏移参照物是父级。

子级偏移不会超出父级的宽高范围。

若是父级没有加上relative定位，则按照再往上的第一个有定位的父级去改位置。

特点：

• 脱标，不占位
• 盒子显示模式会发生改变，宽高生效（行内块）

技巧：定位居中

1、绝对定位

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

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

两种方法：

• 左、上的外边距为 (-1)*尺寸的一半
• transform:translate(-50%,50%) ——更方便，不用自己计算尺寸

1.2步骤做完后，只是盒子的左上角居于中间

固定定位

让盒子固定位置，内容滚动，盒子位置不变。

效果有点类似于excel里面可以固定某一行，让其位置不随滚动条改变。

position:fixed

特点：

• 脱标，不占位置
• 行内块的显示模式特点，加宽高生效
• 边偏移参照物是浏览器窗口

二、堆叠顺序

属性：z-index

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

取值：整数 （0 ~ ？？？），取值越大显示顺序越靠上

默认效果：给多个标签加定位后，按照标签书写顺序，后来者居上。

因为学了定位让多个盒子压在一起，所以再学堆叠顺序。

三、技巧：CSS精灵

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

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

实现步骤：

1、创建盒子，盒子尺寸与小图尺寸相同（就是你要用的小图的尺寸用了之后是盒子大小）

2、添加盒子背景图为精灵图

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

• 用PxCook测量小图片左上角坐标位置（a点）
• 取负数坐标为属性值（向左上移动图片位置）

四、字体图标

字体图标

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

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

优点

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

改变字体大小时，选择器优先级要高于iconfont类

下载字体

iconfont 图标库：https://www.iconfont.cn/

登录 → 素材库 → 官方图标库 → 进入图标库 → 选图标，加入购物车 → 购物车，添加至项目，确定 → 下载至本地

使用字体

1. 引入字体样式表（iconfont.css）

2. 标签使用字体图标类名
   • iconfont：字体图标基本样式（字体名，字体大小等等）
   • icon-xxx：图标对应的类名

上传矢量图

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

上传步骤：上传 → 上传图标 → 选择 svg 矢量图，打开 → 提交 → 系统审核

五、CSS修饰属性

垂直对齐方式

属性：vertical-align

属性值：

• baseline 基线对齐（默认）
• top 顶部对齐
• middle 居中对齐
• bottom 底部对齐

基线对齐底下有小空白（margin），其他属性值没有。

行内块和行内标签都会被当作文字处理，默认基线对齐。

过渡

属性：transition

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

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

• 过渡属性可以是具体的CSS属性，也可以为all
• all指的是两个状态属性值不同的所有属性都产生过渡效果
• transition要设置给元素本身

透明度

属性：opacity

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

属性值： 0 [完全透明] ~ 1 [不透明]

光标类型

属性：cursor

作用：改变鼠标悬停时的鼠标样式

属性值：

• default 箭头
• pointer 小手
• text 工字型
• move 十字光标
• all指的是两个状态属性值不同的所有属性都产生过渡效果
• transition要设置给元素本身

透明度

属性：opacity

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

属性值： 0 [完全透明] ~ 1 [不透明]

光标类型

属性：cursor

作用：改变鼠标悬停时的鼠标样式

属性值：

• default 箭头
• pointer 小手
• text 工字型
• move 十字光标