CSS元素的显示与可见性（详解Display和Visibility的用法）

目录

一、介绍

1.Display:

1.1.概念:

1.2.特点:

1.3.用法:

1.4.应用:

1.5.功能:

2.Visibility:

2.1.概念:

2.2.特点:

2.3.用法:

2.4.应用:

2.5.功能:

总结：

二、使用

1.隐藏元素- display:none或visibility:hidden

2.Display - 块和内联元素

 3.如何改变一个元素显示

4.display和visility属性

4.1Display:

4.2Visibility:

三、应用实例

1.使用display和visibility实现响应式菜单

2.使用visibility实现模态框

3.使用display和flex实现响应式网格布局

4.使用visibility和transition实现平滑的元素过渡效果

四、总结

一、介绍

1.Display:

1.1.概念:

display属性用于定义元素的布局模式，即元素如何在页面中呈现。

1.2.特点:

它有多种取值，每种取值对应不同的布局方式，如block、inline、inline-block、flex、grid等。

1.3.用法:

display: block;使元素以块级元素显示，占据一行。

display: inline;使元素以行内元素显示，与其他行内元素在同一行内。

display: inline-block;结合了块级元素和行内元素的特性，即可以设置宽高，同时又可以在同一行内显示。

display: flex;创建一个弹性盒子，使元素可以灵活布局。

display: grid;创建一个网格容器，使元素可以以网格形式布局。

1.4.应用:

用于控制元素的布局方式，根据设计需求选择不同的display值。

1.5.功能:

控制元素的显示方式，影响元素的盒模型、位置和大小等。

2.Visibility:

2.1.概念:

visibility属性用于控制元素的可见性，即元素是否可见。

2.2.特点:

它有两种取值，visible和hidden，分别表示元素可见和不可见。

2.3.用法:

visibility: visible;使元素可见。

visibility: hidden;使元素不可见，但仍占据页面布局空间。

2.4.应用:

用于控制元素在页面中的可见性，常用于实现动态显示和隐藏效果。

2.5.功能:

控制元素的可见性，但不影响元素的布局。

总结：

  • Display主要用于控制元素的布局方式，包括块级、行内、弹性布局和网格布局等。
  • Visibility主要用于控制元素的可见性，即元素是否在页面中可见，但不影响布局。

二、使用

1.隐藏元素- display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

h1.hidden {visibility:hidden;}

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

h1.hidden {display:none;}

2.Display - 块和内联元素

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

  • <h1>
  • <p>
  • <div>

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

  • <span>
  • <a>

 3.如何改变一个元素显示

可以更改内联元素和块元素，反之亦然，可以使页面看起来是以一种特定的方式组合，并仍然遵循web标准。

下面的示例把列表项显示为内联元素：

li {display:inline;}

下面的示例把span元素作为块元素：

span {display:block;}

注意：变更元素的显示类型看该元素是如何显示，它是什么样的元素。例如：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。

4.display和visility属性

4.1Display:
selector {display: value;
}
  • selector: 要应用样式的HTML元素选择器。
  • value: 布局方式的取值，如block、inline、inline-block、flex、grid等。
4.2Visibility:
selector {visibility: value;
}
  • selector: 要应用样式的HTML元素选择器。
  • value: 可见性的取值，可以是visible（可见）或hidden（不可见）。

三、应用实例

1.使用display和visibility实现响应式菜单

HTML:

<nav id="menu"><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li><li><a href="#">Services</a></li><li><a href="#">Contact</a></li></ul>
</nav><button id="toggleMenu">Toggle Menu</button>

CSS:

#menu {display: none; /* 初始时菜单隐藏 */
}#menu.visible {display: block; /* 显示菜单 */
}/* 其他样式 */

JavaScript:

document.getElementById("toggleMenu").addEventListener("click", function() {var menu = document.getElementById("menu");menu.classList.toggle("visible");
});

演示了如何通过JavaScript来控制菜单的显示和隐藏，使用display: none;和display: block;来实现。当按钮被点击时，菜单的可见性会切换。

2.使用visibility实现模态框

HTML:

<div id="modal" style="visibility: hidden;"><div id="modal-content"><h2>Modal Title</h2><p>Modal content goes here.</p><button id="closeModal">Close</button></div>
</div><button id="openModal">Open Modal</button>

CSS:

#modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;
}/* 其他样式 */

JavaScript:

document.getElementById("openModal").addEventListener("click", function() {var modal = document.getElementById("modal");modal.style.visibility = "visible";
});document.getElementById("closeModal").addEventListener("click", function() {var modal = document.getElementById("modal");modal.style.visibility = "hidden";
});

实例演示了如何使用visibility属性创建一个简单的模态框。点击按钮打开模态框，点击模态框内的关闭按钮关闭模态框。

3.使用display和flex实现响应式网格布局

HTML:

<div class="grid-container"><div class="grid-item">Item 1</div><div class="grid-item">Item 2</div><div class="grid-item">Item 3</div><div class="grid-item">Item 4</div><div class="grid-item">Item 5</div>
</div>

CSS:

.grid-container {display: flex;flex-wrap: wrap;
}.grid-item {flex: 1 0 200px; /* 每个网格项最小宽度200px */background-color: lightblue;margin: 10px;
}

这个实例演示了如何使用display: flex;和flex-wrap: wrap;创建一个响应式的网格布局。网格项会根据容器宽度自动换行。

4.使用visibility和transition实现平滑的元素过渡效果

HTML:

<div id="element" class="hidden">Hover Me</div>

CSS:

#element {width: 200px;height: 200px;background-color: lightblue;transition: visibility 0.3s ease; /* 平滑过渡效果 */
}.hidden {visibility: hidden;
}.visible {visibility: visible;
}

JavaScript:

document.getElementById("element").addEventListener("mouseenter", function() {this.classList.remove("hidden");this.classList.add("visible");
});document.getElementById("element").addEventListener("mouseleave", function() {this.classList.remove("visible");this.classList.add("hidden");
});

这个实例演示了如何使用visibility属性和CSS过渡来创建一个平滑的元素过渡效果。当鼠标悬停在元素上时，它会平滑地显示出来，鼠标离开时它会平滑地隐藏起来。

四、总结

display属性：

  • display属性用于定义元素应该生成的框的类型。
  • 常见的display属性值包括：
    • none: 元素不会被渲染在页面上，且不占据空间。
    • block: 元素被渲染为块级元素，占据一整行。
    • inline: 元素被渲染为内联元素，不会独占一行，与其他内联元素在一行内显示。
    • inline-block: 元素被渲染为内联块级元素，同时具有块级元素和内联元素的特性。
    • flex: 元素被渲染为弹性盒子容器。
    • grid: 元素被渲染为网格容器。
  • 通过组合不同的display属性值，可以创建各种各样的布局。

visibility属性：

  • visibility属性用于控制元素的可见性。
  • 常见的visibility属性值包括：
    • visible: 元素可见。
    • hidden: 元素不可见，但仍占据空间。
  • 与display: none;相比，visibility: hidden;隐藏的元素仍会占据文档流中的位置，只是不可见。
  • visibility属性可以与过渡效果一起使用，以创建平滑的元素过渡效果。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/834903.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

JavaWeb--13Mybatis（2）

JavaWeb--13Mybatis（2）

Mybatis&#xff08;2&#xff09; 1 Mybatis基础操作1.1 需求和准备工作1.2 删除员工日志输入参数占位符 1.3 新增员工1.4 修改员工信息1.5 查询员工1.5.1 根据ID查询数据封装 1.5.3 条件查询 2 XML配置文件规范3 MyBatis动态SQL3.1 什么是动态SQL3.2 动态SQL-if更新员工 3.3 …
阅读更多...
Disk Doctor for Mac 免激活版：数据安全守卫者

Disk Doctor for Mac 免激活版：数据安全守卫者

数据丢失是每个人都可能遇到的问题&#xff0c;但Disk Doctor for Mac能让这个问题迎刃而解。这款强大的数据恢复软件&#xff0c;能迅速找回因各种原因丢失的数据。 Disk Doctor采用先进的扫描技术&#xff0c;能深入剖析磁盘&#xff0c;找到并恢复被删除或损坏的文件。同时&…
阅读更多...
如何快速实现Java发送邮件功能？

如何快速实现Java发送邮件功能？

如何使用JAVA发送邮件&#xff1f;&#xff08;不做过多文字解释&#xff0c;详细说明请看代码注释&#xff09; 一&#xff0c;引用相关pom二&#xff0c;实现代码&#xff08;代码参考图片内容&#xff09;三&#xff0c; 接收邮件 一&#xff0c;引用相关pom <dependency…
阅读更多...
三级综合医院微信预约挂号系统源码，PC后台管理端+微信公众号+支付宝小程序全套源码

三级综合医院微信预约挂号系统源码，PC后台管理端+微信公众号+支付宝小程序全套源码

智慧医院预约挂号系统&#xff0c;微信医疗预约挂号小程序源码&#xff0c;实体医院预约挂号支付系统源码 本系统主要面向中大型的医疗机构&#xff0c;适用于各级公立和民营医院&#xff0c;可对接院内his、lis、pacs系统。 PC后台管理端微信公众号支付宝小程序 系统支持当日…
阅读更多...
建发弘爱 X 袋鼠云：加速提升精细化、数字化医疗健康服务能力

建发弘爱 X 袋鼠云：加速提升精细化、数字化医疗健康服务能力

厦门建发弘爱医疗集团有限公司&#xff08;简称“建发弘爱”&#xff09;创立于2022年&#xff0c;是厦门建发医疗健康投资有限公司的全资子公司&#xff0c;专业从事医疗健康领域的医疗服务。 建发弘爱通过医疗、健康及产业服务三大板块&#xff0c;为百姓提供医疗和健康全生…
阅读更多...
Docker Compose常用命令与属性

Docker Compose常用命令与属性

大家好&#xff0c;今天给大家分享Docker Compose的常用命令&#xff0c;以及docker-compose文件的属性。Docker Compose 是一个用于定义和运行多容器 Docker 应用应用的重要工具。它通过一个配置文件&#xff08;docker-compose.yml&#xff09;来详细定义多个容器之间的关联、…
阅读更多...
营销管理新突破，店匠科技与TikTok Shop携手深化合作

营销管理新突破，店匠科技与TikTok Shop携手深化合作

在全球化浪潮与数字化趋势的推动下,跨境电商已成为众多商家追求增长的新高地。TikTok Shop美国小店(TTS)以其庞大的用户基础和市场规模,成为商家们竞相入驻的热门平台。店匠科技(Shoplazza)作为领先的独立站SaaS服务商,近日宣布与TikTok Shop达成深度合作,为商家带来一站式订单…
阅读更多...
docker端口映射成功，docker端口不生效的问题解决，外界无法访问docker映射端口

docker端口映射成功，docker端口不生效的问题解决，外界无法访问docker映射端口

docker端口映射不生效的问题解决 问题 使用docker run -p 88848:8848后&#xff0c;显示容器启动正常&#xff0c;并且使用docker logs –f xxx能够看到容器可以正常启用&#xff0c;docker ps 可以看到容器启动成功&#xff0c;并且端口已经映射,但是在浏览器访问相关地址&am…
阅读更多...
智慧公厕打造智慧城市新标杆

智慧公厕打造智慧城市新标杆

公共厕所作为城市基础设施的重要组成部分&#xff0c;直接关系到市民的生活品质和城市形象。传统的公厕管理方式存在着许多问题&#xff0c;如环境脏乱、清洁不及时等&#xff0c;给市民带来了诸多不便和不满。而智慧公厕作为一种全新的管理模式&#xff0c;通过物联网、大数据…
阅读更多...
进程间通信 管道

进程间通信 管道

前言 ubuntu系统的默认用户名不为root的解决方案&#xff08;但是不建议&#xff09;&#xff1a;轻量应用服务器 常见问题-文档中心-腾讯云 (tencent.com) 进程间通信的基本概念 进程间通信目的&#xff1a;进程间也是需要协同的&#xff0c;比如数据传输、资源共享、通知事件…
阅读更多...
NLP(12)--语言模型

NLP(12)--语言模型

前言 仅记录学习过程&#xff0c;有问题欢迎讨论 应用-语音识别&#xff1a; 声音的本质是一种波&#xff0c;将波按时间段切分为很多帧&#xff0c;之后进行声学特征提取&#xff0c;每一帧转化为向量。 应用-输入法&#xff1a; 按照语言模型给出概率最高的候选词 语言…
阅读更多...
2024年化学材料、清洁能源与生物技术国际学术会议(ICCMCEB2024)

2024年化学材料、清洁能源与生物技术国际学术会议(ICCMCEB2024)

2024年化学材料、清洁能源与生物技术国际学术会议(ICCMCEB2024) 会议简介 2024国际化学材料、清洁能源和生物技术大会&#xff08;ICCMCEB2024&#xff09;将在长沙隆重举行。本次会议旨在汇聚来自世界各地的化学材料、清洁能源和生物技术领域的专家学者&#xff0c;共同探…
阅读更多...
用C++译密码

用C++译密码

为使电文保密&#xff0c;往往按一定规律将电文转换成密码&#xff0c;收报人再按约定的规律将其译回原文。例如&#xff0c;可以按以下规律将电文变成密码&#xff1a;将字母A变成字母E,a变成e&#xff0c;即变成其后的第4个字母&#xff0c;W变成A,X变成B,Y变成C,Z变成D。字母…
阅读更多...
【吃透Java手写】3-SpringBoot-简易版-源码解析

【吃透Java手写】3-SpringBoot-简易版-源码解析

【吃透Java手写】SpringBoot-简易版-源码解析 1 SpringbootDemo2 准备工作2.1 Springboot-my2.1.1 依赖2.1.2 SpringBootApplication2.1.3 SJBSpringApplication2.1.3.1 run方法 2.2 Springboot-user2.2.1 依赖2.2.2 UserController2.2.3 UserApplication 2.3 分析run方法的逻辑…
阅读更多...
Vue+OpenLayers7入门到实战：OpenLayers实现鼠标拖拽方式绘制矩形（正方形和长方形）

Vue+OpenLayers7入门到实战：OpenLayers实现鼠标拖拽方式绘制矩形（正方形和长方形）

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战 前言 本章介绍如何使用OpenLayers7在地图上实现鼠标拖拽方式绘制矩形（拖拽方式长方形和正方形）。 OpenLayers本身是可以通过鼠标点击多个点的方式来绘制多边形的，当然也包括长方形和正方形，但是这种多边形绘…
阅读更多...
Ollama + Openwebui 本地部署大型模型与交互式可视化聊天

Ollama + Openwebui 本地部署大型模型与交互式可视化聊天

Ollama简介 Ollama是一个创新的平台&#xff0c;它允许用户在本地启动并运行大型语言模型。它提供了一个简单易用的内容生成接口&#xff0c;类似于OpenAI&#xff0c;但无需开发经验即可直接与模型进行交互。Ollama支持热切换模型&#xff0c;为用户提供了灵活性和多样性。 …
阅读更多...
港股开启估值修复行情 珠光效果材料龙头大涨25%

港股开启估值修复行情 珠光效果材料龙头大涨25%

进入二季度以来&#xff0c;港股市场持续大涨&#xff0c;仅4月恒生指数就大涨7.4%&#xff0c;5月涨幅继续扩大至12.31%&#xff0c;大幅跑赢全球各主要指数。尤其是随着恒生科技多年以来的估值底部的确认&#xff0c;至此恒生指数、恒生港股通&#xff0c;恒生高股息&#xf…
阅读更多...
使用C语言实现杨氏矩阵并找出数字

使用C语言实现杨氏矩阵并找出数字

前言 过了五一假期&#xff0c;咋们经过了一个假期的休息&#xff0c;要继续学习了&#xff0c;不能偷懒哦&#xff01;&#xff01; 今天让我们来看看如何在一个杨氏矩阵中找出自己想找到的数字。 首先&#xff0c;我们要了解一下杨氏矩阵到底是什么&#xff0c;如果一个矩阵中…
阅读更多...
概念解析 | ROC曲线：评估分类模型

概念解析 | ROC曲线：评估分类模型

注1：本文系"概念解析"系列之一，致力于简洁清晰地解释、辨析复杂而专业的概念。本次辨析的概念是：ROC曲线的含义和绘制 概念解析 | ROC曲线：评估分类模型 第一部分：通俗解释 在我们的日常生活中，经常会遇到需要做出判断和选择的情况。比如，当你收到一封邮件时…
阅读更多...
深度学习（算法工程师）最火的就业方向

深度学习（算法工程师）最火的就业方向

自动驾驶与智能交通 自动驾驶是深度学习技术的一个重要应用领域&#xff0c;其目标是实现车辆的自主导航和驾驶。自动驾驶系统需要借助深度学习技术来识别交通信号、行人、车辆等环境信息&#xff0c;并做出相应的决策。因此&#xff0c;自动驾驶与智能交通领域的就业方向包括…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站