CSS元素显示类型
display 属性是 CSS 中最重要的属性之一，主要用来控制元素的布局，通过 display 属性您可以设置元素是否显示以及如何显示。
根据元素类型的不同，每个元素都有一个默认的 display 属性值，例如<div>默认的 display 属性值为
block（块级元素），而<span>默认的 display 属性值为 inline（行内元素），您也可以手动将元素的 display
属性转换为其它值。display 属性的可选值如下：
| 值 | 描述 |
|---|---|
| none | 隐藏元素 |
| block | 将元素设置为块级元素 |
| inline | 将元素设置为内联元素 |
| list-item | 将元素设置为列表项目 |
| inline-block | 将元素设置为行内块元素 |
| table | 将元素设置为块元素级的表格（类似<table>） |
| inline-table | 将元素设置为内联元素级的表格（类似<table>） |
| table-caption | 将元素设置为表格的标题（类似<caption>） |
| table-cell | 将元素设置为表格的单元格（类似<td>和<th>） |
| table-row | 将元素设置为表格的行（类似<tr>） |
| table-row-group | 将元素设置为表格的内容部分（类似 <tbody>） |
| table-column | 将元素设置为表格的列（类似<col>） |
| table-column-group | 将元素设置为表格中一个或多个列的分组（类似<colgroup>） |
| table-header-group | 将元素设置为表格的头部（类似<thead>） |
| table-footer-group | 将元素设置为表格的脚（类似<tfoot>） |
| box | CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最老版本） |
| inline-box | CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最老版本） |
| flexbox | CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的过渡版本） |
| inline-flexbox | CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的过渡版本） |
| flex | CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最新版本） |
| inline-flex | CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最新版本） |
| run-in | 根据上下文来决定将元素设置为块级元素或内联元素 |
| inherit | 从父元素继承 display 属性的值 |
伸缩盒子（弹性盒子）是 CSS3
中一种新的布局模式，引入伸缩盒子的目的是提供一种更加有效的方式来对页面中的元素进行排列、对齐和分配空间，当页面需要适应不同的屏幕大小以及设备类型时这种布局方式能够确保元素拥有恰当尺寸和位置。
下面通过几个常用的属性值来介绍以下 display 属性的使用：
display: none
display 的属性值 none 可以用来隐藏元素，与前面我们介绍《CSS
visibility》时提到的visibility: hidden;功能相似，不同的是display: none;在隐藏元素的同时，它还会将元素所占的位置一并隐藏。display: none; 通常会与 JavaScript
结合使用来隐藏或显示某个元素，下面通过一个示例来演示一下：
<!DOCTYPE html><html><head><style>div {width: 350px;height: 100px;background-color: #AAA;}</style></head><body><div id="box"> </div><button onclick="change_box(this)">隐藏</button><script>function change_box(obj){var box = document.getElementById('box');if(box.style.display == 'none'){box.style.display = "";obj.innerHTML = "隐藏";}else{box.style.display = "none";obj.innerHTML = "显示";}}</script></body></html>
运行上面的代码，在页面中点击“显示”或“隐藏”按钮即可对页面中指定的元素执行显示或隐藏操作，如下图所示：
图：display: none; 属性演示
display: block
display 属性的属性值 block 可以将元素强制转换为块级元素，示例代码如下：
<!DOCTYPE html><html><head><style>a{display: block;width: 150px;height: 50px;background-color: #ACC;line-height: 50px;text-align: center;text-decoration: none;}</style></head><body><a href="">这是一个链接</a></body></html>
运行结果如下图所示：
图：display: block; 属性演示
display: inline
display 属性的属性值 inline 可以将元素强制转换为行内元素，让元素拥有行内元素的特性，例如可以与其他行内元素共享一行等，示例代码如下：
<!DOCTYPE html><html><head><style>div {width: 50px;height: 50px;background-color: #ACC;border: 1px solid black;}.inline {display: inline;}</style></head><body><div></div><div></div><div class="inline">display: inline;</div><div class="inline">display: inline;</div></body></html>
运行结果如下图所示：
图：display: inline; 属性演示
display: inline-block
display 属性的属性值 inline-block 可以将元素强制转换为行内块元素，inline-block 既具有 block
能够设置宽高的特性又具有 inline 不独占一行的特性，示例代码如下：
<!DOCTYPE html><html><head><style>div {width: 130px;height: 50px;background-color: #ACC;border: 1px solid black;}.inline-block {display: inline-block;text-align: center;margin-top: 10px;}</style></head><body><div></div><div></div><div class="inline-block">display: inline-block;</div><div class="inline-block">display: inline-block;</div></body></html>
运行结果如下图所示：
图：display: inline-block; 属性演示
原文地址CSS元素显示类型
相关文章：
CSS元素显示类型
display 属性是 CSS 中最重要的属性之一，主要用来控制元素的布局，通过 display 属性您可以设置元素是否显示以及如何显示。 根据元素类型的不同，每个元素都有一个默认的 display 属性值，例如<div>默认的 display 属性值为 …...
Flink 介绍（特性、概念、故障容错、运维部署、应用场景）
概述 特性 概念 数据流 状态 时间 savepoint 故障容错 运维部署 部署应用到任意地方 Flink能够更方便地升级、迁移、暂停、恢复应用服务 监控和控制应用服务 运行任意规模应用 应用场景 事件驱动型应用 什么是事件驱动型应用？ 事件驱动型应用的优势 Flink如何…...
Python+Flask接口判断身份证省份、生日、性别、有效性验证+docker部署+Nginx代理运行
这里写目录标题 一、接口样式二、部署流程2.1 镜像打包2.1.1 准备工作2.1.2 build打包2.1.3 dokcer部署运行2.1.4 Nginx代理 三、代码及文件3.1 index.py3.2 areaCodes.json3.3 Dockerfile 一、接口样式 https://blog.henryplus.cn/idcardApi/idCard/query?idcard{idcard} 二、…...
门店收银营销活动打折特价-收银系统源码
1.功能描述 功能描述：连锁店总部/门店可以将商品设置第二件打折，如保温杯第一件10元，第二件5折； 2.适用场景 ☑新店开业、门店周年庆、节假日等特定时间促销； ☑会员拉新，设置会员专享套餐； …...
QTabWidget的每个tab居中显示图标和文本
使用QTabWidget，给每个tab添加了图标之后，文字和图标之间有间距，没有完美居中显示。 遇到此问题，尝试了多种办法，均不理想，最终自定义QTabBar，重绘tab，完美解决。 #include <QT…...
Ubuntu20.04如何安装Microsoft Edge浏览器？
Microsoft Edge是由微软开发的一款网页浏览器，首次发布于2015年，作为Windows 10操作系统的默认浏览器，取代了之前的Internet Explorer。 基于Chromium内核：自2019年起，Microsoft Edge转向了使用开源的Chromium内核，这使得它与Google Chrome在性能和兼容性方面有很多相似之…...
美团Java一面
美团Java一面 9.24一面，已经寄了 收到的第一个面试，表现很不好 spring bean生命周期 作用域（忘完了） 为什么用redis缓存 redis和数据库的缓存一致性问题 redis集群下缓存更新不一致问题 aop说一下 arraylist和linkedlist 数据库的…...
C#中ref关键字和out关键字
值传递和引用传递 值传递和引用传递是编程中涉及数据传递的两种方式。它们的主要区别在于数据是如何在函数或方法之间传递的。 值传递 值传递意味着当你把一个变量传递给一个函数时，实际上传递的是这个变量的值的一个拷贝。也就是说，函数内部对这个参数…...
贴吧软件怎么切换ip
在网络使用中，有时我们需要切换IP地址来满足特定的需求，比如需要切换贴吧软件IP以进行不同的操作。本文将介绍几种贴吧切换IP地址的方法，帮助用户更好地管理自己的网络身份和访问权限。 1、更换网络环境 通过连接到不同的Wi-Fi网络或使用移…...
图像分割恢复方法
传统的图像分割方法主要依赖于图像的灰度值、纹理、颜色等特征，通过不同的算法将图像分割成多个区域。这些方法通常可以分为以下几类： 1.基于阈值的方法 2.基于边缘的方法 3.基于区域的方法 4.基于聚类的方法 下面详细介绍这些方法及其示例代码。 1. 基…...
Ultralytics：YOLO11使用教程
Ultralytics：YOLO11使用教程 前言相关介绍前提条件实验环境安装环境项目地址LinuxWindows YOLO11使用教程进行目标检测进行实例分割进行姿势估计进行旋转框检测进行图像分类 参考文献 前言 由于本人水平有限，难免出现错漏，敬请批评改正。更多…...
前缀和算法——优选算法
个人主页：敲上瘾-CSDN博客 个人专栏：游戏、数据结构、c语言基础、c学习、算法 一、什么是前缀和？ 前缀和是指从数组的起始位置到某一位置（或矩阵的某个区域）的所有元素的和。这种算法通过预处理数组或矩阵，…...
YOLO11改进|注意力机制篇|引入HAT超分辨率重建模块
目录 一、HAttention注意力机制1.1HAttention注意力介绍1.2HAT核心代码 二、添加HAT注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、HAttention注意力机制 1.1HAttention注意力介绍 HAT模型 通过结合卷积特征提取与多尺度注意…...
老牛也想吃嫩草，思科为何巨资投入云初创CoreWeave？
【科技明说 ｜ 科技热点关注】 当我看到前些天思科(Cisco)的新闻时笑了。业内朋友对我说，老牛也想吃嫩草，人之常情尔，都是为了好好活着。 作为全球著名的网络产品巨头，思科Cisco论是遭遇到何种市场与行业巨变ÿ…...
Spring Boot 事务管理入门
在 Spring Boot 应用中，事务管理是一个至关重要的方面，它确保了数据的一致性和完整性。本文将深入探讨 Spring Boot 中事务管理的机制、使用方法以及注意事项，并提供丰富的示例代码。 其它教程： mysql事务详解 一、事务基础概念…...
20年408数据结构
第一题： 解析：这种题可以先画个草图分析一下，一下就看出来了。 这里的m(7,2)对应的是这图里的m(2,7),第一列存1个元素，第二列存2个元素，第三列存3个元素，第四列存4个元素，第五列存5个元素&#…...
4反馈、LC、石英、RC振荡器
1什么是振荡器？ 我们看看振荡器在无线通信中扮演什么角色？ 1）无线通信的波是指电磁波。 2）电磁波的频率高于100KHz才能在空气中传播。 3）空气中的高频电磁波的相位和振幅可以排列组合包含信息。 4）无…...
go 的 timer reset
在 Go 语言 1.23 版本之前，与Timer（定时器）关联的通道是异步的（有缓冲，容量为 1）。这意味着即使在调用Timer.Stop（停止定时器）或Timer.Reset（重置定时器）并返…...
每日一面 day03
Q：介绍一下MySQL的三种日志（redo，undo，bin） Redo Log 和 Undo Log 是存储引擎 InnoDB 层面实现的，Bin Log 是 MySQL 层面实现的。 下面是三种日志的简要介绍： Redo Log：保证事务的…...
ssm基于SSM框架的餐馆点餐系统的设计+VUE
系统包含：源码论文 所用技术：SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习，获取源码请私聊我 需要定制请私聊 目 录 摘要 I Abstract II 1绪论 1 1.1研究背景与意义 1 1.1.1研究背景 1 1.1.2研究意义 1 1.2国内外研究…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档：Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后，会在本地和远程创建数据库： npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库： 现在，您的Cloudfla…...
生成 Git SSH 证书
🔑 1. 生成 SSH 密钥对 在终端（Windows 使用 Git Bash，Mac/Linux 使用 Terminal）执行命令： ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" 参数说明： -t rsa&#x…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）
1.获取 authorizationCode： 2.利用 authorizationCode 获取 accessToken：文档中心 3.获取手机：文档中心 4.获取昵称头像：文档中心 首先创建 request 若要获取手机号，scope必填 phone，permissions 必填 …...
Docker 本地安装 mysql 数据库
Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker ；并安装。 基础操作不再赘述。 打开 macOS 终端，开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...
Linux 中如何提取压缩文件 ？
Linux 是一种流行的开源操作系统，它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间，使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的，要在 …...
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join
纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...
RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）
RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...
作为测试我们应该关注redis哪些方面
1、功能测试 数据结构操作：验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化：测试aof和aof持久化机制，确保数据在开启后正确恢复。 事务：检查事务的原子性和回滚机制。 发布订阅：确保消息正确传递。 2、性…...