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

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

news 2025/8/17 22:20:21

元素的显示与隐藏

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

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

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

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

编程新知 2025/7/12 6:45:46

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

编程新知 2025/8/10 20:17:44

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

编程新知 2025/8/12 18:09:54

centos 7 部署awstats 网站访问检测

一、基础环境准备&#xff08;两种安装方式都要做&#xff09; bash # 安装必要依赖 yum install -y httpd perl mod_perl perl-Time-HiRes perl-DateTime systemctl enable httpd # 设置 Apache 开机自启 systemctl start httpd # 启动 Apache二、安装 AWStats&#xff0…...

编程新知 2025/8/17 2:05:48

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/8/3 22:09:42

屋顶变身“发电站” ，中天合创屋面分布式光伏发电项目顺利并网！

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

编程新知 2025/8/5 22:40:10

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/7/15 0:42:05

优选算法第十二讲：队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

编程新知 2025/8/13 13:05:41

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...

编程新知 2025/7/29 9:20:56

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/8/10 0:21:56