Day08：CSS高级-凯尤木江博客圈

csdn推荐

目标：掌握定位的作用及特点；掌握 CSS 高级技巧

一、定位

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

实现：

1.定位模式：position

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

水平方向偏移：left、right，垂直方向偏移：top、bottom

1、相对定位

position: relative

特点：

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

因为相对定位不脱标，即使自己发生了偏移，还占用自己原来的位置，后面的元素没办法顶上去，会留下一片空白，所以实际开发中很少单独使用相对定位，经常配合着绝对定位一起使用。

2、绝对定位

position: absolute

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

特点：

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

练习：使用绝对定位，实现图片在浏览器居中定位。

实现步骤：

设置元素绝对定位，没有最近的祖先元素设置定位属性，则该元素的绝对定位相对于浏览器可视窗口改变位置；水平、垂直边偏移为 50%，此时图片的左上角正好在浏览器的中心位置，需要向左、向上偏移，使图片中心移动到浏览器可视窗口的中心；子级向左、向上移动自身尺寸的一半。

代码如下：

<head>
  <style>
    img {
      /* 子级设置为绝对定位，没有父级，相对浏览器可视区域改变位置 */
      position: absolute;
      left: 50%;
      top: 50%;
      /* 设置 margin-left: -宽度的一半，margin-top: -高度的一半 */
      /* margin-left: -265px;
      margin-top: -127px; */
      /* 方便：50% 就是自己宽高的一半 */
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <img src="./images/login.webp" alt="">
</body>

3、固定定位

position: fixed

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

特点：

div {
  position: fixed;
  top: 0;
  right: 0;
  background-color: blue;
  width: 500px;
  height: 200px
}

二、堆叠层级 z-index

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

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

属性名：z-index

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

<head>
  <style>
    div {
      position: absolute;
      width: 200px;
      height: 200px;
    }
    .box1 {
      background-color: pink;
      /* 取值是整数，默认是0，取值越大显示顺序越靠上 */
      z-index: 3;
    }
    .box2 {
      background-color: skyblue;
      left: 100px;
      top: 100px;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</body>

三、CSS 高级 1、精灵图

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

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

实现步骤：

创建盒子，盒子尺寸与小图尺寸相同设置盒子背景图为精灵图添加 background-position 属性，改变背景图位置

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

3.2 取负数坐标为 background-position 属性值（因为3.1量出来图片左上角的坐标，要向左、向上移动精灵图，才能使要显示的部分移动到盒子的位置）

<head>
  <style>
    div {
      width: 112px;
      height: 110px;
      background-color: pink;
      background-image: url(./images/abcd.jpg);
      background-position: -256px -276px;
    }
  </style>
</head>
<body>
  <div></div>
</body>

2、字体图标

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

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

优点

（1）下载字体图标

国内免费的字体图标网站：iconfont 阿里巴巴矢量图标库

流程：登录 → 寻找图标 → 加入购物车 → 购物车，添加至项目，确定 → 下载至本地

（2）使用字体图标

下载解压的文件如下：

流程：

将下载好的字体图标文件全部拖到项目中；在 html 中引入字体样式表 iconfont.css ；标签使用字体图标类名; 如果要修改字体图标样式，至少要使用类选择器进行修改，不能使用标签选择器，因为在 iconfont.css 中已经使用了 .iconfont {} 类选择器，至少要使用类选择器修改字体图标样式才能覆盖生效。

<head>
  <style>
    .iconfont {
      font-size: 200px;
      color: red;
    }
    /* 通过字体图标的名称作为类选择器修改样式 */
    .icon-icon-test1 {
      color: green;
    }
    /* 自定义一个类选择器，修改图标样式 */
    .myClass {
      font-size: 100px;
      color: palevioletred;
    }
  </style>
</head>
<body>
  <span class="iconfont icon-icon-test2"></span>
  <span class="iconfont icon-icon-test1"></span>
  <span class="iconfont myClass icon-icon-test3"></span>
</body>

（3）上传矢量图

作用：项目特有的图标上传到 iconfont 图标库，生成字体，再按照（2）步骤下载使用。（需要上传的图标需要是 svg 的格式）。

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

四、CSS 修饰属性 1、垂直对齐方式（1）基线

在行内和行内块元素中，一行的元素默认是基线对齐，图片是行内块元素，默认也是基线对齐。

（1）当一行只有图片一个元素时，图片底部为什么会有留白。

（2）当一行有图片和文字时，图片和文字为什么没有居中对齐。

通过这个图，可以很清楚的了解到为什么会出现（1）（2）问题，因为浏览器在处理行内、行内块元素时，会使用基线对齐的方式，图片的底部和文字的基线对齐，这就是为什么会出现（2）问题。图片的底部为什么会留白，因为有的字母下面会超过基线，比如图片中的p字母，所以浏览器会给基线下面留出一些空白间距，图片是行内块元素，所以浏览器也会给图片下面流出一些空白间距。

（2）对齐方式

属性名：vertical-align

属性值效果

baseline

基线对齐（默认）

top

顶部对齐

middel

居中对齐

bottom

底部对齐

<head>
  <style>
    div {
      border: 1px solid #000;
    }
    img {
      /* 居中对齐 */
      vertical-align: middle;
      /* 顶对齐：最高内容的顶部 */
      /* vertical-align: top; */
      /* 底对齐：最高内容的底部 */
      /* vertical-align: bottom; */
      /* 因为浏览器把行内块、行内标签当做文字处理，默认按基线对齐 */
      /* 效果：图片img的底下有空白，转块级不按基线对齐，空白就消失了 */
      /* display: inline-block; */
    }
  </style>
</head>
<body>
  <div>
    <img src="./images/1.webp" alt="">
    <span>我是谁？我在哪？</span>
  </div>
</body>

居中对齐属性要添加到比较大的元素身上。

只要不是默认的基线对齐方式，图片的底部就没有留白，bottom 对齐方式，图片底部也没有留白。

如果一行只有图片这一个元素，可以给图片转换显示模式：display: block; 也可以去除底部留白。

2、过渡

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

属性名：transition（复合属性）

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

提示：


  
    img {
      width: 200px;
      height: 150px;
      transition: all 1s;
    }
    img:hover {
      width: 500px;
      height: 400px;
    }
  


  "./images/huawei.jpg" alt="">

3、透明度 opacity

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

属性名：opacity

属性值：0 – 1

4、光标类型cursor

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

属性名：cursor

属性值效果

default

默认值，通常是箭头

pointer

小手效果，提示用户可以点击

text

工字型，提示用户可以选择文字

move

十字光标，提示用户可以移动

只是改变了鼠标的样式，具体效果还需要配合 js 来实现。

乾坤未定，你我皆是黑马

文章来源:https://blog.csdn.net/EmulateStep/article/details/139246390

微信扫描下方的二维码阅读本文

1 本网站名称：凯尤木江博客圈
2 本站永久网址：blog.kaynak.top
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

未分类
# 效果 # 字体 # 图标 # 对齐 # 底部

Day08：CSS高级

【大模型】Ollama+open-webui/Anything LLM部署本地大模型构建RAG个人知识库教程（Mac）

WordPress的子比zibll添加判断文章是否被百度收录,图文教程，本站亲测可用

在侧边栏添加一个动态时钟

Git 完整操作之记录

在gitlab CICD中小试 hooks:pre_get_sources_script 功能