CSS 中的 display 和 visibility
CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。
- display: 隐藏某个元素时，不会占用任何空间。换句话讲，不会影响布局。
- visibility: 隐藏某个元素时，仍需占用与未隐藏之前一样的空间。换句话讲，会影响布局。
display 属性
| 属性值 | 描述 |
|---|---|
| none | 此元素不会被显示。 |
当将一个元素的 CSS 属性 display 设置为 none 时，该元素会被隐藏。并且被隐藏的元素不会占用 HTML 页面的任何空间。
在 HTML 页面中定义两个 <div> 标签，并设置 CSS 样式，具体代码如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#d1 {width: 300px;height: 300px;background-color: lightskyblue;}#d2 {width: 300px;height: 300px;background-color: green;}</style></head><body><div id="d1"></div><div id="d2"></div></body>
</html>
当为第一个 <div> 标签设置 display 属性值为 none 时，该 <div> 标签会被隐藏。
| 属性值 | 描述 |
|---|---|
| block | 此元素将显示为块级元素。 |
该值主要作用于内联元素。如果将内联元素的 CSS 属性 display 设置为 block 时，该内联元素将在浏览器中显示成块级元素效果。
在 HTML 页面中定义两个 <div> 标签，并设置 CSS 样式，具体代码如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#s1 {width: 300px;height: 300px;background-color: lightskyblue;}#s2 {width: 300px;height: 300px;background-color: green;}</style></head><body><span id="s1">这是一个span</span><span id="s2">这是一个span</span></body>
</html>
当为第一个 <span> 标签设置 display 属性值为 block 时，该 <span> 标签会呈现块级元素效果。
| 属性值 | 描述 |
|---|---|
| inline | 默认值，此元素会被显示为内联元素。 |
该值主要作用于块级元素。如果将内联元素的 CSS 属性 display 设置为 inline 时，该内联元素将在浏览器中显示成内联元素效果。
在 HTML 页面中定义两个 <div> 标签，并设置 CSS 样式，具体代码如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#d1 {width: 300px;height: 300px;background-color: lightskyblue;}#d2 {width: 300px;height: 300px;background-color: green;}</style></head><body><div id="d1">这是一个div</div><div id="d2">这是一个div</div></body>
</html>
当为第一个 <div> 标签设置 display 属性值为 inline 时，该 <div> 标签会呈现内联元素样式。
| 属性值 | 描述 |
|---|---|
| inline-block | 行内块元素。 |
当将 CSS 属性 display 设置为 inline-block 时，该元素在浏览器中显示为内联块级效果。即每个元素呈现块级元素效果，元素之间呈现内联元素效果。
在 HTML 页面中定义两个 <div> 标签，并设置 CSS 样式，具体代码如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#d1 {width: 300px;height: 300px;background-color: lightskyblue;}#d2 {width: 300px;height: 300px;background-color: green;}</style></head><body><div id="d1">这是一个div</div><div id="d2">这是一个div</div></body>
</html>
分别为两个 <div> 标签设置 display 属性值为 inline-block 时，这两个 <div> 会显示在一行中。
visibility 属性
visibility 属性指定一个元素是否是可见的。
值得注意的是: visibility 属性设置元素不可见的元素，但会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素。
| 属性值 | 描述 |
|---|---|
| visible | 默认值，元素是可见的。 |
| hidden | 元素是不可见的。 |
在 HTML 页面中定义两个 <div> 标签，并设置 CSS 样式，具体代码如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>#d1 {width: 300px;height: 300px;background-color: lightskyblue;}#d2 {width: 300px;height: 300px;background-color: green;}</style></head><body><div id="d1">这是一个div</div><div id="d2">这是一个div</div></body>
</html>
当为第一个 <div> 标签设置 visibility 属性值为 hidden 时，该 <div> 会被隐藏。
相关文章：
CSS 中的 display 和 visibility
CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。 display: 隐藏某个元素时，不会占用任何空间。换句话讲，不会影响布局。visibility: 隐藏某个元素时，仍需占用与未隐藏之前一样的空间。换句话讲，…...
解决mysql报错this is incompatible with DISTINCT
环境 centos 9 php7.4 mysql5.7 问题 mysql查询报如下错误： SQLSTATE[HY000]: General error: 3065 Expression #1 of ORDER BY clause is not in SELECT list, references column hst_csc.q.timestamp which is not in SELECT list; this is incompatible with…...
C++-map和set
本期我们来学习map和set 目录 关联式容器 键值对 pair 树形结构的关联式容器 set multiset map multimap 关联式容器 我们已经接触过 STL 中的部分容器，比如： vector 、 list 、 deque 、forward_list(C11)等，这些容器统称为序列式…...
微信小程序AI类目-深度合成-AI问答/AI绘画 互联网信息服务算法备案审核通过教程
近期小程序审核规则变化后，很多使用人类小徐提供的chatGPT系统的会员上传小程序无法通过审核，一直提示需要增加深度合成-AI问答、深度合成-AI绘画类目，该类目需要提供互联网信息服务算法备案并上传资质，一般对企业来说这种务很难实…...
蓝桥杯官网练习题（星期一）
题目描述 本题为填空题，只需要算出结果后，在代码中使用输出语句将所填结果输出即可。 整个 2020 世纪（1901 年 1 月 1 日至 2000 年 12 月 3131 日之间），一共有多少个星期一？(不要告诉我你不知道今天是星…...
centos7更新podman
实验环境：centos7.7.1908 1.安装podman并查看版本 yum install podman podman -v 当前podman版本信息是1.6.4 2.更新podman版本 通过查看资料显示centos 7 支持最高版本为 3.4.4，更新podman大致有以下四步： golang 安装(本次使用版本: 1.…...
Java特性之设计模式【抽象工厂模式】
一、抽象工厂模式 概述 抽象工厂模式（Abstract Factory Pattern）是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式 在抽象工厂模式中，接口是…...
机器学习简介
引言 为何现在机器学习如此热门？ 主要原因是由于“人类无论如何也做不到在短时间内实现从大量的数据中自动的计算出正确的结果操作”。 什么是机器学习？ 所谓的机器学习，就是通过对数据进行反复的学习，来找出其中潜藏的规律和模式…...
list事件)
linux之perf(2)list事件
Linux之perf(2)list事件 Author：Onceday Date：2023年9月3日 漫漫长路，才刚刚开始… 参考文档: Tutorial - Perf Wiki (kernel.org)perf-list(1) - Linux manual page (man7.org) 1. 概述 perf list用于列出可用的性能事件，这…...
将多个EXCEL 合并一个EXCEL多个sheet
合并老版本xls using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using NPOI.HSSF.UserModel; …...
【送书活动】揭秘分布式文件系统大规模元数据管理机制——以Alluxio文件系统为例
前言 「作者主页」：雪碧有白泡泡 「个人网站」：雪碧的个人网站 「推荐专栏」： ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄，vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄ÿ…...
微信小程序——数据绑定
在微信小程序中，可以通过以下代码实现数据绑定： 在WXML中，使用双大括号{{}}绑定数据，将数据渲染到对应的视图中。 <view>{{message}}</view>在JS中，定义一个数据对象，并将其绑定到页面的data…...
libbpf-bootstrap安卓aarch64适配交叉编译
1.为什么移植 疑惑 起初我也认为，像libbpf-bootstrap这样在ebpf程序开发中很常用的框架，理应支持不同架构的交叉编译。尤其是向内核态的ebpf程序本身就是直接通过clang的-target btf直接生成字节码，各个内核上的ebpf虚拟机大同小异…...
【剑指Offer】24.反转链表
题目 定义一个函数，输入一个链表的头节点，反转该链表并输出反转后链表的头节点。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL限制： 0 < 节点个数 < 5000 解答 源代码 /*** Defin…...
04-docker compose容器编排
Docker Compose简介 Docker Compose是什么 Compose 是Docker公司推出的一个工具软件，可以管理多个Dokcer容器组成一个应用。你需要定义一个YAML格式的配置文件 docker-compose.yml，写好多个容器之间的调用关系。然后，只要一个命令&#…...
通过位运算打多个标记
通过位运算打多个标记 如何在一个字段上，记录多个标记？ 如何在一个字段上，记录不同类型的多个标记？ 如何用较少的字段，记录多个标记？ 如何在不增加字段的要求下，记录新增的标记？ 在实…...
[学习笔记]Node2Vec图神经网络论文精读
参考资料：https://www.bilibili.com/video/BV1BS4y1E7tf/?p12&spm_id_frompageDriver Node2vec简述 DeepWalk的缺点 用完全随机游走，训练节点嵌入向量，仅能反应相邻节点的社群相似信息，无法反映节点的功能角色相似信息。 …...
C# Linq源码分析之Take（五）
概要 本文在C# Linq源码分析之Take（四）的基础上继续从源码角度分析Take的优化方法，主要分析Where.Select.Take的使用案例。 Where.Select.Take的案例分析 该场景模拟我们显示中将EF中与数据库关联的对象进行过滤，然后转换成Web…...
性能监控-grafana+prometheus+node_exporter
Prometheus是一个开源的系统监控和报警工具。它由SoundCloud开发并于2012年发布，后来成为了一个独立的开源项目，并得到了广泛的应用和支持。 Prometheus的主要功能包括采集和存储各种系统和应用程序的监控数据，并提供强大的查询语言PromQL来…...
（STM32H5系列）STM32H573RIT6、STM32H573RIV6、STM32H573ZIT6嵌入式微控制器基于Cortex®-M33内核
一、应用 工业（PLC、工业电机控制、泵和压缩机） 智能家居（空调、冰箱、冰柜、中央警报系统、洗衣机） 个人电子产品（键盘、智能手机、物联网标签、跟踪设备） 智能城市（工业通信、照明控制、数字…...
华为云AI开发平台ModelArts
华为云ModelArts：重塑AI开发流程的“智能引擎”与“创新加速器”！ 在人工智能浪潮席卷全球的2025年，企业拥抱AI的意愿空前高涨，但技术门槛高、流程复杂、资源投入巨大的现实，却让许多创新构想止步于实验室。数据科学家…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略，并且实现了基本的选区操作，还调研了自绘选区的实现。那么相对的，我们还需要设计编辑器的选区表达，也可以称为模型选区。编辑器中应用变更时的操作范围，就是以模型选区为基准来…...
在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中，手势开发全攻略：
在 HarmonyOS 应用开发中，手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力，既支持点击、长按、拖拽等基础单一手势的精细控制，也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档，…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
FastAPI 教程：从入门到实践
FastAPI 是一个现代、快速（高性能）的 Web 框架，用于构建 API，支持 Python 3.6。它基于标准 Python 类型提示，易于学习且功能强大。以下是一个完整的 FastAPI 入门教程，涵盖从环境搭建到创建并运行一个简单的…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接：3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯，要想要能够将所有的电脑解锁&#x…...
如何理解 IP 数据报中的 TTL？
目录 前言理解 前言 面试灵魂一问：说说对 IP 数据报中 TTL 的理解？我们都知道，IP 数据报由首部和数据两部分组成，首部又分为两部分：固定部分和可变部分，共占 20 字节，而即将讨论的 TTL 就位于首…...
CSS设置元素的宽度根据其内容自动调整
width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。 效果对比 默认情况（width: auto）： 块级元素（如 <div>）会占满父容器…...
基于Java Swing的电子通讯录设计与实现：附系统托盘功能代码详解
JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用，结合SQLite数据库实现联系人管理功能，并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能，同时可以最小化到系统…...
go 里面的指针
指针 在 Go 中，指针（pointer）是一个变量的内存地址，就像 C 语言那样： a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10，通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...