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

在HTML和CSS当中运用显示隐藏

news 2026/4/7 9:44:50

1.显示与隐藏

  1. 盒子显示:display:block;
  2. 盒子隐藏:

    display:none:隐藏该元素并且该元素所占的空间也不存在了。

    visibility:hidden:隐藏该元素但是该元素所占的内存空间还存在，即“隐身效果”。

2.圆角边框

在CSS2中添加圆角，我们不得不使用背景图像，在 CSS3中使用border-radius属性将很容易创建圆角。 border-radius属性是一个简写属性，用于设置四个border-radius属性。

语法:

border-radius:top-left top-right bottom-left bottom-right;

可能的值:

  1. 一个值:设置四个角的圆角大小;
  2. 两个值:设置左上和右下 右上和左下的圆角大小;
  3. 三个值:设置左上、右上和左下、右下的圆角大小;
  4. 四个值:设置左上、右上、右下、左下的圆角大小。

 border-radius的值可以是具体的数值也可以是百分比。

实例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box1{width: 300px;height: 300px;background-color: blueviolet;border-radius: 50px ;}.box2{width: 300px;height: 300px;background-color: rgb(57, 203, 214);border-radius: 50% ;}</style>
</head>
<body><div class="box1"></div><div class="box2"></div>
</body>
</html>

 

3.Overflow属性

overflow属性规定当内容溢出标签框时的显示方式，包括水平方向和垂直方向。

 overflow-x只包括水平方向。

 overflow-y只包括垂直方向。

可能的值:

  1. visible 默认值。内容不会被修剪，会呈现在标签框之外。
  2. hidden 内容会被修剪，并且其余内容是不可见的。
  3. scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  4. auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

注意：overflow属性仅适用于具有指定高度的块元素。

4.透明度属性(opacity,rgba())，透明度兼容

实现透明的CSS方法通常有以下3种方式，以下是不透明度都为80%的写法。

 CSS3的opacity:x，x的取值从0到1，如opacity:0.8;

CSS3 的rgba(red, green,blue,alpha)，alpha的取值从0到1，如rgba(255,255,255,0.8) ；

IE专属滤镜 filter:Alpha(opacity=x)，x的取值从0到100，如 filter:Alpha(opacity=80)。

1. opacity

1、兼容性:IE6、7 8不支持，IE9及以上版本和标准浏览器都支持。

2、使用说明:设置 opacity元素的所有后代元素会随着一起具有透明性，一般用于调整图片或者模块的整不透明度。

2. rgba()

1、兼容性:IE6、7、8不支持，IE9及以上版本和标准浏览器都支持。

2、使用说明:设置颜色的不透明度，一般用于调整 background-color、color等的不透明度。 IE6 和部分 IE7 内核的浏览器 ( 如 QQ 浏览器)会读懂 rgba，解析后颜色为透明，其实应该是 null那么使用opacity实现背景透明，文字不透明是可取的。

3.IE 专属滤镜filter:Alpha(opacity=x)

1、兼容性:仅支持IE6、7、8、9，在IE10 版本被废除。

2、使用说明:IE 浏览器专属，问题多，如下:

255,0.8); 在IE6、7中，需要激活IE 的 haslayout 属性(如:*zoom:1 或者 *overflow:hidden)，让它读懂 filter:Al-

pha

0)。

在IE6、7、8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位可让子元素不透明。

相关文章：

在HTML和CSS当中运用显示隐藏

1.显示与隐藏 盒子显示:display:block;盒子隐藏: display:none:隐藏该元素并且该元素所占的空间也不存在了。 visibility:hidden:隐藏该元素但是该元素所占的内存空间还存在&#xff0c;即“隐身效果”。 2.圆角边框 在CSS2中添加圆角&#xff0c;我们不得不使用背景图像&am…...

编程日记 2024/6/6 0:43:34

Java基础27，28（多线程,ThreadMethod ,线程安全问题,线程状态,线程池）

目录 一、多线程 1. 概述 2. 进程与线程 2.1 程序 2.2 进程 2.3 线程 2.4 进程与线程的区别 3. 线程基本概念 4.并发与并行 5. 线程的创建方式 方式一&#xff1a;继承Thread类 方式二&#xff1a;实现Runable接口 方式三&#xff1a;实现Callable接口 方式四&…...

编程日记 2024/6/6 0:42:33

C#WPF数字大屏项目实战04--设备运行状态

1、引入Livecharts包 项目中&#xff0c;设备运行状态是用饼状图展示的&#xff0c;因此需要使用livechart控件&#xff0c;该控件提供丰富多彩的图形控件显示效果 窗体使用控件 2、设置饼状图的显示图例 通过<lvc:PieChart.Series>设置环状区域 3、设置饼状图资源样…...

编程日记 2024/6/6 0:41:31

IntelliJ IDEA安装

IntelliJ IDEA 的安装、配置与使用-简化版 一、IntelliJ IDEA 介绍 1.JetBrains 公司介绍 IDEA(https://www.jetbrains.com/idea/)是 JetBrains 公司的产品&#xff0c;公司旗下还有其 它产品&#xff0c;比如&#xff1a; ➢ WebStorm&#xff1a;用于开发 JavaScript、HT…...

编程日记 2024/6/6 0:36:27

铸铁机械5G智能工厂工业物联数字孪生平台，推进制造业数字化转型

铸铁机械5G智能工厂工业物联数字孪生平台&#xff0c;推进制造业数字化转型。工业物联数字孪生平台以5G技术为基础&#xff0c;通过工业物联网连接铸铁机械生产过程中的各个环节&#xff0c;运用数字孪生技术构建虚拟工厂&#xff0c;实现生产过程的实时监测、模拟与优化&#…...

编程日记 2024/6/6 0:34:25

rocketmq No route info of this topic 问题排查

Broker配置项 autoCreateTopicEnable true 如果是单节点(master),注释掉这里的配置 #有三个值&#xff1a;SYNC_MASTER&#xff0c;ASYNC_MASTER&#xff0c;SLAVE&#xff1b;同步和异步表示Master和Slave之间同步数据的机制&#xff1b; #brokerRole SYNC_MASTER Pytho…...

编程日记 2024/6/6 0:33:24

STEEL ——首个利用 LLM 检测假新闻的框架算法解析

1.概述 近年来&#xff0c;假新闻的泛滥确实对政治、经济和整个社会产生了深远的负面影响。为了解决这一问题&#xff0c;人们开发了各种假新闻检测方法&#xff0c;这些方法试图通过分析新闻内容、来源和传播方式来识别虚假信息。 然而&#xff0c;正如你所提到的&#xff0…...

编程日记 2024/6/6 0:30:21

【AREngine BUG 解决方法】无法获取有效的相机图像尺寸

近期拿了一台 华为mate20 Pro的手机&#xff0c;在运行AR示例的过程中出现了黑屏。 问题排查 SDK版本&#xff1a;com.huawei.hms:arenginesdk:3.7.0.3 定位 经排查&#xff0c;发现(ARCamera对象的相机内参) getImageDimensions()返回的图像尺寸的width和height都为0。 这…...

编程日记 2024/6/6 0:28:19

植物大战僵尸杂交版2.0.88最新版+防闪退工具V2+修改工具+高清工具

植物大战僵尸杂交版&#xff0c;不仅继承原作的经典玩法&#xff0c;而且引入了全新的植物融合玩法&#xff0c;将各式各样的植物进行巧妙的杂交&#xff0c;孕育出前所未有、功能各异的全新植物。 创新的杂交合成系统 游戏引入了创新的杂交合成系统&#xff0c;让玩家可以将不…...

编程日记 2024/6/6 0:27:18

面试题：说说你对 JS 中 this 指向的了解

面试题&#xff1a;说说你对 JS 中 this 指向的了解 JS 的代码执行环境分为严格模式和非严格模式&#xff0c;可以通过 use strict 打开严格模式&#xff0c;此时 JS 在语法检查上会更加严格。要讨论 JS 中的 this 指向问题&#xff0c;也要分为严格模式和非严格模式进行讨论。…...

编程日记 2024/6/6 0:26:17

分享一个实用的MySQL一键巡检脚本

今日分享一个实用的MySQL一键巡检脚本&#xff0c;脚本内容还不是很完善&#xff0c;后续会继续进行优化。大家可以先在测试环境执行&#xff0c;确认执行没问题后可以在生产环境进行操作&#xff0c;问题的可以私信我。 MySQL一键巡检脚本的作用主要是帮助数据库管理员快速且…...

编程日记 2024/6/6 0:25:17

【动手学深度学习】卷积神经网络CNN的研究详情

目录 &#x1f30a;1. 研究目的 &#x1f30a;2. 研究准备 &#x1f30a;3. 研究内容 &#x1f30d;3.1 卷积神经网络 &#x1f30d;3.2 练习 &#x1f30a;4. 研究体会 &#x1f30a;1. 研究目的 特征提取和模式识别&#xff1a;CNN 在计算机视觉领域被广泛用于提取图像…...

编程日记 2024/6/6 0:23:14

2024年数字化经济与智慧金融国际会议(ICDESF 2024)

2024 International Conference on Digital Economy and Smart Finance 【1】大会信息 大会时间&#xff1a;2024-07-22 大会地点&#xff1a;中国成都 截稿时间&#xff1a;2024-07-10(以官网为准&#xff09; 审稿通知&#xff1a;投稿后2-3日内通知 会议官网&#xff1a;h…...

编程日记 2024/6/6 0:22:13

kafka-消费者服务搭建配置简单消费（SpringBoot整合Kafka）

文章目录 1、使用efak 创建 主题 my_topic1 并建立6个分区并给每个分区建立3个副本2、创建生产者发送消息3、application.yml配置4、创建消费者监听器5、创建SpringBoot启动类6、屏蔽 kafka debug 日志 logback.xml7、引入spring-kafka依赖 1、使用efak 创建 主题 my_topic1 并…...

编程日记 2024/6/6 0:20:11

C++STL---list常见用法

C STL中的list list是C标准模板库&#xff08;STL&#xff09;中的一个序列容器&#xff0c;它实现了一个双向链表。与vector和deque相比&#xff0c;list支持快速的任意位置插入和删除操作&#xff0c;但不支持快速随机访问。 基本操作 创建和初始化 #include <list> …...

编程日记 2024/6/6 0:18:09

MQTT.FX的使用

背景 在如今物联网的时代下&#xff0c;诞生了许多的物联网产品&#xff0c;这些产品通过BLE、WIFI、4G等各种各样的通信方式讲数据传输到各种各样的平台。 除了各个公司私有的云平台外&#xff0c;更多的初学者会接触到腾讯云、阿里云之类的平台。设备接入方式也有着多种多样…...

编程日记 2024/6/6 0:17:08

SRS、ZLMediakit音视频流媒体服务器

SRS、ZLMediakit都是做为webrtc的SFU&#xff08;selective forward unit&#xff09; WebRTC 开发实践&#xff1a;为什么你需要 SFU 服务器 https://mp.weixin.qq.com/s?__bizMzAxNTc1MjM0Mw&mid2652213442&idx1&sn33f0393a2dbc2b6a39c613bb238ec145&chksm…...

编程日记 2024/6/6 0:15:06

大模型Prompt-Tuning技术进阶

LLM的Prompt-Tuning主流方法 面向超大规模模型的Prompt-Tuning 近两年来&#xff0c;随之Prompt-Tuning技术的发展&#xff0c;有诸多工作发现&#xff0c;对于超过10亿参数量的模型来说&#xff0c;Prompt-Tuning所带来的增益远远高于标准的Fine-tuning&#xff0c;小样本甚至…...

编程日记 2024/6/6 0:14:05

统一响应，自定义校验器，自定义异常，统一异常处理器

文章目录 1.基本准备&#xff08;构建一个SpringBoot模块&#xff09;1.在A_universal_solution模块下创建新的子模块unified-processing2.pom.xml引入基本依赖3.编写springboot启动类4.启动测试 2.统一响应处理1.首先定义一个响应枚举类 RespBeanEnum.java 每个枚举对象都有co…...

编程日记 2024/6/6 0:13:03

完整状态码面试背

{"100": "继续","101": "切换协议","102": "处理中","103": "早期提示","200": "成功","201": "已创建","202": "已接受",&qu…...

编程日记 2024/6/6 0:11:01

游戏鼠标优化工具：让普通鼠标在macOS上实现专业级体验

游戏鼠标优化工具&#xff1a;让普通鼠标在macOS上实现专业级体验 【免费下载链接】mac-mouse-fix Mac Mouse Fix - Make Your $10 Mouse Better Than an Apple Trackpad! 项目地址: https://gitcode.com/GitHub_Trending/ma/mac-mouse-fix 当你在Final Cut Pro中精准剪…...

编程新知 2026/4/7 9:04:30

如何破解网易云音乐加密限制？ncmdump让音乐文件自由播放

如何破解网易云音乐加密限制&#xff1f;ncmdump让音乐文件自由播放 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 你是否遇到过这样的困扰&#xff1a;从网易云音乐下载的歌曲只能在特定客户端播放&#xff0c;无法在其他设备或播…...

编程新知 2026/4/7 8:08:53

中文文献管理效率提升指南：茉莉花插件的全方位应用

中文文献管理效率提升指南&#xff1a;茉莉花插件的全方位应用 【免费下载链接】jasminum A Zotero add-on to retrive CNKI meta data. 一个简单的Zotero 插件&#xff0c;用于识别中文元数据 项目地址: https://gitcode.com/gh_mirrors/ja/jasminum 在学术研究与文献管…...

编程新知 2026/4/7 7:52:32

网工入门必看！4 种网络设备登录方式全解析，从 Console 到 SSH 一次搞懂

做网络运维、数通调试的朋友都知道&#xff1a;所有设备配置的第一步&#xff0c;都是成功登录设备。不管是企业级交换机、路由器、防火墙&#xff0c;还是无线 AC 控制器&#xff0c;主流的登录方式无非 4 种&#xff1a;Console 口登录、Web 界面登录、Telnet 登录、SSH 登录…...

编程新知 2026/4/7 7:38:22

利用Phi-4-mini-reasoning理解网络协议：模拟分析与故障排查推理

利用Phi-4-mini-reasoning理解网络协议&#xff1a;模拟分析与故障排查推理 1. 网络工程师的日常痛点 网络工程师小李最近遇到一个棘手问题&#xff1a;公司内部系统频繁出现"403 Forbidden"错误&#xff0c;导致多个部门无法正常访问关键业务系统。传统排查方法需…...

编程新知 2026/4/7 6:31:59

告别枯燥数据！用Unity的Chart And Graph插件5分钟搞定游戏内排行榜（柱状图实战）

5分钟用Unity打造动态游戏排行榜&#xff1a;Chart And Graph插件实战指南 在独立游戏开发中&#xff0c;排行榜系统几乎是标配功能——但大多数开发者面对枯燥的数值列表时&#xff0c;往往陷入两难&#xff1a;要么花费大量时间自研可视化组件&#xff0c;要么使用简陋的文本…...

编程新知 2026/4/7 6:10:54

华新嘉华：如何做好GEO？记住！简单的内容堆砌达不到效果

‍在生成式AI搜索全面重塑信息获取方式的当下&#xff0c;越来越多的企业开始布局GEO&#xff08;生成式引擎优化&#xff09;&#xff0c;希望抢占AI搜索这一新兴流量入口。然而&#xff0c;一个不容忽视的现象正在蔓延&#xff1a;大量企业投入资源、批量生产内容&#xff0c…...

编程新知 2026/4/7 5:19:30

网站 SEO 优化检查需要检查哪些方面

网站 SEO 优化检查需要检查哪些方面 在当今互联网时代&#xff0c;一个网站的成功与否在很大程度上取决于其在搜索引擎上的表现。搜索引擎优化&#xff08;SEO&#xff09;是提升网站在搜索结果中排名的重要手段。但是&#xff0c;SEO 并不是一劳永逸的事情&#xff0c;需要持…...

编程新知 2026/4/7 4:34:09

sveltekit-superforms 终极指南：如何在 SvelteKit 中构建完美表单体验

sveltekit-superforms 终极指南&#xff1a;如何在 SvelteKit 中构建完美表单体验 【免费下载链接】sveltekit-superforms Making SvelteKit forms a pleasure to use! 项目地址: https://gitcode.com/gh_mirrors/sv/sveltekit-superforms 想要在 SvelteKit 应用中快速构…...

编程新知 2026/4/7 4:15:39

如何快速掌握Walt Explorer：在线WebAssembly代码编写与调试终极指南

如何快速掌握Walt Explorer&#xff1a;在线WebAssembly代码编写与调试终极指南 【免费下载链接】walt :zap: Walt is a JavaScript-like syntax for WebAssembly text format :zap: 项目地址: https://gitcode.com/gh_mirrors/wa/walt Walt Explorer是一款强大的在线工…...

编程新知 2026/4/7 3:51:24