css定位+精灵图+过渡

G24gg

已于 2024-05-16 09:21:46 修改

阅读量806

点赞数 20

分类专栏： html+css 文章标签： css 前端

于 2024-05-11 06:41:41 首次发布

本文链接：https://blog.csdn.net/G24gg/article/details/138694451

版权

html+css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、定位

在CSS中，定位（Positioning）是一种布局技术，用于控制HTML元素在页面上的确切位置。CSS提供了几种不同的定位方案，每种方案都有其特定的用途和行为。以下是CSS中几种主要的定位方法：

静态定位（Static Positioning）:
- 默认定位方案，元素按照正常的文档流进行布局。
- position: static;（默认值）
相对定位（Relative Positioning）:
- 元素先按照正常布局放置，然后相对于其在文档流中的原始位置进行偏移。
- position: relative;
- 使用top, right, bottom, left属性进行偏移。
绝对定位（Absolute Positioning）:
- 元素从文档流中完全移除，不再占据原来的空间。
- position: absolute;
- 元素会相对于其最近的非静态定位的祖先元素进行定位。如果没有这样的祖先元素，则相对于<html>元素（即页面的根元素）。
固定定位（Fixed Positioning）:
- 类似于绝对定位，但元素会相对于浏览器窗口进行定位，即使页面滚动也不会移动。
- position: fixed;
- 使用top, right, bottom, left属性确定元素在视口中的位置。
粘性定位（Sticky Positioning）:
- 结合了相对定位和固定定位的特点。元素在跨越一个阈值前为相对定位，在跨越之后为固定定位。
- position: sticky;
- 使用top, right, bottom, left属性确定阈值。

每种定位方式都有其用途：

静态定位通常用于常规布局。
相对定位常用于需要对元素进行小幅度偏移的场景。
绝对定位适用于创建脱离文档流的布局，如侧边栏或下拉菜单。
固定定位常用于创建始终显示在屏幕上的元素，如页脚或返回顶部按钮。
粘性定位适用于创建在用户滚动页面时粘附在视口顶部的元素，如表头或导航栏。

以下是一些定位属性的使用示例：

.static {
  position: static;
}

.relative {
  position: relative;
  top: 20px;
  left: 30px;
}

.absolute {
  position: absolute;
  top: 50px;
  right: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.sticky {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 0; /* 当滚动到这个阈值时，元素将固定在视口顶部 */
}

使用定位时，需要注意以下几点：

定位元素的层叠上下文（stacking context）可能会改变，这可能影响元素的层叠顺序。
绝对定位和固定定位的元素会从文档流中移除，可能需要额外的布局调整来填补它们原本占据的空间。
粘性定位在不支持的浏览器中会回退到相对定位。
定位属性的偏移量不会影响文档流中的其他元素。
配合使用

居中

一、

二、

固定定位（Fixed Positioning

总结

二、css精灵

CSS精灵（CSS Sprites）是一种网页设计技术，用于减少网页加载时的HTTP请求次数。通过将多个图像（如图标、小装饰图片等）合并成一个较大的图像（精灵图），然后使用CSS的background-image和background-position属性来显示需要的图像部分。这种方法可以显著提高网页的加载速度，尤其是在低速网络连接下。

以下是使用CSS精灵的步骤：

创建精灵图：将多个小图像合并成一张较大的图像。确保图像之间有足够的空间，以便在CSS中定位。
定义CSS规则：为需要显示精灵图中特定部分的元素定义CSS规则。

.sprite {
  display: inline-block;
  background: url('path/to/spritesheet.png') no-repeat;
}

.icon-home {
  width: 16px; /* 图标宽度 */
  height: 16px; /* 图标高度 */
  background-position: 0 0; /* 图标在精灵图中的起始位置 */
}

.icon-about {
  width: 16px;
  height: 16px;
  background-position: -16px 0; /* 相对于精灵图左上角的位置 */
}

/* 可以继续添加更多的 .icon-* 类 */

应用到HTML元素：将相应的类应用到HTML元素上。

<div class="sprite icon-home"></div>
<div class="sprite icon-about"></div>

在上述CSS代码中，.sprite类定义了精灵图的路径和不重复的背景（no-repeat），而.icon-home和.icon-about类则定义了各自图标的尺寸和在精灵图中的位置。

使用CSS精灵的好处包括：

减少HTTP请求：合并多个图像到一个图像可以减少服务器请求的次数，这有助于加快网页的加载速度。
减少服务器负载：由于请求次数减少，服务器的负载也会相应减轻。
易于维护：所有的图标和装饰图像都集中在一个文件中，使得管理和更新更加方便。

然而，CSS精灵也有一些局限性和缺点：

更新不便：如果需要更新精灵图中的一个图像，可能需要重新创建整个精灵图并更新所有引用该图的地方。
内存使用：即使只使用精灵图中的一小部分，整个图像也会被加载到内存中，这可能会增加内存的使用。
布局限制：使用精灵技术可能会限制设计师在布局上的灵活性。

尽管如此，对于包含许多小图像的网页，CSS精灵仍然是一个有用的性能优化技术。

三、字体图标

阿里巴巴图标网

过渡效果transition

透明度opacity

cursor光标

G24gg

关注

20
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
css定位+精灵图+过渡

在CSS中，定位（Positioning）是一种布局技术，用于控制HTML元素在页面上的确切位置。CSS提供了几种不同的定位方案，每种方案都有其特定的用途和行为。以下是CSS中几种主要的定位方法：
复制链接

扫一扫