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

CSS元素显示类型

news 2026/2/10 19:47:52

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>）
boxCSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最老版本）
inline-boxCSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最老版本）
flexboxCSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的过渡版本）
inline-flexboxCSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的过渡版本）
flexCSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最新版本）
inline-flexCSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最新版本）
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 中最重要的属性之一&#xff0c;主要用来控制元素的布局&#xff0c;通过 display 属性您可以设置元素是否显示以及如何显示。 根据元素类型的不同&#xff0c;每个元素都有一个默认的 display 属性值&#xff0c;例如<div>默认的 display 属性值为 …...

编程日记 2024/10/11 16:31:01

Flink 介绍（特性、概念、故障容错、运维部署、应用场景）

概述 特性 概念 数据流 状态 时间 savepoint 故障容错 运维部署 部署应用到任意地方 Flink能够更方便地升级、迁移、暂停、恢复应用服务 监控和控制应用服务 运行任意规模应用 应用场景 事件驱动型应用 什么是事件驱动型应用？ 事件驱动型应用的优势 Flink如何…...

编程日记 2024/10/11 16:30:00

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} 二、…...

编程日记 2024/10/11 16:24:53

门店收银营销活动打折特价-收银系统源码

1.功能描述 功能描述&#xff1a;连锁店总部/门店可以将商品设置第二件打折&#xff0c;如保温杯第一件10元&#xff0c;第二件5折&#xff1b; 2.适用场景 ☑新店开业、门店周年庆、节假日等特定时间促销&#xff1b; ☑会员拉新&#xff0c;设置会员专享套餐&#xff1b; …...

编程日记 2024/10/11 16:22:51

QTabWidget的每个tab居中显示图标和文本

使用QTabWidget&#xff0c;给每个tab添加了图标之后&#xff0c;文字和图标之间有间距&#xff0c;没有完美居中显示。 遇到此问题&#xff0c;尝试了多种办法&#xff0c;均不理想&#xff0c;最终自定义QTabBar&#xff0c;重绘tab&#xff0c;完美解决。 #include <QT…...

编程日记 2024/10/11 16:20:47

Ubuntu20.04如何安装Microsoft Edge浏览器？

Microsoft Edge是由微软开发的一款网页浏览器，首次发布于2015年，作为Windows 10操作系统的默认浏览器，取代了之前的Internet Explorer。 基于Chromium内核：自2019年起，Microsoft Edge转向了使用开源的Chromium内核，这使得它与Google Chrome在性能和兼容性方面有很多相似之…...

编程日记 2024/10/11 16:19:46

美团Java一面

美团Java一面 9.24一面&#xff0c;已经寄了 收到的第一个面试&#xff0c;表现很不好 spring bean生命周期 作用域&#xff08;忘完了&#xff09; 为什么用redis缓存 redis和数据库的缓存一致性问题 redis集群下缓存更新不一致问题 aop说一下 arraylist和linkedlist 数据库的…...

编程日记 2024/10/11 16:18:44

C#中ref关键字和out关键字

值传递和引用传递 值传递和引用传递是编程中涉及数据传递的两种方式。它们的主要区别在于数据是如何在函数或方法之间传递的。 值传递 值传递意味着当你把一个变量传递给一个函数时&#xff0c;实际上传递的是这个变量的值的一个拷贝。也就是说&#xff0c;函数内部对这个参数…...

编程日记 2024/10/11 16:17:43

贴吧软件怎么切换ip

在网络使用中&#xff0c;有时我们需要切换IP地址来满足特定的需求&#xff0c;比如需要切换贴吧软件IP以进行不同的操作。本文将介绍几种贴吧切换IP地址的方法&#xff0c;帮助用户更好地管理自己的网络身份和访问权限。 1、更换网络环境‌ 通过连接到不同的Wi-Fi网络或使用移…...

编程日记 2024/10/11 16:13:37

图像分割恢复方法

传统的图像分割方法主要依赖于图像的灰度值、纹理、颜色等特征&#xff0c;通过不同的算法将图像分割成多个区域。这些方法通常可以分为以下几类&#xff1a; 1.基于阈值的方法 2.基于边缘的方法 3.基于区域的方法 4.基于聚类的方法 下面详细介绍这些方法及其示例代码。 1. 基…...

编程日记 2024/10/11 16:11:35

Ultralytics：YOLO11使用教程

Ultralytics&#xff1a;YOLO11使用教程 前言相关介绍前提条件实验环境安装环境项目地址LinuxWindows YOLO11使用教程进行目标检测进行实例分割进行姿势估计进行旋转框检测进行图像分类 参考文献 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;敬请批评改正。更多…...

编程日记 2024/10/11 16:10:34

前缀和算法——优选算法

个人主页&#xff1a;敲上瘾-CSDN博客 个人专栏&#xff1a;游戏、数据结构、c语言基础、c学习、算法 一、什么是前缀和&#xff1f; 前缀和是指从数组的起始位置到某一位置&#xff08;或矩阵的某个区域&#xff09;的所有元素的和。这种算法通过预处理数组或矩阵&#xff0c;…...

编程日记 2024/10/11 16:08:30

YOLO11改进|注意力机制篇|引入HAT超分辨率重建模块

目录 一、HAttention注意力机制1.1HAttention注意力介绍1.2HAT核心代码 二、添加HAT注意力机制2.1STEP12.2STEP22.3STEP32.4STEP4 三、yaml文件与运行3.1yaml文件3.2运行成功截图 一、HAttention注意力机制 1.1HAttention注意力介绍 HAT模型 通过结合卷积特征提取与多尺度注意…...

编程日记 2024/10/11 16:06:27

老牛也想吃嫩草，思科为何巨资投入云初创CoreWeave？

【科技明说 &#xff5c; 科技热点关注】 当我看到前些天思科(Cisco)的新闻时笑了。业内朋友对我说&#xff0c;老牛也想吃嫩草&#xff0c;人之常情尔&#xff0c;都是为了好好活着。 作为全球著名的网络产品巨头&#xff0c;思科Cisco论是遭遇到何种市场与行业巨变&#xff…...

编程日记 2024/10/11 16:04:24

Spring Boot 事务管理入门

在 Spring Boot 应用中&#xff0c;事务管理是一个至关重要的方面&#xff0c;它确保了数据的一致性和完整性。本文将深入探讨 Spring Boot 中事务管理的机制、使用方法以及注意事项&#xff0c;并提供丰富的示例代码。 其它教程&#xff1a; mysql事务详解 一、事务基础概念…...

编程日记 2024/10/11 16:03:23

20年408数据结构

第一题&#xff1a; 解析&#xff1a;这种题可以先画个草图分析一下&#xff0c;一下就看出来了。 这里的m(7,2)对应的是这图里的m(2,7),第一列存1个元素&#xff0c;第二列存2个元素&#xff0c;第三列存3个元素&#xff0c;第四列存4个元素&#xff0c;第五列存5个元素&#…...

编程日记 2024/10/11 16:02:19

4反馈、LC、石英、RC振荡器

1什么是振荡器&#xff1f; 我们看看振荡器在无线通信中扮演什么角色&#xff1f; 1&#xff09;无线通信的波是指电磁波‌。 2‌&#xff09;电磁波的频率高于100KHz才能在空气中传播。‌ 3&#xff09;空气中的高频电磁波的相位和振幅可以排列组合包含信息。 4&#xff09;无…...

编程日记 2024/10/11 16:01:18

go 的 timer reset

在 Go 语言 1.23 版本之前&#xff0c;与Timer&#xff08;定时器&#xff09;关联的通道是异步的&#xff08;有缓冲&#xff0c;容量为 1&#xff09;。这意味着即使在调用Timer.Stop&#xff08;停止定时器&#xff09;或Timer.Reset&#xff08;重置定时器&#xff09;并返…...

编程日记 2024/10/11 16:00:17

每日一面 day03

Q&#xff1a;介绍一下MySQL的三种日志&#xff08;redo&#xff0c;undo&#xff0c;bin&#xff09; Redo Log 和 Undo Log 是存储引擎 InnoDB 层面实现的&#xff0c;Bin Log 是 MySQL 层面实现的。 下面是三种日志的简要介绍&#xff1a; Redo Log&#xff1a;保证事务的…...

编程日记 2024/10/11 15:59:16

ssm基于SSM框架的餐馆点餐系统的设计+VUE

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码请私聊我 需要定制请私聊 目 录 摘要 I Abstract II 1绪论 1 1.1研究背景与意义 1 1.1.1研究背景 1 1.1.2研究意义 1 1.2国内外研究…...

编程日记 2024/10/11 15:58:15

后进先出（LIFO）详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

编程新知 2026/2/8 1:22:58

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model&#xff1a;绑定右侧列表的值&…...

编程新知 2026/2/4 4:25:40

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/9/25 18:41:38

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/12/6 10:54:35

如何更改默认 Crontab 编辑器 ？

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

编程新知 2026/1/30 3:27:35

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/11/1 2:00:51

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/7 17:45:38

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33

React从基础入门到高级实战：React 实战项目 - 项目五：微前端与模块化架构

React 实战项目&#xff1a;微前端与模块化架构 欢迎来到 React 开发教程专栏 的第 30 篇&#xff01;在前 29 篇文章中&#xff0c;我们从 React 的基础概念逐步深入到高级技巧&#xff0c;涵盖了组件设计、状态管理、路由配置、性能优化和企业级应用等核心内容。这一次&…...

编程新知 2025/10/18 20:50:06

网页端 js 读取发票里的二维码信息（图片和PDF格式）

起因 为了实现在报销流程中&#xff0c;发票不能重用的限制&#xff0c;发票上传后&#xff0c;希望能读出发票号&#xff0c;并记录发票号已用&#xff0c;下次不再可用于报销。 基于上面的需求&#xff0c;研究了OCR 的方式和读PDF的方式&#xff0c;实际是可行的&#xff…...

编程新知 2026/2/4 11:44:46