Cherish's Notebook
切换到深色模式
菜单
Wiki--浏览次数--访问次数--跳出率--平均停留

Html和CSS学习

自己正经开始学编程的第一门语言！

12. 显示隐藏与图形资源

12.1 元素的显示和隐藏

  • 目的:让一个元素在页面中消失或者显示出来
  • 场景:类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现！

12.1.1 display 显示

  1. display 设置或检索对象是否及如何显示
  • display: none;隐藏对象
  • display: block; 除了转换为块级元素之外，同时还有显示元素的意思
  1. 特点： display 隐藏元素后， 不再占 有原来的位置
  2. 在js中使用非常的广泛

12.1.2 visibility可见性

  1. visibility 属性用于指定一个元素应可见还是隐藏
  • visibility： visible；元素可见
  • visibility：hidden；元素隐藏
  1. 如果隐藏元素想要原来位置， 就用 visibility：hidden；
  2. 如果隐藏元素不想要原来位置， 就用 display：none； (用处更多）
  3. 隐藏后继续占有原有位置

12.1.3 overflow溢出

  • overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度） 时，会发生什么
属性值描述
visible不剪切内容也不添加滚动条，默认的，溢出的也显示出来，写不写overflow:hidden；是都显示溢出的文字的
hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll不管超出内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条
  • 一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局
  • 但是如果有定位的盒子， 请慎用overflow:hidden； 因为它会隐藏多余的部分，如果对父盒子使用overflow:hidden;的话，那子盒子使用绝对定位时如果多出去一块，则会造成子盒子一部分不显示（就是有时候可能小盒子有一部分是在大盒子外边的，使用overflow:hidden后超出大盒子的就不再显示，会导致小盒子显示不全，所以这时候就不能加overflow:hidden）

12.1.4 案例收获

问题：没做出来动态效果，使用hover没实现

收获：在做这类效果的时候，不要再盒子里再放盒子了，可以直接使用背景background来做中间的播放按钮，把它放在阴影盒子中就欧克，其次在使用hover时，做成滚动到大盒子时，阴影盒子显示

CODE
/* 静态定位（默认） */
.static { position: static; }
/* 相对定位 */
.relative { position: relative; }
/* 绝对定位 */
.absolute { position: absolute; }
/* 固定定位 */
.fixed { position: fixed; }
/* 粘性定位 */
.sticky { position: sticky; }

完整代码：

CODE
/* 静态定位（默认） */
.static { position: static; }
/* 相对定位 */
.relative { position: relative; }
/* 绝对定位 */
.absolute { position: absolute; }
/* 固定定位 */
.fixed { position: fixed; }
/* 粘性定位 */
.sticky { position: sticky; }

分布思路重点详解：

CODE
/* 静态定位（默认） */
.static { position: static; }
/* 相对定位 */
.relative { position: relative; }
/* 绝对定位 */
.absolute { position: absolute; }
/* 固定定位 */
.fixed { position: fixed; }
/* 粘性定位 */
.sticky { position: sticky; }

图片太大，盒子太小，此时需要修改图片的大小

CODE
<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

制造遮罩层

CODE
<img src="images/pic.jpg" alt="描述文字" title="悬停提示">

此时是这样的为标准流

还要子绝父相，不然子盒子会以浏览器为准，不以盒子为准

中间播放按钮作为背景展示就可以，不用再加盒子了

让他在中间，用center(background-position)

将需要变的尽可能放到一个盒子中

放大盒子上内部盒子发生变化

CODE
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
}

当鼠标放到使用tudou这个类选择器盒子上时，使用mask类选择器的盒子会显现内容

12.2 精灵图

12.2.1 理解

  1. 目的： 为了有效地减少服务器接收和发送请求的次数 ， 提高 页面的 加载速度 ，出现了 CSS 精灵技术 （也称 CSS Sprites、CSS 雪碧），将网页中的一些小背景图像整合到一张大图中 ，这样服务器只需一次请求就可以了
  2. 使用精灵图核心：
      ①精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中
      ②这个大图片也称为 sprites 精灵图 或者 雪碧图
      ③移动背景图片位置， 此时可以使用 background-position
      ④移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同
      ⑤因为一般情况下都是往上往左移动，所以数值是负值
      ⑥使用精灵图的时候需要精确测量，每个小背景图片的大小和位置

12.2.2 扒图

CODE
<img style="max-width:100%" src="/images/feishu/assets/2024-10-10-Html和CSS学习-065.png">

12.2.3 精灵图的实现

打开FW软件，使用切片命令，将想实现精灵图的位置进行切片操作，然后下方会出现坐标

CODE
/* 精灵图使用：通过 background-position 定位 */
.icon {
  width: 20px;
  height: 20px;
  background: url(sprites.png) no-repeat;
  background-position: -10px -20px;
}

在前端中坐标轴的正方向是右和下

12.3 字体图标

12.3.1 字体图标与精灵图的对比

字体图标使用场景： 主要用于显示网页中通用、常用的一些小图标。

精灵图是有诸多优点的，但是缺点很明显。

1.图片文件还是比较大的。

2.图片本身放大和缩小会失真。

3.一旦图片制作完毕想要更换非常复杂。

此时，有一种技术的出现很好的解决了以上问题，就是 字体图标 iconfont 。

字体图标 可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体。

12.3.2 字体图标的优点

  • 轻量级 ：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
  • 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
  • 兼容性：几乎支持所有的浏览器，请放心使用
  • 注意： 字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化
  • 样式结构比较简单，样式比较复杂的小图片的话还是得用精灵图来进行做

12.3.3 字体库下载网站

进去之后点icomoon app

可以对其编辑：

生成字体：

下载：

12.3.4 字体图标的引入

  1. 把下载包里面的 fonts 文件夹放入页面根目录下
  1. 字体文件格式
格式特点
.ttfttf字体是Windows和Mac的最常见的字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+
.woffwoff字体，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+
.eoteot字体是IE专用字体，支持这种字体的浏览器有IE4+
svgsvg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+
  1. 在 CSS 样式中全局声明字体： 简单理解把这些字体文件通过css引入到我们页面中
CODE
/* 引入字体图标 */
@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot');
  src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
       url('fonts/icomoon.woff') format('woff'),
       url('fonts/icomoon.ttf') format('truetype'),
       url('fonts/icomoon.svg#icomoon') format('svg');
}
.icon {
  font-family: 'icomoon';
  font-style: normal;
}

字体声明也可以在下载的字体文件中找到style.css中复制，也可以复制上边的内容

  1. 添加字体

复制：

还有谁需要就把声明加在谁那里一份 font-family:'icomoon'

  1. 代码展示：
CODE
/* 引入字体图标 */
@font-face {
  font-family: 'icomoon';
  src: url('fonts/icomoon.eot');
  src: url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
       url('fonts/icomoon.woff') format('woff'),
       url('fonts/icomoon.ttf') format('truetype'),
       url('fonts/icomoon.svg#icomoon') format('svg');
}
.icon {
  font-family: 'icomoon';
  font-style: normal;
}

更加细节展示：

  1. html 标签内添加小图标
  1. 给标签定义字体
CODE
<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>

注意：务必保证 这个字体和上面@font-face里面的字体保持一致

12.3.5 字体图标的追加

如果工作中，原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中

把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可

打开网站，点下方：

点yes重新加载

然后重复之前的操作就可以实现了

下载最新的文件夹，原来的文件夹可以是删除了！

12.3.6 字体图标的加载原理