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

CSS 中的 display 和 visibility

news 文章来源：https://blog.csdn.net/DeepLearning_/article/details/132713462 2024/11/27 23:32:24

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: 隐藏某个元素时&#xff0c;不会占用任何空间。换句话讲&#xff0c;不会影响布局。visibility: 隐藏某个元素时&#xff0c;仍需占用与未隐藏之前一样的空间。换句话讲&#xff0c;…...

编程日记 2023/9/10 22:13:23

解决mysql报错this is incompatible with DISTINCT

环境 centos 9 php7.4 mysql5.7 问题 mysql查询报如下错误&#xff1a; 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…...

编程日记 2023/9/10 22:12:21

C++-map和set

本期我们来学习map和set 目录 关联式容器 键值对 pair 树形结构的关联式容器 set multiset map multimap 关联式容器 我们已经接触过 STL 中的部分容器&#xff0c;比如&#xff1a; vector 、 list 、 deque 、forward_list(C11)等&#xff0c;这些容器统称为序列式…...

编程日记 2023/9/10 22:11:18

微信小程序AI类目-深度合成-AI问答/AI绘画 互联网信息服务算法备案审核通过教程

近期小程序审核规则变化后&#xff0c;很多使用人类小徐提供的chatGPT系统的会员上传小程序无法通过审核&#xff0c;一直提示需要增加深度合成-AI问答、深度合成-AI绘画类目&#xff0c;该类目需要提供互联网信息服务算法备案并上传资质&#xff0c;一般对企业来说这种务很难实…...

编程日记 2023/9/10 22:10:16

蓝桥杯官网练习题（星期一）

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 整个 2020 世纪&#xff08;1901 年 1 月 1 日至 2000 年 12 月 3131 日之间&#xff09;&#xff0c;一共有多少个星期一&#xff1f;(不要告诉我你不知道今天是星…...

编程日记 2023/9/10 22:09:15

centos7更新podman

实验环境&#xff1a;centos7.7.1908 1.安装podman并查看版本 yum install podman podman -v 当前podman版本信息是1.6.4 2.更新podman版本 通过查看资料显示centos 7 支持最高版本为 3.4.4&#xff0c;更新podman大致有以下四步&#xff1a; golang 安装(本次使用版本: 1.…...

编程日记 2023/9/10 22:08:14

Java特性之设计模式【抽象工厂模式】

一、抽象工厂模式 概述 抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;是围绕一个超级工厂创建其他工厂。该超级工厂又称为其他工厂的工厂。这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式 在抽象工厂模式中&#xff0c;接口是…...

编程日记 2023/9/10 22:07:13

机器学习简介

引言 为何现在机器学习如此热门&#xff1f; 主要原因是由于“人类无论如何也做不到在短时间内实现从大量的数据中自动的计算出正确的结果操作”。 什么是机器学习&#xff1f; 所谓的机器学习&#xff0c;就是通过对数据进行反复的学习&#xff0c;来找出其中潜藏的规律和模式…...

编程日记 2023/9/10 22:06:12

linux之perf(2)list事件

Linux之perf(2)list事件 Author&#xff1a;Onceday Date&#xff1a;2023年9月3日 漫漫长路&#xff0c;才刚刚开始… 参考文档: Tutorial - Perf Wiki (kernel.org)perf-list(1) - Linux manual page (man7.org) 1. 概述 perf list用于列出可用的性能事件&#xff0c;这…...

编程日记 2023/9/10 22:05:11

将多个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; …...

编程日记 2023/9/10 22:04:10

【送书活动】揭秘分布式文件系统大规模元数据管理机制——以Alluxio文件系统为例

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 「推荐专栏」&#xff1a; ★java一站式服务 ★ ★ React从入门到精通★ ★前端炫酷代码分享 ★ ★ 从0到英雄&#xff0c;vue成神之路★ ★ uniapp-从构建到提升★ ★ 从0到英雄&#xff…...

编程日记 2023/9/10 22:03:09

微信小程序——数据绑定

在微信小程序中&#xff0c;可以通过以下代码实现数据绑定&#xff1a; 在WXML中&#xff0c;使用双大括号{{}}绑定数据&#xff0c;将数据渲染到对应的视图中。 <view>{{message}}</view>在JS中&#xff0c;定义一个数据对象&#xff0c;并将其绑定到页面的data…...

编程日记 2023/9/10 22:02:07

libbpf-bootstrap安卓aarch64适配交叉编译

1.为什么移植 疑惑 起初我也认为&#xff0c;像libbpf-bootstrap这样在ebpf程序开发中很常用的框架&#xff0c;理应支持不同架构的交叉编译。尤其是向内核态的ebpf程序本身就是直接通过clang的-target btf直接生成字节码&#xff0c;各个内核上的ebpf虚拟机大同小异&#xf…...

编程日记 2023/9/10 22:01:07

【剑指Offer】24.反转链表

题目 定义一个函数&#xff0c;输入一个链表的头节点&#xff0c;反转该链表并输出反转后链表的头节点。 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL限制&#xff1a; 0 < 节点个数 < 5000 解答 源代码 /*** Defin…...

编程日记 2023/9/10 22:00:03

04-docker compose容器编排

Docker Compose简介 Docker Compose是什么 ​ Compose 是Docker公司推出的一个工具软件&#xff0c;可以管理多个Dokcer容器组成一个应用。你需要定义一个YAML格式的配置文件 docker-compose.yml&#xff0c;写好多个容器之间的调用关系。然后&#xff0c;只要一个命令&#…...

编程日记 2023/9/10 21:59:01

通过位运算打多个标记

通过位运算打多个标记 如何在一个字段上&#xff0c;记录多个标记&#xff1f; 如何在一个字段上&#xff0c;记录不同类型的多个标记&#xff1f; 如何用较少的字段&#xff0c;记录多个标记&#xff1f; 如何在不增加字段的要求下&#xff0c;记录新增的标记&#xff1f; 在实…...

编程日记 2023/9/10 21:57:58

[学习笔记]Node2Vec图神经网络论文精读

参考资料&#xff1a;https://www.bilibili.com/video/BV1BS4y1E7tf/?p12&spm_id_frompageDriver Node2vec简述 DeepWalk的缺点 用完全随机游走&#xff0c;训练节点嵌入向量&#xff0c;仅能反应相邻节点的社群相似信息&#xff0c;无法反映节点的功能角色相似信息。 …...

编程日记 2023/9/10 21:56:57

C# Linq源码分析之Take（五）

概要 本文在C# Linq源码分析之Take&#xff08;四&#xff09;的基础上继续从源码角度分析Take的优化方法&#xff0c;主要分析Where.Select.Take的使用案例。 Where.Select.Take的案例分析 该场景模拟我们显示中将EF中与数据库关联的对象进行过滤&#xff0c;然后转换成Web…...

编程日记 2023/9/10 21:55:56

性能监控-grafana+prometheus+node_exporter

Prometheus是一个开源的系统监控和报警工具。它由SoundCloud开发并于2012年发布&#xff0c;后来成为了一个独立的开源项目&#xff0c;并得到了广泛的应用和支持。 Prometheus的主要功能包括采集和存储各种系统和应用程序的监控数据&#xff0c;并提供强大的查询语言PromQL来…...

编程日记 2023/9/10 21:54:54

（STM32H5系列）STM32H573RIT6、STM32H573RIV6、STM32H573ZIT6嵌入式微控制器基于Cortex®-M33内核

一、应用 工业&#xff08;PLC、工业电机控制、泵和压缩机&#xff09; 智能家居&#xff08;空调、冰箱、冰柜、中央警报系统、洗衣机&#xff09; 个人电子产品&#xff08;键盘、智能手机、物联网标签、跟踪设备&#xff09; 智能城市&#xff08;工业通信、照明控制、数字…...

编程日记 2023/9/10 21:53:53

mysql配置bind-address不生效

1、前言 因为要ip直接访问mysql&#xff0c;故去修改bind-address参数&#xff0c;按照mysql配置文件查找顺序是&#xff1a;/etc/my.cnf、/etc/mysql/my.cnf、~/.my.cnf&#xff0c;服务器上没有 /etc/my.cnf文件&#xff0c;故去修改 /etc/mysql/my.cnf文件&#xff0c;但是一…...

编程日记 2023/9/10 21:52:51

Linux相关指令（下）

cat指令 查看目标文件的内容 常用选项&#xff1a; -b 对非空输出行编号 -n 对输出的所有行编号 -s 不输出多行空行 一个重要思想&#xff1a;linux下一切皆文件&#xff0c;如显示器文件&#xff0c;键盘文件 cat默认从键盘中读取数据再打印 退出可以ctrlc 输入重定向<…...

编程日记 2023/9/10 21:51:51

Codeforces Round 855 (Div 3)（A - F）

Codeforces Round 855 (Div. 3)&#xff08;A - F&#xff09; Codeforces Round 855 (Div. 3) A. Is It a Cat?(思维) 思路&#xff1a;先把所有字母变成小写方便判断 &#xff0c; 然后把每一部分取一个字母出来 &#xff0c; 判断和‘meow’是否相同即可。 复杂度 O ( n…...

编程日记 2023/9/10 21:50:49

Friend.tech（FT）：社交媒体金融的未来，真的如此美好吗？

Friend.tech&#xff08;FT&#xff09;是一个在2023年8月10日正式推出的社交金融平台&#xff0c;它的特点在于允许用户购买和出售创作者的股票&#xff08;shares&#xff09;&#xff0c;这些股票赋予用户访问创作者内容的权利。FT的推出引发了广泛的关注&#xff0c;吸引了…...

编程日记 2023/9/10 21:49:48

yolov7中Concat之后加注意力模块（最复杂的情况）

1、common.py中找到Concat模块&#xff0c;复制一份 2、要传参进来&#xff0c;dim通道数 3、然后找yolo.py模块&#xff0c;添加 4、yaml里替换 5、和加的位置也有关系...

编程日记 2023/9/10 21:48:46

解除百度安全验证

使用chrome浏览器用百度浏览时&#xff0c;一直弹百度安全验证&#xff1a; 在设置里进行重置&#xff1a; 然后重启浏览器就可以了。...

编程日记 2023/9/10 21:47:45

Codeforces Round 731 (Div 3)(A - F)

Codeforces Round 731 (Div. 3)(A - F) Dashboard - Codeforces Round 731 (Div. 3) - Codeforces A. Shortest Path with Obstacle&#xff08;思维&#xff09; 思路&#xff1a;显然要计算 A → B 之间的曼哈顿距离 &#xff0c; 要绕开 F 当且仅当 AB形成的直线平行于坐…...

编程日记 2023/9/10 21:46:44

Python的sort（）与sorted（）函数详解

目录 sort&#xff08;&#xff09;函数 sorted&#xff08;&#xff09;函数 key参数 区别 sort&#xff08;&#xff09;函数 sort()方法&#xff1a;该方法用于原地对列表进行排序&#xff0c;即直接在原始列表上进行排序操作&#xff0c;并不返回一个新的列表。 my_l…...

编程日记 2023/9/10 21:45:43

用python实现基本数据结构【04/4】

说明 如果需要用到这些知识却没有掌握&#xff0c;则会让人感到沮丧&#xff0c;也可能导致面试被拒。无论是花几天时间“突击”&#xff0c;还是利用零碎的时间持续学习&#xff0c;在数据结构上下点功夫都是值得的。那么Python 中有哪些数据结构呢&#xff1f;列表、字典、集…...

编程日记 2023/9/10 21:44:41

“必抓！”算法

一个程序员一生中可能会邂逅各种各样的算法&#xff0c;但总有那么几种&#xff0c;是作为一个程序员一定会遇见且大概率需要掌握的算法。今天就来聊聊这些十分重要的“必抓&#xff01;”算法吧~ 你可以从以下几个方面进行创作&#xff08;仅供参考&#xff09; 一&#xff…...

编程日记 2023/9/10 21:43:40

国外做ae模板网站大全/如何优化网络环境

在安装vue之前&#xff0c;先确保node和npm是否安装。如果安装ok&#xff0c;那么接下来安装vue1. npm install vue (安装vue)2. npm install --global vue-cli &#xff08;安装vue-cli&#xff09;因为npm是国外的&#xff0c;使用起来比较慢&#xff0c;使安装vue会出现报…...

编程日记 2024/11/27 22:42:53

兵团第二师建设环保局网站/长沙正规竞价优化推荐

更好的学习网址&#xff1a;http://www.voidspace.org.uk/python/articles/urllib2.shtml#openers-and-handlers以下为个人学习笔记。在开始后面的内容之前&#xff0c;先来解释一下urllib2中的两个个方法&#xff1a;info and geturl urlopen返回的应答对象response(或者HTTPE…...

编程日记 2024/11/27 21:33:18

在网站插入微博静态的网页出的来到服务器出不来/百度的广告推广需要多少费用

大家好&#xff0c;这里是学设计的小豆芽&#xff0c;上一篇文章给大家讲到了如何查&#xff0c;看图片尺寸大小及如何修改图片尺寸的相关问题&#xff0c;今天和大家聊聊有关图片压缩的相关的问题&#xff0c;主要包含以下这4个方面。1&#xff0c;如何压缩图片&#xff08;jp…...

编程日记 2024/11/27 20:08:35

orchid wordpress/百度app下载并安装

本文将聚焦对ASP.NET2.0内置的GridView进行扩展的一系列新功能。其中本文介绍两个主要特征&#xff1a;基于行的上下文菜单&#xff08;Row_base ContextMenu&#xff09;和基于过滤功能的GridView的行&#xff0c;在上周我曾经介绍了GridView控件。在我们自定义的GridView控件…...

编程日记 2024/11/27 18:05:23

昆山高端网站建设公司哪家好/茶叶网络营销策划方案

w ^ 我个人对卷积的理解&#xff1a; 卷积是一种对一个目标的一组参数中我们已经得知其中部分我们需要的参数特征&#xff0c;进而需要得到这组参数全部特征的计算方法&#xff0c;来源&#xff1a;泛函分析褶积。 卷积这个概念最早用在图像信号处理上&#xff0c;所以会出现…...

编程日记 2024/11/27 17:39:58

乐清建站/优化技术基础

商人小鑫 Time Limit: 1000MS Memory limit: 65536K 题目描述 小鑫是个商人&#xff0c;当然商人最希望的就是多赚钱&#xff0c;小鑫也一样。这天&#xff0c;他来到了一个遥远的国度。那里有着n件商品&#xff0c;对于第i件商品需要付出ci的价钱才能得到。当然&#xff0c;对…...

编程日记 2024/11/27 16:05:53