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国内外研究…...
接口测试中缓存处理策略
在接口测试中，缓存处理策略是一个关键环节，直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性，避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明： 一、缓存处理的核…...
conda相比python好处
Conda 作为 Python 的环境和包管理工具，相比原生 Python 生态（如 pip 虚拟环境）有许多独特优势，尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处： 一、一站式环境管理：…...
突破不可导策略的训练难题：零阶优化与强化学习的深度嵌合
强化学习（Reinforcement Learning, RL）是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程，然后使用强化学习的Actor-Critic机制（中文译作“知行互动”机制），逐步迭代求解…...
UE5 学习系列（三）创建和移动物体
这篇博客是该系列的第三篇，是在之前两篇博客的基础上展开，主要介绍如何在操作界面中创建和拖动物体，这篇博客跟随的视频链接如下： B 站视频：s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...
聊聊 Pulsar：Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...
《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》
在注意力分散、内容高度同质化的时代，情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现，消费者对内容的“有感”程度，正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中࿰…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址：pdf 英文是纯手打的！论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误，若有发现欢迎评论指正！文章偏向于笔记，谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
什么是库存周转？如何用进销存系统提高库存周转率？
你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...
剑指offer20_链表中环的入口节点
链表中环的入口节点 给定一个链表，若其中包含环，则输出环的入口节点。 若其中不包含环，则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...
基于数字孪生的水厂可视化平台建设：架构与实践
分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...