当前位置： 首页 > news >正文

元素的显示与隐藏，精灵图，字体图标，CSSC三角

news 2025/6/17 14:16:13

元素的显示与隐藏

类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现

本质：让元素在页面中隐藏或者显示出来。

1.display显示隐藏

2.visibility显示隐藏

3.overflow溢出显示隐藏

 1.display属性（重点）

display属性用于设置一个元素应该如何显示。

  • display：none ;隐藏对象
  • display：block；除了转换为块级元素之外，同时还有显示元素的意思

display隐藏元素后，不再占有原来的位置 

后面应用极其广泛，搭配js可以做很多的网页特效。

2.visibility可见性

visibility属性用于一个元素应可见还是隐藏。

本质：让一个元素在页面中隐藏或者显示出来。

  • visibility:visible;元素可视
  • visibility:hidden；元素隐藏 

visibility隐藏元素后，继续占有原来的位置。 

如果隐藏元素想要原来位置，就用visibility:hidden

如果隐藏元素不想要原来位置，就用display：none；（用处更多  重点） 

3.overflow溢出

overflow属性制定了如果内容溢出一个元素的框（超过其指定高度和宽度 ）时，会发生什么 。

属性描述
visible不剪切内容也不添加滚动条
hidden不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll不管超出内容否，总是显示滚动条
auto超出自动显示滚动条，不超出不显示滚动条

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用overflow：hidden因为它会隐藏多余的部分。 

.mask {
隐藏遮罩层display: none;position: absolute;子绝父相top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.4)  url(images/arr.png) no-repeat  center;
.tudou:hover .mask {display: block;
当我们鼠标经过了土豆这个盒子，就让里面遮罩层显示出来*/

精灵图

1.1为什么需要精灵图

一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁的接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。

因此，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、CSS雪碧）。

 核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。

1.2精灵图（sprites)的使用

使用精灵图核心

  1. 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。
  2. 这个大图片也称为sprites精灵图或者雪碧图
  3. 移动背景图片位置，此时可以使用background-position。
  4. 移动的距离就是这个目标图片的x和y坐标。注意网页中的坐标有所不同。
  5. 因为一般情况下都是往上往左移动，所以数值是负值。
  6. 使用精灵图的时候需要精确测量，每个小背景图片的大小和位置。

 使用精灵图的核心总结：

  1. 精灵图主要针对于小的背景图片使用。
  2. 主要借助于背景位置来实现---background-position。
  3. 一般情况下精灵图都是负值。（千万注意网页中的坐标：x轴右边走是正值，左边走是负值，y轴同理。

 

字体图标

2.1.字体图标的产生

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

精灵图有很多优点，但缺点也很明显

  1. 图片文件还是比较大的
  2. 图片本身放大和缩小会失真。
  3. 一旦图片制作完毕想要更换非常复杂。

此时，字体图标技术的出现很好地解决了以上问题。

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

2.2字体图标的优点

  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。
  • 灵活性：本质其实是文字，可以随意地改变颜色、产生阴影、透明效果、旋转等
  • 兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

总结：

  1. 如果遇到一些结构和样式比较简单的小图标，就用字体图标。
  2.  如果遇到一些结构和样式比较复杂的小图标，就用精灵图。

2.3字体图标的下载

推荐下载网站：

icomoon字库 http://icomoon.io

阿里iconfont字库 http://www.iconfont.cn/

 2.4.1字体文件格式

不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。

 2.4字体图标的引入

在CSS样式中全局声明字体：简单理解吧这些字体文件通过CSS引入到我们的页面中。

一定注意字体文件路径的问题。

@font-face {

        font-family:'icomoon';

        src: url('fonts/icomoon.eot?7kkyc2');

       

 

3.html标签内添加小图标。

<span> </span> 

 2.5字体图标的追加

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

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

网页中常见一些三角形，使用CSS直接画出来就可以，不必做成图片或者字体图标。

 <style>.div {width: 0;height: 0;line-height: 0;font-size: 0;border: 50px solid transparent;border-left-color: pink;}</style></head>
<body><div></div>

CSS用户界面样式

 4.1鼠标样式 cursor

li {cursor: pointer;}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

属性值描述
default小白 默认
pointer小手
move移动
text文本
not-allowed禁止

4.2轮廓线outline 

给表单添加outline 0；或者outline： none；样式之后，就可以去掉默认的蓝色边框。

input {outline: none;} 

 4.3防止拖拽文本域resize

实际开发中，我们文本域右下角不可以拖拽的。

textarea{ resize: none;}

5.vertical-align属性应用

CSS的vertical-align属性使用场景：经常用于设置图片或者表单（行内块元素）和二位女子垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

vertical-align: baseline |top |middle| bottom  

值描述
baseline默认。元素放置在父元素的基线上
top把元素的顶端于行中最高元素的顶端对齐
middle把此元素放置在父元素的中部
bottom把元素的顶端于行中最低元素的顶端对齐

 5.1图片、表单和文字对齐

图片、表单都属于行内块元素，默认的vertical-align是基线对齐。

此时可以图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图片垂直居中对齐了。

5.2解决图片底部默认空白缝隙问题

bug：图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

主要解决方法有两种：

1.给图片添加vertical-align：middle|top|bottom等

2.把图片转换为块级元素display:block;

6.溢出的文字省略号显示

1.单行文本溢出显示省略号

必须满足三个条件

1.先强制一行内显示文本

white-space：nowrap（默认normal自动换行）

2.超出的部分隐藏

overflow：hidden； 

3.文字用省略号替代超出的部分

text-overflow :ellipsis;

2.多行文本溢出显示省略号

多行文本溢出显示省略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webKit内核）

<style>div {width: 150px;height: 65px;background-color: pink;margin: 100px auto;overflow: hidden;/*文字溢出时，用省略号来显示*/text-overflow: ellipsis;/*弹性伸缩盒子模型展示*/display: -webkit-box;/*限制在一个块元素显示的文本的行数*/-webkit-line-clamp: 3;/*设置或检索伸缩盒对象的子元素的排列方式*/-webkit-box-orient: vertical;}</style>
</head>
<body><div>啥也不说，此处省略一万字侯明昊真好看你也好看大家都好看啥也不说，此处省略一万字侯明昊真好看你也好看大家都好看</div>
</body>
</html>

7.常见布局技巧

1.margin负值运用

1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框

2.鼠标经过某个盒子的时候，提高当前盒子的层级即可（如果没有定位，则加相对定位（保留位置），如果有定位，则加z-index） 

css三角钱强化

        width: 0;height: 0;border-color: transparent red transparent transparent;border-style: solid;border-width: 100px 50px 0 0;

 <style>.box {width: 0;height: 0;/* border-top: 100px solid transparent;border-right: 50px solid red;border-bottom: 0 solid blue;border-left: 0 solid green;*/border-color: transparent red transparent transparent;border-style: solid;border-width: 100px 50px 0 0;}.price {width: 160px;height: 24px;line-height: 24px;border: 1px solid red;margin: 0 auto;}.miaosha {position: relative;float: left;width: 90px;height: 100%;background-color: red;text-align: center;color: #fff;font-size: 700;}.miaosha i {position: absolute;right: 0;top: 0;width: 0;height: 0;border-color: transparent #fff transparent transparent;border-style: solid;border-width: 24px 15px 0 0;}.origin {font-size: 12px;color: gray;text-decoration: line-through;}</style></head>
<body><div class="box"></div><div class="price"><span class="miaosha">$1650<i></i></span><span class="origin">$5650</span></div>
</body>
</html>

CSS初始化

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，照顾浏览器的兼容，我们需要对CSS初始化。

简单理解：CSS初始化是指重设浏览器的样式。

每个网页都必须首先进行CSS初始化。

Unicode编码字体：

把中文字体的名称用相应的Unicode编码来代替，这样就可以有效避免浏览器解释CSS代码时候出现乱码的问题。 

相关文章：

元素的显示与隐藏，精灵图，字体图标，CSSC三角

元素的显示与隐藏 类似网站广告&#xff0c;当我们点击关闭就不见了&#xff0c;但是我们重新刷新页面&#xff0c;会重新出现 本质&#xff1a;让元素在页面中隐藏或者显示出来。 1.display显示隐藏 2.visibility显示隐藏 3.overflow溢出显示隐藏 1.display属性&#xff08;…...

编程日记 2024/2/3 14:09:58

最新！2024顶级SCI优化！TTAO-CNN-BiGRU-MSA三角拓扑聚合优化、双向GRU融合注意力的多变量回归预测程序！

适用平台&#xff1a;Matlab 2023版及以上 TTOA三角聚合优化算法&#xff0c;将在2024年3月正式发表在中科院1区顶级SCI期刊《Expert Systems with Applications》上。 该算法提出时间极短&#xff0c;目前以及近期内不会有套用这个算法的文献。新年伊始&#xff0c;尽快拿下…...

编程日记 2024/2/3 14:08:57

Flink SQL Client 安装各类 Connector、组件的方法汇总（持续更新中....）

一般来说&#xff0c;在 Flink SQL Client 中使用各种 Connector 只需要该 Connector 及其依赖 Jar 包部署到 ${FLINK_HOME}/lib 下即可。但是对于某些特定的平台&#xff0c;如果 AWS EMR、Cloudera CDP 等产品会有所不同&#xff0c;主要是它们中的某些 Jar 包可能被改写过&a…...

编程日记 2024/2/3 14:06:56

React18-模拟列表数据实现基础表格功能

文章目录 分页功能分页组件有两种接口参数分页类型用户列表参数类型 模拟列表数据分页触发方式实现目录 分页功能 分页组件有两种 table组件自带分页 <TableborderedrowKey"userId"rowSelection{{ type: checkbox }}pagination{{position: [bottomRight],pageSi…...

编程日记 2024/2/3 14:05:55

MySQL查询数据（十）

MySQL查询数据&#xff08;十&#xff09; 一、SELECT基本查询 1.1 SELECT语句的功能 SELECT 语句从数据库中返回信息。使用一个 SELECT 语句&#xff0c;可以做下面的事&#xff1a; **列选择&#xff1a;**能够使用 SELECT 语句的列选择功能选择表中的列&#xff0c;这些…...

编程日记 2024/2/3 13:58:49

AJAX-常用请求方法和数据提交

常用请求方法 请求方法&#xff1a;对服务器资源&#xff0c;要执行的操作 axios请求配置 url&#xff1a;请求的URL网址 method&#xff1a;请求的方法&#xff0c;如果是GET可以省略&#xff1b;不用区分大小写 data&#xff1a;提交数据 axios({url:目标资源地址,method…...

编程日记 2024/2/3 13:57:48

2024美国大学生数学建模竞赛美赛B题matlab代码解析

2024美赛B题Searching for Submersibles搜索潜水器 因为一些不可抗力&#xff0c;下面仅展示部分代码&#xff08;很少部分部分&#xff09;和部分分析过程&#xff0c;其余代码看文末 Dthxlsread(C:\Users\Lenovo\Desktop\Ionian.xlsx); DpDth(:,3:5); dy0.0042; dx0.0042; …...

编程日记 2024/2/3 13:56:47

【DouYing Desktop】

I) JD 全日制大专及以上学历&#xff1b; 2. 3年以上的IT服务支持相关工作经验 3. 有较强的桌面相关trouble shooting与故障解决能力&#xff0c;能够独立应对各类型桌面问题&#xff1b; 4. 具备基础的网络、系统知识&#xff0c;能够独立解决常见的网络、系统等问题&#xf…...

编程日记 2024/2/3 13:53:45

正则表达式与文本处理工具

目录 引言 一、正则表达式基础 &#xff08;一&#xff09;字符匹配 1.基本字符 2.特殊字符 3.量词 4.边界匹配 &#xff08;二&#xff09;进阶用法 1.组与引用 2.选择 二、命令之-----grep &#xff08;一&#xff09;基础用法 &#xff08;二&#xff09;高级用…...

编程日记 2024/2/3 13:52:44

IDEA中的Run Dashboard

Run Dashboard是IntelliJ IDEA中的工具【也就是View中的Services】&#xff0c;提供一个可视化界面&#xff0c;用于管理控制应用程序的运行和调试过程。 在Run DashBoard中&#xff0c;可以看到所有的运行配置&#xff0c;以及每个配置的运行状态&#xff08;正在运行&#xf…...

编程日记 2024/2/3 13:51:43

【力扣白嫖日记】SQL

前言 练习sql语句&#xff0c;所有题目来自于力扣&#xff08;https://leetcode.cn/problemset/database/&#xff09;的免费数据库练习题。 今日题目&#xff1a; 1407.排名靠前的旅行者 表&#xff1a;Users 列名类型idintnamevarchar id 是该表中具有唯一值的列。name …...

编程日记 2024/2/3 13:50:42

自动化报告pptx-python｜高效通过PPT模版制造报告（三）

这是自动化报告学习的第三篇了，前面两篇分别是： 自动化报告的前奏｜使用python-pptx操作PPT（一）自动化报告pptx-python｜如何将pandas的表格写入PPTX（二）本篇是逼着笔者看到JoStudio 大佬自己写的一个jojo-office 库，基于pptx-python开发成一套试用office软件的依赖，非…...

编程日记 2024/2/3 13:48:40

Linux升级openssh的解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

编程日记 2024/2/3 13:46:38

YOLOv5白皮书-第Y3周:yolov5s.yaml文件解读

YOLOv5白皮书-第Y3周:yolov5s.yaml文件解读 YOLOv5白皮书-第Y3周:yolov5s.yaml文件解读一、前言二、我的环境三、yolov5s.yaml源文件内容四、Parameters五、anchors配置六、backbone七、head八、总结 OLOv5-第Y2周&#xff1a;训练自己的数据集) YOLOv5白皮书-第Y3周:yolov5s.…...

编程日记 2024/2/3 13:42:35

C++ pair+map+set+multimap+multiset+AVL树+红黑树（深度剖析）

文章目录 1. 前言2. 关联式容器3. pair——键值对4. 树形结构的关联式容器4.1 set4.1.1 set 的介绍4.1.2 set 的使用 4.2 map4.2.1 map 的介绍4.2.2 map 的使用 4.3 multiset4.3.1 multiset 的介绍4.3.2 multiset 的使用 4.4 multimap4.4.1 multimap 的介绍4.4.2 multimap 的使…...

编程日记 2024/2/3 13:41:34

指针的学习1

目录 什么是指针&#xff1f; 野指针 造成野指针的原因&#xff1a; 如何避免野指针&#xff1f; 内存和指针 如何理解编址&#xff1f; 指针变量和地址 取地址操作符& 指针变量和解引用操作符 指针变量 如何拆解指针类型&#xff1f; 指针变量的大小 指针变量…...

编程日记 2024/2/3 13:38:30

c++：敲桌子

先输出1-100数字&#xff0c;从100个数字中找到这些特殊数字改为敲桌子。 特殊数字&#xff1a;1.7的倍数 2.十位数上有7 3.个位数上有7 #include<iostream> using namespace std; int main() {for (int i 1; i < 100; i) {if (i / 10 7 || i % 10 7|| i % 7 0)…...

编程日记 2024/2/3 13:35:28

Linux中判断文件系统的方法

文章目录 Linux中判断文件系统的方法1.使用mount命令2.使用blkid命令3.使用file命令4.使用fstab文件5.使用df命令&#xff08;这个用的比较多&#xff09;6.使用fsck命令7.使用lsblk命令(推荐-简单好用) Linux中判断文件系统的方法 1.使用mount命令 # 这样查看的只有已经挂载…...

编程日记 2024/2/3 13:34:27

聊聊ClickHouse MergeTree引擎的固定/自适应索引粒度

前言 我们在刚开始学习ClickHouse的MergeTree引擎时&#xff0c;就会发现建表语句的末尾总会有SETTINGS index_granularity 8192这句话&#xff08;其实不写也可以&#xff09;&#xff0c;表示索引粒度为8192。在每个data part中&#xff0c;索引粒度参数的含义有二&#xf…...

编程日记 2024/2/3 13:28:21

20240202在WIN10下使用whisper.cpp

20240202在WIN10下使用whisper.cpp 2024/2/2 14:15 【结论&#xff1a;在Windows10下&#xff0c;确认large模式识别7分钟中文视频&#xff0c;需要83.7284 seconds&#xff0c;需要大概1.5分钟&#xff01;效率太差&#xff01;】 83.7284/4200.1993533333333333333333333333…...

编程日记 2024/2/3 13:24:17

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

编程新知 2025/6/17 4:15:09

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2025/6/15 15:55:45

前端倒计时误差!

提示：记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来？二、五大解决方案1. 动态校准法（基础版）2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

编程新知 2025/6/15 14:38:32

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/6/17 11:11:11

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面（Target 选项卡）1. IROM1（用于配置 Flash）2. IRAM1（用于配置 RAM）二、链接器设置界面（Linker 选项卡）1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数（如果没有勾选上面…...

编程新知 2025/6/17 0:39:11

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

编程新知 2025/6/15 8:53:16

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/6/15 22:06:42

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2025/6/15 20:22:49

pikachu靶场通关笔记22-1 SQL注入05-1-insert注入(报错法)

目录 一、SQL注入 二、insert注入 三、报错型注入 四、updatexml函数 五、源码审计 六、insert渗透实战 1、渗透准备 2、获取数据库名database 3、获取表名table 4、获取列名column 5、获取字段 本系列为通过《pikachu靶场通关笔记》的SQL注入关卡(共10关&#xff0…...

编程新知 2025/6/15 17:15:18