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国内外研究…...
生成xcframework
打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式，可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...
JavaSec-RCE
简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性，…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能，包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
边缘计算医疗风险自查APP开发方案
核心目标：在便携设备（智能手表/家用检测仪）部署轻量化疾病预测模型，实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...
Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）
文章目录 1.什么是Redis？2.为什么要使用redis作为mysql的缓存？3.什么是缓存雪崩、缓存穿透、缓存击穿？3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
DIY｜Mac 搭建 ESP-IDF 开发环境及编译小智 AI
前一阵子在百度 AI 开发者大会上，看到基于小智 AI DIY 玩具的演示，感觉有点意思，想着自己也来试试。 如果只是想烧录现成的固件，乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外，还提供了基于网页版的 ESP LA…...
网络编程（UDP编程）
思维导图 UDP基础编程（单播） 1.流程图 服务器：短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
虚拟电厂发展三大趋势：市场化、技术主导、车网互联
市场化：从政策驱动到多元盈利 政策全面赋能 2025年4月，国家发改委、能源局发布《关于加快推进虚拟电厂发展的指导意见》，首次明确虚拟电厂为“独立市场主体”，提出硬性目标：2027年全国调节能力≥2000万千瓦࿰…...
MySQL 8.0 事务全面讲解
以下是一个结合两次回答的 MySQL 8.0 事务全面讲解，涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容，并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念（ACID） 事务是…...
windows系统MySQL安装文档
概览：本文讨论了MySQL的安装、使用过程中涉及的解压、配置、初始化、注册服务、启动、修改密码、登录、退出以及卸载等相关内容，为学习者提供全面的操作指导。关键要点包括： 解压 ：下载完成后解压压缩包，得到MySQL 8.…...